<!--AngularJS服务 AngularJS中的服务指的是一些函数或对象,它们可以在整个应用中持有某些行为和状态。每一个服务都只有一个实例,无论从应用中何处访问该服务, 指向的都是同一个对象。AngularJS中的服务有许多功能,比如不断重复的行为、共享状态、缓存‘工厂类等。 常见的AngularJS服务 $window $location $http用于创建XHR从应用中向服务器发送请求。通过$http服务,我们可以发送get和post请求,设置头信息(header) 和缓存,还能处理服务器的回复(response)或者错误信息 $location服务 让用户可以与浏览器地址栏中的URL进行交互,或者操作它的值 提供一下函数来操作URL absUrl 这是一个get函数,返回地址栏中的URL(调用$location.absUrl()) url 既是get函数,也是set函数,用于操作URL。如果传一个参数,那么它会设置URL,如果没有参数,它会返回URL字符串 path 兼有get和set功能,用于操作URL路径。会自动在开头加上'/'.因此调用$location.path()可以返回当前应用的路径,而$location.path("/new") 则将路径设置为/new search 设置或获取当前URL的查询字符串无参的$location.search()以对象形式返回查询字符串。$location.search("test")则删除了test参数及 其对应的值,而$location("test","abc")则将teat参数的值设置成abc --> <!--当我们属于控制器时,其实例在应用进行页面迁移的时候会经历创建/销毁的过程。一个控制器不能直接和另一个控制器进行交流并共享状态或者行为。--> <!--<html ng-app="notesApp">--> <!--<head><title>Notes App</title>--> <!--</head>--> <!--<body ng-controller="MainCtrl as mainCtrl">--> <!--<h1>Hello Controllers!</h1>--> <!--<button ng-click="mainCtrl.open('first')">Open First</button>--> <!--<button ng-click="mainCtrl.open('second')">Open Second</button>--> <!--<div ng-switch on="mainCtrl.tab">--> <!--<div ng-switch-when="first">--> <!--<div ng-controller="SubCtrl as ctrl">--> <!--<h3>First tab</h3>--> <!--<ul>--> <!--<li ng-repeat="item in ctrl.list">--> <!--<span ng-bind="item.label"></span>--> <!--</li>--> <!--</ul>--> <!--<button ng-click="ctrl.add()">Add More Items</button>--> <!--</div>--> <!--</div>--> <!--<div ng-switch-when="second">--> <!--<div ng-controller="SubCtrl as ctrl">--> <!--<h3>Secund tab</h3>--> <!--<ul>--> <!--<li ng-repeat="item in ctrl.list">--> <!--<span ng-bind="item.label"></span>--> <!--</li>--> <!--</ul>--> <!--<button ng-click="ctrl.add()">Add More Items</button>--> <!--</div>--> <!--</div>--> <!--</div>--> <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>--> <!--<script type="text/javascript">--> <!--angular.module('notesApp',[])--> <!--.controller('MainCtrl',[function () {--> <!--var self=this;--> <!--self.tab='first';--> <!--self.open=function (tab) {--> <!--self.tab=tab;--> <!--}--> <!--}])--> <!--.controller('SubCtrl',function () {--> <!--var self=this;--> <!--self.list=[--> <!--{id:1,label:'Item 0'},--> <!--{id:2,label:'Item 1'}--> <!--];--> <!--self.add=function () {--> <!--self.list.push({--> <!--id:self.list.length+1,--> <!--label:'item'+self.list.length--> <!--});--> <!--}--> <!--})--> <!--</script>--> <!--</body>--> <!--</html>--> <!--AnhularJS中的依赖注入(Dependency Injection) 依赖注入在服务器端的应用更为广泛,它能够增强代码的重用性’模块化和可测试性。 --> <!--使用AngularJS的内置服务 --> <!--<html ng-app="notesApp">--> <!--<head><title>Notes App</title>--> <!--</head>--> <!--<body ng-controller="MainCtrl as mainCtrl">--> <!--<h1>Hello Services!</h1>--> <!--<button ng-click="mainCtrl.logStuff()">Log something</button>--> <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>--> <!--<script type="text/javascript">--> <!--angular.module('notesApp',[])--> <!--.controller('MainCtrl',['$location',function ($location) { 依赖注入--> <!--var self=this;--> <!--self.logStuff=function () {--> <!--console.log($location.absUrl());--> <!--}--> <!--}])--> <!--</script>--> <!--</body>--> <!--</html>--> <!--创建自定义AngularJS服务 在定义服务的函数中,需要将一个对象作为返回值,这些函数会成为服务中的API。 当应用和SubCtrl加载完毕并且AngularJS需要调用到ItemService的实例时,ItemService就会被实例化,这也是唯一的一次。一旦这个实例被创建出来之后,其他 控制器想调用ItenService时所获得的实例都将会是同一个,也就是初始化时创建出来的那个。这也就是为什么两个标签页显示的列表是一模一样的。 使用angular.module().factory函数来定义服务名称和它所需的依赖 将内部状态作为局部变量保存在服务器内,这一点非常重要,因为单页面应用中控制器会被反复创建和销毁,无法共享这些状态,此时服务就能实现应用级别的存储功能 服务的初始化是懒汉模式的,当控制器、服务或者指令首次请求到该服务时,它才会被建立出来。 服务的定义函数只会被调用一次,它的实例会被存储起来,任何对于该服务的调用都会得到同一个实例,它是单例模式的。 --> <html ng-app="notesApp"> <body ng-controller="MainCtrl as mainCtrl"> <h1>Hello Controllers!</h1> <button ng-click="mainCtrl.open('first')">Open First</button> <button ng-click="mainCtrl.open('second')">Open Second</button> <div ng-switch on="mainCtrl.tab"> <div ng-switch-when="first"> <div ng-controller="SubCtrl as ctrl"> <h3>First Tab</h3> <ul> <li ng-repeat="item in ctrl.list()"> <span ng-bind="item.label"></span> </li> </ul> <button ng-click="ctrl.add()">Add more Items</button> </div> </div> <div ng-switch-when="second"> <div ng-controller="SubCtrl as ctrl"> <h3>Second Tab</h3> <ul> <li ng-repeat="item in ctrl.list()"> <span ng-bind="item.label"></span> </li> </ul> <button ng-click="ctrl.add()">Add more Items</button> </div> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script> <script type="text/javascript"> //使用factory定义服务 angular.module('notesApp',[]) .controller('MainCtrl',[function () { var self=this; self.tab='first'; self.open=function (tab) { self.tab=tab; }; }]) .controller('SubCtrl',['ItemService',function (ItemService) { var self=this; self.list=function () { return ItemService.list(); }; self.add=function () { ItemService.add({ id:self.list().length+1, label:'Item '+self.list().length }); } }]) .factory('ItemService',[function () { var items=[ {id:1,label:'Item 0'}, {id:2,label:'Item 1'} ]; return{ list:function () { return items; }, add:function (item) { items.push(item); } }; }]); //使用service()函数来写服务 //该服务的定义函数是一个JS类函数,它根本没有返回值 function ItemService() { var items=[ {id:1,label:'Item 0'}, {id:2,label:'Item 1'} ]; this.list=function () { return items; }, this.add=function (item) { items.push(item); }; } angular.module('notesApp',[]) .service('ItemService',[ItemService]) .controller('MainCtrl',[function () { var self=this; self.tab='first'; self.open=function (tab) { self.tab=tab; }; }]) .controller('SubCtrl',['ItemService',function (ItemService) { var self=this; self.list=function () { return ItemService.list(); }; self.add=function () { ItemService.add({ id:self.list().length+1, label:'Item '+self.list().length }); } }]); //使用provider函数定义服务 当我们需要在应用加载之前对服务进行某些配置时,它会变得格外有用。 //provider的语法和factory及service都不同,它不需要数组作为第二个参数,因为它不能依赖于任何其他服务。 function ItemService(opt_items) { var items=opt_items || []; this.list=function () { return items; }, this.add=function (item) { items.push(item); }; } angular.module('notesApp',[]) .provider('ItemService',function () { var haveDefaultItems=true; this.disableDefaultItems=function () { haveDefaultItems=true; }; //用于获取一来模块的将是下列函数,而不是上面的提供器 this.$get=[function () { var optItems=[]; if(haveDefaultItems){ optItems=[ {id:1,label:'Item 0'}, {id:2,label:'Item 1'} ]; } return new ItemService(optItems); }]; }) .config(['ItemServiceProvider', function (ItemServiceProvider) { var shouldHaveDefaults=false; if(!shouldHaveDefaults){ ItemServiceProvider.disableDefaultItems(); } }] ) .controller('MainCtrl',[function () { var self=this; self.tab='first'; self.open=function (tab) { self.tab=tab; }; }]) .controller('SubCtrl',['ItemService',function (ItemService) { var self=this; self.list=function () { return ItemService.list(); }; self.add=function () { ItemService.add({ id:self.list().length+1, label:'Item '+self.list().length }); } }]); </script> </body> </html>
转载于:https://my.oschina.net/u/3161974/blog/1305762