I am new to AngularJS and trying to have following code working.
This's actually the code from AngularJS tutorial with minor modification. What I have changed was I made all directives as class instead of attribute.
Issue is AngularJS can bootstrap successfully, and the expression {{ 1 + 2 }} can be evaluated. But ng-controller seems not be recognised and the following ng-repeat doesn't work neither.
I have checked AngularJS API document and it says ng-controller can be used as a class.
Could anyone who got experience in using AngularJS directives as classes help me on this?
ng-controller as class(not working): http://jsfiddle.net/qZmky/
ng-controller as attribute(working): http://jsfiddle.net/p45Uv/
<html class="ng-app">
<p>Nothing here {{1 + 2}}</p>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"> </script>
<script>
function 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."}
];
}
</script>
</head>
<body class="ng-controller: PhoneListCtrl;">
<ul>
<li ng-repeat="phone in phones;">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
Got answer from the AngularJS mailing list, the API document is actually wrong....
please reference the following for detail:
I created a jsfiddle for this example - http://jsfiddle.net/bsphere/xgGjL/
following the documentation - http://docs.angularjs.org/api/ng.directive:ngController it doesn't work for me as well.
why not simply use <body ng-controller="PhoneListCtrl"> ?
maybe you should try to ask this question in the mailing list (provide a jsfiddle)