Search code examples
javascriptangularjslivescript

AngularJS not recognizing LiveScript's controller

No idea what is going on here!

I keep getting the error:

Error: Argument 'TasksController' is not a function, got undefined
    at qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:16:79)
    at ra (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:16:187)
    at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:50:411)
    at $get.f (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:42:146)
    at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:6:312)
    at j (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:42:8)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:207)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:224)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:224)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:224)
        ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:60

Here is my LiveScript /Scripts/app.txt file:

TasksController = (scope) ->
        scope.tasks = ["a", "b"]

Here is my html:

<!DOCTYPE html>
<html lang="en" ng-app>
<head>    
    <link href="/Styles/site.css" rel="stylesheet" />
    <link href="/Styles/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/Styles/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
</head>
<body>

    <div ng-controller="TasksController">
        <ul>
            <li ng-repeat="task in tasks">
                {{task}}
            </li>
        </ul>
    </div>

     <script type="text/ls" src="/Scripts/app.txt"></script>    
    <script src="/Scripts/livescript.js"></script>
</body>
</html>
Solution

  • Just for completeness here is what I figured out.

    Compile livescript file first, (for example, with Node Livescript compiler). Otherwise, "livescript.js" (inline compiler) will be too late in interpreting the script file for AngularJS to call it in time.