【AngularJS: Up & Running】第05章_AngularJS服务揭秘
1 AngularJS服务概念:
AngularJS的服务:
服务的功能:
2 页面迁移时的销毁与重建HTML: <!DOCTYPE html>
<html ng-app="notesApp">
<head>
<script type="text/javascript" src="../lib/angular.js"></script>
<script type="text/javascript" src="js/01_app.js"></script>
</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>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>
</body>
</html>
JS: /** * Created by Relish on 2016/9/26. */
var app = angular.module('notesApp',[]);
app.controller('MainCtrl',function () {
var self = this;
self.tab = 'first';
self.open = function (tab) {
self.tab = tab;
};
});
app.controller('SubCtrl',function () {
var self = this;
self.tab = 'second';
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
});
};
});
销毁与重建的体现:
3 服务与控制器
4 AngularJS中的依赖注入(Dependency Injection)依赖注入的优点:
4.1 对比4.1.1 非依赖注入方式function fetchDashboardData(){
var $http = new HttpService();
return $http.get('my/url');
}
4.1.2 依赖注入方式function fetchDashboardData($http){
return $http.get('my/url');
}
5 举例($log)<html ng-app="notesApp">
<body ng-controller="MainCtrl as mainCtrl">
<h1>Hello Services!</h1>
<button ng-click="mainCtrl.logStuff()">Log something</button>
<script src="../lib/angular.js"> </script>
<script type="text/javascript"> angular.module('notesApp',[]) .controller('MainCtrl',['$log',function ($log) { var self = this; self.logStuff = function () { $log.log('The button was pressed'); }; }]) </script>
</body>
</html>
安全的依赖注入: 6 注入顺序一一对应 7 判断何时使用服务
8 创建简单的自定义AngularJS服务HTML: <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="../lib/angular.js"> </script>
<script src="js/03_app.js"></script>
</body>
</html>
JS: /** * Created by Relish on 2016/9/26. */
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
});
};
}])
//通过angular.moudle.factory创建服务。
.factory('ItemService',[function () {
var items = [
{id: 1,label: 'Item 1'}
];
return {
list: function () {
return items;
},add: function (item) {
items.push(item);
}
};
}]);
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |