AngularJS(2)PhoneCat Demo Basic
??????????? 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="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
