一，factory,service,provider自訂服務，services.js
| 代碼如下 |
複製代碼 |
'use strict'; /* Services */ var phonecatServices = angular.module('phonecatServices', []); phonecatServices.factory('facetorytest', ['$window', //factory方式
function($window){
var test = {
firstname:"tank",
lastname:function(){
return "zhang";
}
};
$window.alert('aaaa'); //內建服務可以注入
return test;
}
]); phonecatServices.service('servicetest', ['$window', //service方式
function($window){
$window.alert('bbbb'); //內建服務可以注入
this.firstname = "tank";
this.lastname = function(){
return "zhang";
}
}
]); phonecatServices.provider('providertest',[ //provider方式，內建服務不可以注入
function(){
this.test = {
"firstname":"tank",
"lastname":"zhang"
}
this.$get = function () {
return this.test;
};
}
]); |
二，controller調用自訂模組，controllers.js
| 代碼如下 |
複製代碼 |
'use strict'; /* Controllers */ var phonecatControllers = angular.module('phonecatControllers', []); //寫過js function的對這種調用方式，很熟悉，服務名稱不能變
function TestCtrl($scope,facetorytest,servicetest,providertest) {
$scope.facetorytest = facetorytest.firstname+" "+facetorytest.lastname();
$scope.servicetest = servicetest.firstname+" "+servicetest.lastname();
$scope.providertest = providertest.firstname+" "+providertest.lastname;
} //這種調用方式根jquery非常的像，服務名稱也不能變
phonecatControllers.controller('TestCtrl',function($scope,facetorytest,servicetest,providertest) {
$scope.facetorytest = facetorytest.firstname+" "+facetorytest.lastname();
$scope.servicetest = servicetest.firstname+" "+servicetest.lastname();
$scope.providertest = providertest.firstname+" "+providertest.lastname;
}); //以注入的方式來調用，服務名稱可以改變
phonecatControllers.controller('TestCtrl',['$scope',"facetorytest","servicetest","providertest",
function($scope,facetory111,service111,provider111) { //自訂,服務名稱
$scope.facetorytest = facetory111.firstname+" "+facetory111.lastname();
$scope.servicetest = service111.firstname+" "+service111.lastname();
$scope.providertest = provider111.firstname+" "+provider111.lastname;
}
]);www.111cn.net |
三，建立app把上面的service和controller接合到一起。app.js
| 代碼如下 |
複製代碼 |
'use strict'; /* App Module */ var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers', //上面定義的controller
'phonecatServices' //上面自訂的服務
]); |
四，html中顯示
| 代碼如下 |
複製代碼 |
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body > <div ng-controller="TestCtrl">
<p>{{facetorytest}}</p>
<p>{{servicetest}}</p>
<p>{{providertest}}</p>
</div> </body>
</html> 顯示結果： tank zhang
tank zhang
tank zhang |
五，錯誤校正
在網上看到，有人說service是不能注入內建伺服器的，但是實際操作結果是provider是不能注入內建服務的。我用的angularjs的版本是AngularJS v1.2.14
| 代碼如下 |
複製代碼 |
phonecatServices.provider('providertest',['$window',
function($window){
$window.alert('cccc'); //報錯
this.test = {
"firstname":"tank",
"lastname":"zhang"
}
this.$get = function () {
return this.test;
};
}
]); |
