2016-09-23 43 views
1

我有一個角度的應用程序,我們有4個不同的頁面。每個頁面都有自己的控制器。有一個擁有哪些路由到每個頁面及其控制器使用2個不同的控制器之間的通信

when('/a',{ 
      templateUrl: './components/a.html', 
      controller:'aCtrl' 
    }). 
when('/b',{ 
      templateUrl: './components/b.html', 
      controller:'bCtrl' 
    }). 
when('/c',{ 
      templateUrl: './components/c.html', 
      controller:'cCtrl' 
    }). 
when('/d',{ 
      templateUrl: './components/d.html', 
      controller:'dCtrl' 
    }). 
when('/home',{ 
      templateUrl: './components/Home.html', 
      controller:homeCtrl' 
}). 

現在我想分享一些數據,或者這些控制器/頁之間的一些常見功能的控制器的主頁。我們應該怎麼做?我GOOGLE了它,他們說使用SERVICE。但我不知道我需要在哪個控制器中編寫該服務。任何人都可以爲此提供一個很好的例子。

回答

2

在AngularJS中的服務沒有被寫入之內的控制器。它直接綁定到您的應用程序,並可以在應用程序中的任何位置使用。這就是爲什麼服務是AngularJS控制器之間推薦的通信方式。

你需要做的是寫像這樣一個服務:

angular.module('yourApp').service('serviceName', function() {....});

在服務,您可以:

  • 從API終點獲取數據(可以使用$http供應商爲此)
  • 定義常量數據(您可以使用Angular的constant供應商爲此)
  • 定義一些代碼,需要一些數據和操作,並返回新的數據
  • 其他幾乎任何你想用你的數據

現在做的,包括服務於您的控制器像這樣的依賴:

angular.module('yourApp').controller('yourController', function (serviceName) { 
    console.log(serviceName.getData()); 
    // Do something with your data 
}); 

現在在此控制器中,您可以訪問該服務已返回的數據。當然,同樣的服務可以注入多個控制器,從而可以在控制器之間共享數據。

+0

好的。我添加了一個sServ.js,它有angular.module('myApp')。service('sServ',['$ resource','$ scope','usSpinnerService',function($ resource,$ scope,usSpinnerService){ $ scope.test = function(){}}]);現在在我的controller1中,var app = angular.module('GMod',['ivh.treeview','angularSpinner']); geoOccApp.controller('gModCtrl',['sServ',\t function(sServ){//我怎麼能調用routeChangeStart或startSpin或任何其他功能}]);它給我一個錯誤 – user1015388

+0

'startSpin'存在於哪裏?如果您想在服務中調用某些內容,則需要先將其定義爲服務主體內的this.startSpin,然後將其用作控制器內的「sServ.startSpin」。 – nikjohn

+0

startSpin存在於服務的「服務」 – user1015388

0

達斯汀有正確的做法。然而,有時候你可以使用不同的方法,也就是將應用程序包裝到AppController中。

現在可以訪問AppController中的所有內容。您可以使用這種方法來放置您希望應用程序的子控制器有權訪問的函數或常量,而無需在任何地方注入服務。

<body ng-controller="AppController"> 
    <div ng-view></div> 
</body> 
1

有很多方法可以共享數據。

  1. 事件
  2. 服務
  3. $ rootScope

服務提供給我們在我們的應用程序共享數據和功能的簡單方法。我們創建的服務是可以注入到控制器和其他服務中的單例,使它們成爲編寫可重用代碼的理想場所。

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

app.controller('leftCtrl', function ($scope,userService) { 
left.btnClicked = function (object) { 
    userService.saveData(object); 
} 
}); 

app.controller('rightCtrl', function ($scope, userService) { 
$scope.getData = userService.getData(); 
}); 

app.service('userService', function() { 
    var data = {}; 
    this.saveData = function(object){ 
    data = object; 
} 

this.getData = function(){ 
return data; 
} 
});