<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">
<head>
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body >
<ul class="phones">
<li ng-repeat="phone in phones | filter:query |orderBy:orderProp">
{{phone.name}}
{{query}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
The js/controllers.js file
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
});
What all is happening here?
We are defining a controller PhoneListCtrl and we are making a request to phones/phones.json file and binding the success data to phones scope. Scope works like a glue between controller and view in angular.
One thing is really needed the attention here how easily the json has parsed and added to dom content .
0 Comment(s)