您好,登錄后才能下訂單哦!
1、factory
用 Factory 就是創(chuàng)建一個對象,為它添加屬性,然后把這個對象返回出來。你把 service 傳進 controller 之后,在 controller 里這個對象里的屬性就可以通過 factory 使用了。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <script> angular.module('mod', []) //定義工廠模塊-factory .factory('fact', [function () { return { str:"testfactory", sum:function (n1,n2) { return n1+n2 } }; }]) //添加依賴注入模塊fact .controller('testCtrl', ['$scope','fact', function ($scope,fact) { alert(fact.str) }]) </script> </head> <body ng-app='mod' ng-controller='testCtrl'> </body> </html>
2、provide
Providers 是唯一一種你可以傳進 .config() 函數(shù)的 service。當你想要在 service 對象啟用之前,先進行模塊范圍的配置,那就應該用 provider。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <script> angular.module('mod', []) .controller('modCtrl', ['$scope','prod', function ($scope,prod) { alert(prod.a+prod.b) }]) .provider('prod', [function () { this.$get = [function() { return { a:12, b:15 }; }]; }]) </script> </head> <body ng-app='mod' ng-controller='modCtrl'> </body> </html>
3、service
Service 是用"new"關鍵字實例化的。因此,你應該給"this"添加屬性,然后 service 返回"this"。你把 service 傳進 controller 之后,在controller里 "this" 上的屬性就可以通過 service 來使用了。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <script> angular.module('mod', []) .service('serv', [function () { this.a=12 }]) .controller('modCtrl', ['$scope','serv', function ($scope,serv) { alert(serv.a) }]) </script> </head> <body ng-app='mod' ng-controller='modCtrl'> </body> </html>
4、constant與value
constant不可修飾
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <script> angular.module('mod', []) .constant('VERSION', '5.0.3') .value('name', 'cisco') .controller('modCtrl', ['$scope','VERSION','name', function ($scope,VERSION,name) { alert(name+':'+VERSION) }]) </script> </head> <body ng-app='mod' ng-controller='modCtrl'> </body> </html>
5、decorator
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <script> angular.module('mod', []) .constant('VERSION', '5.0.3') .value('name', 'cisco') .controller('modCtrl', ['$scope','VERSION','name','prod', function ($scope,VERSION,name,prod) { alert(name+' '+prod.nxos+''+prod.type+' '+prod.date+' '+VERSION) }]) .provider('prod', [function () { this.$get = [function() { return { nxos:'nxos', type:'5548' }; }]; }]) .decorator('prod',function ($delegate) { $delegate.date='2007.1.10' return $delegate }) </script> </head> <body ng-app='mod' ng-controller='modCtrl'> </body> </html>
6、route
需要http服務器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <!-- 引入angular-route文件 --> <script src="angular-route.min.js"></script> <script> //引入ngRoute模塊 angular.module('mod', ['ngRoute']) .controller('routeCtrl', ['$scope','$route', function ($scope,$route) { }]) .controller('gameCtrl', ['$scope', function ($scope) { $scope.name='cxiong' $scope.scope='9999' }]) //配置route的$routeProvider .config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/game', { templateUrl: 'game.html', controller:'gameCtrl' }) .when('/sport', { templateUrl: '../index.html' }) .when('/news', { templateUrl: '../style.html' }) }]) </script> </head> <body ng-app='mod' ng-controller='routeCtrl'> <a href="#/game">游戲競技</a> <a href="#/sport">勁爆體育</a> <a href="#/news">全球新聞</a> <ng-view></ng-view> </body> </html>
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。