学习笔记-AngularJs（七）
在学习笔记-AngularJs（六）提及了事件处理器和过滤器以及它们的例子，而我们知道之前我是使用$http服务去获得我们需要的json数据，但是$http是比较底层的用法，有时候我们想把获取json数据包装成一个服务，然后每个控制器只要直接依赖我们自己写的服务，就可以去获取需要的数据，那么就需要自定义服务，现在我们需要学习一下怎么定义自己的服务，于是我们在js中建了services.js，一不小心插入个链接，http://t.cn/RUbL4rP，忽略，代码如下：
var phoneService = angular.module('phoneService', ['ngResource']); phoneService.factory("People",function($resource){ //工程函数，自定义的服务尽量不要使用$,避免跟自带服务混淆 return $resource('json/:phoneId.json', {}, { query: {method:'GET', params:{phoneId:'phone'}, isArray:true} }); })
//工厂创建一个资源对象,让你与RESTful服务器端数据源交互。
这里建立模块phoneService，至于为啥要怎么建，之前有讲过了，这里需要注意的是，依赖了ngResource模块，而且必须在index.html引入angular-resource.js文件，那么就可以使用$resource服务了。建立服务，可以使用factory、service，这里使用的是factory。在这里就不得不讲一下这个$resource服务了，使用方法：
$resource(url, [paramDefaults], [actions], options);
url，指得是RESTful服务器端的地址，有这样的一些形式：
$resource('http://example.com/resource.json') //这里指向的是resource.json $resource('http://example.com/:id.json') //通过传一个id参数过来，去获取对应的json $resource('http://example.com/resource/:resource_id.:format')//通过传一个resource_id和format参数过来，去获取对应的格式的数据模型
paramDefaults，指得是默认参数，是一个对象，比如说：{resource_id:'1', salutation:'Hello'}，那么其实整个默认url就是'http://example.com/resource/resource_id/1?salutation=hello'，当参数{someParam: '@someProp'}是以@为前缀,那么这个参数的值将从相应的属性中提取data对象(调用一个操作方法时提供)。例如,如果defaultParam对象是{ someParam:@someProp }然后someParam将data.someProp的value。对于这个带@前缀的值，不大清楚是怎么回事，望知道的人告知一下！
action，可以自定义获取资源的行为，其语法如下：
{action1: {method:?, params:?, isArray:?, headers:?, ...},
action2: {method:?, params:?, isArray:?, headers:?, ...},
...}
其对应的参数，还有url（资源路径的重写）、timeout（请求超时）、responseType（请求数据类型）、function（data）{...}的Response函数，等等（更多属性可去官方文档看）！
比如说我们重新自定义query请求资源的行为：query: {method:'GET', params:{phoneId:'phone'}, isArray:true}，那么调用该方法，就能获得phone.josn的数据。
也有这些默认的行为（其属性是与自定义资源行为的action是一样的）：
{ 'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
假如现在有怎么一个需求，需要我们在控制器文件中检索出phone.json中userId=123的一条数据，可以这样写：
//services.js（自定义服务文件）
phoneService.factory("People",function($resource){ return $resource('/user/:userId', {userId:'@id'}); })
//controller.js（控制器文件）
var user = People.get({userId:123}, function() {
user.abc = true;
user.$save();
});这里是这样的，获得userId=123的某个对象，然后在其回调函数将其user.abc进行修改，然后使用$save保存，然后再返回新的记录，赋给user，user是我们得到的资源对象实例，那么操作保存,删除,删除可用方法$+对应资源行为（eg:$save()）方法。这样就可以轻松地支持CRUD操作(创建、读取、更新、删除)在服务器端数据！想更好理解这种形式的curd，可以看一下这个官方的例子：
// Define CreditCard class var CreditCard = $resource('/user/:userId/card/:cardId', {userId:123, cardId:'@id'}, { charge: {method:'POST', params:{charge:true}} }); // We can retrieve a collection from the server var cards = CreditCard.query(function() { // GET: /user/123/card // server returns: [ {id:456, number:'1234', name:'Smith'} ]; var card = cards[0]; // each item is an instance of CreditCard expect(card instanceof CreditCard).toEqual(true); card.name = "J. Smith"; // non GET methods are mapped onto the instances card.$save(); // POST: /user/123/card/456 {id:456, number:'1234', name:'J. Smith'} // server returns: {id:456, number:'1234', name: 'J. Smith'}; // our custom method is mapped as well. card.$charge({amount:9.99}); // POST: /user/123/card/456?amount=9.99&charge=true {id:456, number:'1234', name:'J. Smith'} }); // we can create an instance as well var newCard = new CreditCard({number:'0123'}); newCard.name = "Mike Smith"; newCard.$save(); // POST: /user/123/card {number:'0123', name:'Mike Smith'} // server returns: {id:789, number:'0123', name: 'Mike Smith'}; expect(newCard.id).toEqual(789);
好了，来看一下controller.js文件：
var phoneController = angular.module('phoneController', []); phoneController.controller("phone-list-controller",['$scope','People',function($scope,People){ $scope.phones = People.query(); //重写的资源行为 $scope.order = 'name'; }]); phoneController.controller("phone-detail-controller",["$scope",'$routeParams',"People","$location",function($scope,$routeParams,People,$location){ if($routeParams.phoneId){
//使用默认资源行为 $scope.people = People.get({phoneId: $routeParams.phoneId}, function(data) { $scope.main_image = data.images[0]; }); }else{ $location.path("/phones"); } $scope.setImage=function(url){ $scope.main_image = url; } /*$location使用*/ console.log($location.absUrl()); //"http://example.com/#/some/path?foo=bar&baz=xoxo" => 完整url console.log($location.url()); // "/some/path?foo=bar&baz=xoxo" => url的search部分 console.log($location.protocol()); // "http" =>协议 console.log($location.host()); // "example.com" => 主机 console.log($location.port()); // "80" =>端口号 //console.log($location.path([path])); // "/some/path" => 跳转至指定路由 console.log($location.search()); //{foo: 'bar', baz: 'xoxo'} => 以对象形式展现，还可以$location.search("foo","yahoo");进行修改 console.log($location.hash()); // given url http://example.com/#/some/path?foo=bar&baz=xoxo#hashValue $location.hash() == "hashValue" //更详细的介绍可以去看官方文档 }]);
上面有着$loaciton服务的一些补充！那么学习的项目就这样搞定了，但是就只是入门而已，接下来需要好好阅读angularJs的官方文档，真正想搞懂，还是得去看文档！虽然是英文渣渣，但是确实必经之路！加油！源码下载：https://github.com/xiaobin5201314/AngularJS-Learning.git
