AngularJS 註冊服務
AngularJS的後台控制可以在Controller裡面實現. 可是如果所有的邏輯代碼都寫到Controller會顯得該Controller過於臃腫. 不方便維護, AngularJS提供了一個可以依賴注入的方法。我們可以將邏輯處理封裝到Service中,需要調用只需要引入對應的Service即可.
Angular 提供了3種方法來建立並註冊我們自己的 service.
1.Factory
2.Service
3.Provider
一. Factory:
1. 下面構建了一個MyFactory, 用於設定個人資訊，並展示個人資訊。
Note: 1. 必須在裡面調用return 否則會報錯
2. 所有的可訪問的方法都放到了Service裡面
app.factory('MyFactory',function(){
var service = {};
var _name = '';
var _age = '';
service.SetInfo = function(name,age){
_name = name;
_age = age;
}
service.ShowInfo = function(){
return _name+':'+_age;
}
return service;
});
2. 可以將通過function(MyFactory)中將服務註冊到Controller中. 控制台就會列印出Frank:23
var app = angular.module('myapp')
app.controller('InjectCtrl',function ($scope,MyFactory) {
MyFactory.SetInfo('Frank',23);
console.log(MyFactory.ShowInfo());
});
二. Service
1. Service與Factory用法差不多,區別在於不需要Return一個對象.
var app = angular.module('myapp')
app.controller('InjectCtrl',function ($scope,MyService) {
MyService.SetInfo('Frank',23);
console.log(MyService.ShowInfo())
});
app.service('MyService', function(){
var _name = '';
var _age = '';
this.SetInfo = function(name,age){
_name = name;
_age = age;
}
this.ShowInfo = function(){
return _name+':'+_age;
}
});
三. Provider:
1. Provider: 通過#Get方法實現資料的返回.
app.provider('MyProvider',function(){
var service = {};
var _name = '';
var _age = '';
service.SetInfo = function(name,age){
_name = name;
_age = age;
}
service.ShowInfo = function(){
return _name+':'+_age;
}
this.$get = function(){
return service;
}
});
AngularJS 自訂指令
在前端開發中, 我們會遇到很多地方都會用到同一種類型的控制項。AngularJS提供了自訂指令功能，我們可以在指令裡面定義特定的html模板。提供給前台html調用.
一. 指令的簡單定義.
下面定義了一個簡單的控制項，點擊後調轉到部落格園。
Note: 1.命名方式:directive必須以小寫字母開頭，其中如果後面由大寫字母，html調用的時候就要用 - 將單詞分開.
<html>
<script src='angular.js'></script>
<script type="text/javascript">
angular.module('myapp',[])
.directive('myCnblogs',function(){
return {
restrict: 'E',
replace: false,
template:'<a href="http://www.cnblogs.com/">Go to cnblogs</a>'
}
})
</script>
<head>
<title></title>
<div ng-app='myapp'>
<my-Cnblogs></my-Cnblogs>
</div>
</head>
<body>
</body>
</html>
二.指令元素介紹:
2.1 restrict
常用的restrict有E,A,C三種設定。這些設定可以混用,比如EA,AC。不需要符號隔開
E(Element)：元素,使用格式是<my-directive></my-directive>
A(Propertity): 屬性，使用格式:<div my-directive></div>
C(Class): 類, 使用格式:<div class='my-directive'></div>
2.2 repleace
下面是Replace分別設定false和True的效果
2.3 termplate:
template 是設定對應的html模板, 如果有html換行那就要在每一句末尾加上 / 符號. 如果html代碼較多，可以通過設定templateurl: urlpath，來載入對應當的代碼模板
三. 向指令內部添加資料
3.1 下面通過設定scope簡單的實現了資料的綁定.
<!DOCTYPE html>
<html>
<script src='angular.js'></script>
<script type="text/javascript">
angular.module('myapp',[])
.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
scope:{
myurl:"@",
mycontent:"@"
},
template: '<a href="{{myurl}}">{{mycontent}}</a>'
};
});
</script>
<head>
<title></title>
<div ng-app='myapp'>
<div my-Directive myurl='http://www.cnblogs.com/' mycontent='go to blogs'></div>
</div>
</head>
<body>
</body>
</html>
3.2 深入理解自訂控制項scope的綁定
自訂控制項綁定$scope分為 @，=，& 三種情況。個人認為@:單向綁定，=：雙向繫結，&: 用於綁定函數，下面看看Angularjs權威指南的介紹
@ 本地範圍屬性：使用@符號將本地範圍同DOM屬性的值進行綁定。
= 雙向繫結：通過=可以將本地範圍上的屬性同父級範圍上的屬性進行雙向的資料繫結。 就像普通的資料繫結一樣，區域屬性會反映出父資料模型中所發生的改變
& 父級範圍綁定 通過&符號可以對父級範圍進行綁定，以便在其中運行函數。意味著對這個值進行設定時會產生一個指向父級範圍的封裝函數.
下面的demo實現了對三種情況的綁定.
<!DOCTYPE html>
<html>
<script src='angular.js'></script>
<script type="text/javascript">
angular.module("myApp", [])
.directive("myDir", function() {
return {
restrict: "A",
scope: {
name: "@",
desc: "=",
show: "&"
},
template:
"<div>" +
" <input type='text' ng-model='name' />: <input ng-model='desc' />" +
" <button ng-click='show()'>show</button>" +
"</div>",
replace: true,
link: function (scope, element, attrs) {
console.log("initial value for name:" + scope.name);
console.log("initial value for description:" + scope.amount);
scope.$watch("desc", function (newVal, oldVal) {
console.log("desc has changed " + oldVal + " >> " + newVal);
});
scope.$watch("name", function (newVal, oldVal) {
console.log("name has changed " + oldVal + " >> " + newVal);
});
}
}
})
.controller("myCtrl", function($scope) {
$scope.customerName = "Frank";
$scope.content = 'Learning Angular';
$scope.show = function(source) {
alert(source);
};
})
</script>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h3>普通的Angular</h3>
<input type="text" ng-model='customerName'>: <input ng-model="content" />
<button ng-click="show('普通函數')">show</button>
<h3>自訂指令</h3>
<div my-dir
name="{{customerName}}"
desc="content"
show="show('自訂指令綁定函數')">
</div>
</body>
</html>
下面是效果圖:
四. 總結:
本篇章介紹了自訂指令的簡單實用. 可以通過自訂指令封裝很多特定功能的html模板，供頁面調用。 大家可以試一試將上面demo的 & 修改為 @或者=，經測試修改為@符號，自訂指令的show方法是無法執行的。如果修改為=號就很有意思了。點擊上面的btn，會執行兩次show方法。 然後修改任何一個input，下面的show方法都會被執行。如果有博友知道是什麼原因也請線上回複一下。這個原理實在不清楚是什麼原因。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
