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
  • 逆順 <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) {...}]);
• 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

いちいちテストがあって良い