<!--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
2652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
