angularJs服务与依赖注入

服务就是AngularJs框架中用于定义通用功能的地方。它在功能上类似于jQuery的extend,但是使用方法上完全不同。

1. 在app.run中使用AngularJs提供的$location服务。

2. 在app.run中使用Angularjs提供的$http服务。

3. 使用app.server或app.factory向Angularjs注册服务，并在app.run里通过依赖注入的方式使用它。搞清楚“服务的工厂函数”、“服务对象”和“依赖注入”之间的关系。

一个简单的http get请求

比如一个json对象 data.json {'message':'hello world'}

var app = angular.modular('s.app',[]);
app.run(function($http, $rootScope) {
    $http.get('data.json')
         .success(function(data) {
            console.log(data)
         })
         .error(function(){
            console.log(data);
         })
})

一个标准http用法

$http({
    url: 'data.json',
    method: 'get',
    data: {
        id: 'box'
    }
}).success(function(data){
      console.log(data)    
  })
  .error(function(data){
      console.log(data)
  })

自定义服务

两个参数，第一个参数是：服务的名字
          第二个参数是：服务的构造器
app.service('DemoServive', function() {
    this.message = 'hello world'
})
在依赖注入的时候，输入服务的名字，就能拿到‘服务对象’，服务对象其实就是用我们给的构造器创建出来的。
app.run(function(DemoService, $rootScope) {
    $rootScope.data = {
        message: DemoService.message
    }
})

实现一个简易路由

就是如同锚链接一样，只改变地址栏的变化，网页不刷新。

var app = angular.module('s.app', []);
app.run(function($location, $rootScope) {
    console.log($location.path()); //输出的就是地址栏#后边的东西 
})

监听hash值的变化

var app = angular.module('s.app', []);
app.run(function($location, $rootScope) {
    $rootScope.location = $location;

    //在$rootScope上，执行location.path()求得一个值，当这个哈数求得的值变化时，就执行我们的回调函数
    $rootScope.$watch('location.path()',funcion(){
        var hash = $location.path();
        // 当hash发生改变时，更改存储下来的页面状态
        switch(hash) {
            case '/a':
                data.state = 'a';
                break;
             case '/b':
                data.state = 'b';
                break;
             case '/c':
                data.state = 'c';
                break;
        }
    
        switch(data.state){
             case 'a':
                data.msg = 'a';
                break;
             case 'b':
                data.msg = 'b';
                break;
             case 'c':
                data.msg = 'c';
                break;
        }
    })
})

自制路由服务

步骤：

1. 创建一个新的模块，用于存放我们的服务。
2. 我们的额服务允许用户对路由进行配置，用户 传入路由配置，我们再去监听hash的变化。
3. 当hash变化时，我们对比当前的hash和用户配置的url，决定哪个状态被激活，然后再执行这个状态自带的callback函数来更新界面。
4. 使用时，记得在声明app模块时候去依赖router模块。
5. 依赖注入这个创建的服务。，调用config函数对路由做配置。
6. 这个时候就可以点击链接查看效果。

服务的工厂函数

第一个参数是：服务的名字
第二个参数是：服务的工厂函数
app.factory('DemoService', function() {
    //服务的工厂函数的返回值。才是服务对象
    
    return {
        msg: 'this is factory'
    }
})