AngularJS tutorial #2
- 並べ替え
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<select ng-model="orderProp">
- default value of orderProp
$scope.orderProp = 'age';
- pre select
<option value="age">Newest</option>
- 初期orderPropが無い場合 -> temporarily add a new "unknown" option
- pre select
- 逆順
<option value="-age">Oldest</option>
- Angular's built-in services called
$http
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) { $scope.phones = data; });
- $http service returns a promise object with a success method
- $ prefix is there to namespace Angular-provided services. To prevent collisions
- begin with $$. These properties are considered private
- A Note on Minification
- You can create a $inject property on the controller function which holds an array of strings
function PhoneListCtrl($scope, $http) {...}
PhoneListCtrl.$inject = ['$scope', '$http'];
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
- 別の書き方推奨
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]);
- inline
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);
- inline
- You can create a $inject property on the controller function which holds an array of strings
- Jasmine and angular-mocks.js
$httpBackend.expectGET('phones/phones.json').respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
- the responses are not returned until we call the
$httpBackend.flush
method
- Display json
<pre>{{phones | json}}</pre>
- Limit data in success block
$scope.phones = data.splice(0, 5);
- Link and image
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
src=
で書くとAngularが評価する前に画像を取りにいってしまう問題がある ->ng-src
step 4 - step 6
いちいちテストがあって良い