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'
    }
})