CODEWITHSUNDEEP
jqueryangularjscoffeescript
Allisone
Allisone

Reputation: 9054

angular tutorial inside coffeescript with jquery "->"

Trying to learn angular. Started with the tutorial.

I have a coffeescript file, that is compiled on the server and then minified.
This works:

phonecatApp = angular.module('phonecatApp',[])

PhoneListCtrl = ($scope) ->
    $scope.phones = [
        {
            name: 'Nexus S',
            snippet: 'Fast just got faster with Nexus S.'
        }
        {
            name: 'Motorola XOOM™ with Wi-Fi',
            snippet: 'The Next, Next Generation tablet.'
        }
        {
            name: 'MOTOROLA XOOM™',
            snippet: 'The Next, Next Generation tablet.'
        }
    ]
PhoneListCtrl.$inject = [
    "$scope"
]
phonecatApp.controller 'PhoneListCtrl', PhoneListCtrl

But this (added the arrow "->") doesn't

->
    phonecatApp = angular.module('phonecatApp',[])

    PhoneListCtrl = ($scope) ->
        $scope.phones = [
            {
                name: 'Nexus S',
                snippet: 'Fast just got faster with Nexus S.'
            }
            {
                name: 'Motorola XOOM™ with Wi-Fi',
                snippet: 'The Next, Next Generation tablet.'
            }
            {
                name: 'MOTOROLA XOOM™',
                snippet: 'The Next, Next Generation tablet.'
            }
        ]
    PhoneListCtrl.$inject = [
        "$scope"
    ]
    phonecatApp.controller 'PhoneListCtrl', PhoneListCtrl

I tried a lot already but nothing works

HTML looks like this

<html ng-app="phonecatApp">
<head>
  ...
  <script src="...com/.../angularjs/1.2.16/angular.min.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body>
  <div class="container" ng-controller="PhoneListCtrl">
    <ul>
      <li ng-repeat="phone in phones">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
      </li>
    </ul>
  </div>
</body>
</html>

Upvotes: 0

Views: 154

Answers (1)

Animal Rights
Animal Rights

Reputation: 9397

Do this for a document ready

$ ->
    var x = 5; // your code here

I dont think you need to do this though since angular bootstraps when the page is loaded, unless you are using angular.bootstrap() before the DOM is loaded.

Upvotes: 1

Related Questions