AngularJS(2)PhoneCat Demo Basic

AngularJS(2)PhoneCat Demo Basic

Go on with the PhoneCat demo https://github.com/angular/angular-phonecat 

3. Filtering Repeaters
 
Controller
Load the json data as before

Template
<input ng-model=“query”> This is just a input box with an identifier ‘query’

<ling-repeat="phone in phones | filter:query"]]>
http://code.angularjs.org/1.2.8/docs/api/ng.filter:filter

Data-binding, when page loads, AngularJS binds the name of the input box to a variable of the same name in the data model and keeps the 2 in sync.

AngularJS is really powerful here.

End-to-End Test
In the e2e/scenarios.js

There are 2 options to start the e2e test.
Start the Web Server, and visit http://localhost:8000/test/e2e/runner.html

Or

Start the Web Server, and run the command
>./scripts/web-server.js 
>./scripts/e2e-test.sh

4. Two-way Data Binding
Template
<select ng-model=“orderProp”>
     <option value=“name”>Alphabetical</option>
     <option value=“age”>Newest</option>
</select>

<li ng-repeat=“phone in phones | filter: query | orderBy: orderProp”>

In the controllerJS file, we had codes like this>
$scope.orderProp = 'age’;

So it is like our default value for the select box, we are 2 way binding.
 
Reverse the sort like this
<option value="-age">Oldest</option> 

5. XHRs & Dependency Injection
Data
Put the mock fake data in the app/phones/phones.json file.

Controller
$http is just one of several built-in angular services that handle common operations in web apps.

Services are managed by Angular’s DI subsystem.
phonecatApp.controller(‘PhoneListCtrl’, function($scope, $http) {
     $http.get(‘phones/phones.json’).success(function(data) {
          $scope.phones = data;
     });
});

$http, this built-in object is really import to us.

$Prefix Naming Convention

Test
        beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
            $httpBackend = _$httpBackend_;
            $httpBackend.expectGET('phones/phones.json').
                respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);

            scope = $rootScope.$new();
            ctrl = $controller('PhoneListCtrl', {$scope: scope});
        }));

        it('should create "phones" model with 2 phones fetched from xhr', function() {
            expect(scope.phones).toBeUndefined();
            $httpBackend.flush();

            expect(scope.phones).toEqual([{name: 'Nexus S'},
                {name: 'Motorola DROID'}]);
        }); 

6. Templating Links & Images
Data
We have id and imageUrl in the JSON String.

Template
Just normal HTML template
                    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
                        <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
                        <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
                        <p>{{phone.snippet}}</p>
                    </li> 

Test
            input('query').enter('nexus');
            element('.phones li a').click();
            expect(browser().location().url()).toBe('/phones/nexus-s'); 

7. Routing & Multiple Views
Turn the index.html into layout template.

Application routes in Angular are declared via the $routeProvider, which is the provider of the $route service.

Multiple Views, Routing and Layout Template
It loads all the modules in app.js 
var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers'
]); 

And we have a routing like backboneJS
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }). 

Only defines the Controllers in controllers.js

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
  function($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
      $scope.phones = data;
    });

    $scope.orderProp = 'age';
  }]);

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
  function($scope, $routeParams) {
    $scope.phoneId = $routeParams.phoneId;
  }]); 

Layout Template
    <div ng-view></div> 

8. More Templating
Just add Detail controller, Detail template, Detail Data.


References:
http://code.angularjs.org/1.2.8/docs/tutorial/step_03
http://code.angularjs.org/1.2.8/docs/tutorial/step_05