AngularJS(3)PhoneCat Demo Advance


Test
element('.phone-thumbs li:nth-child(3) img').click();
? ? ? ? expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.2.jpg’);

Click on the sub element of li and verify the IMG src value.

11. REST and Custom Services
Template
Import the REST client?
? <script src="js/controllers.js"></script>
And put all my model codes in services.js
? <script src="js/services.js"></script>?

Service
Here is how we build the service layer, we use factory to create a service instance.

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

phonecatServices.factory('Phone', ['$resource',
? function($resource){
??? return $resource('phones/:phoneId.json', {}, {
????? query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
??? });
? }]);?

Controller
Leave the lower layer $http, deal with the service object Phone, fetch all the data from there.

$resource is higher than $http, and we use $resource to build the REST client, we create service layer here.

12. Applying Animations
It is powerful and great, but I will not use it right now.

More examples are here?
http://code.angularjs.org/1.2.8/docs/cookbook/index

Guide book is here
http://code.angularjs.org/1.2.8/docs/guide/index

References:
http://code.angularjs.org/1.2.8/docs/tutorial/step_09
http://code.angularjs.org/1.2.8/docs/tutorial/step_11

http://code.angularjs.org/1.2.8/docs/guide/index
http://code.angularjs.org/1.2.8/docs/cookbook/index


?