学习笔记-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