一．a(chǎn)ngularJs
AngularJS簡(jiǎn)化應(yīng)用開發(fā)的一個(gè)重要方法是，將一個(gè)些通用的低級(jí)開發(fā)操作包裝起來(lái)提供給開發(fā)者。AngularJS會(huì)自動(dòng)處理好這些低級(jí)操作。它們包括：
1.DOM操作
2.設(shè)置事件的監(jiān)聽
3.輸入驗(yàn)證，因?yàn)锳ngularJS會(huì)處理大部分這些操作，所以開發(fā)者就能更多的專注在應(yīng)用的業(yè)務(wù)邏輯上，更少地編寫那些重復(fù)性的、易錯(cuò)的、低級(jí)的代碼。
二. angularJs依賴注入機(jī)制
服務(wù)的聲明方式factory、 service 和 provider
1.$provide.provide(‘name’,function());
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
2.factory(‘name’,function);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
});
3.service(‘name’,function);
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
provider 的特殊之處就是可以在 module 啟動(dòng)時(shí)進(jìn)行配置(config方法)， 從而達(dá)到特殊的用途， 比如在上面的 provider 中可以添加一個(gè)init方法， 可以在啟動(dòng)時(shí)調(diào)用這個(gè)方法， 進(jìn)行一些額外的初始化工作
控制器controller的定義
4.controller(‘name’,function);
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
圖1. AngularJs的api模型
(1) 為什么需要依賴注入？
Class A{
Public void work_a(){
}
}
Class B{
Private A a=new A();
Public void work_b(){
a.work_a();
}
}
當(dāng)修改A，比如修改A的類名，會(huì)要修改B;違背兩個(gè)獨(dú)立的單元，高內(nèi)聚低耦合的原則；
B中的new A 是主要原因；
通過(guò)工廠來(lái)new A;
通過(guò)容器來(lái)存放管理A的示例；
通過(guò)注入來(lái)組合關(guān)聯(lián)每個(gè)單元；
(2) Angular的依賴注入機(jī)制
圖2. angularJs的內(nèi)存模型
三. angularJs寫法建議
一個(gè)最簡(jiǎn)單的模塊由兩類代碼塊集合組成的：
配置代碼塊 - 在注入提供者注入和配置階段執(zhí)行。只有注入提供者和常量可以被注入到配置塊中。這是為了防止服務(wù)在被配置好之前就被提前初始化。
運(yùn)行代碼塊 - 在注入器被創(chuàng)建后執(zhí)行，被用來(lái)啟動(dòng)應(yīng)用的。只有實(shí)例和常量能被注入到運(yùn)行塊中。這是為了防止在運(yùn)行后還出現(xiàn)對(duì)系統(tǒng)的配置。
代碼實(shí)現(xiàn)：
angular.module('myModule', []).
config(function(injectables) { // provider-injector 配置代碼塊
// This is an example of config block.
// You can have as many of these as you want.
// You can only inject Providers (not instances)
// into the config blocks.
}). run(function(injectables) { // instance-injector 運(yùn)行代碼塊
// This is an example of a run block.
// You can have as many of these as you want.
// You can only inject instances (not Providers)
// into the run blocks
});
模塊還有一些配置的簡(jiǎn)便方法，使用它們的效果等同于使用代碼塊。舉個(gè)例子：
angular.module('myModule', []).
value('a', 123).
factory('a', function() { return 123; }).
directive('directiveName', ...).
filter('filterName', ...);
// is same as
angular.module('myModule', []).
config(function($provide, $compileProvider, $filterProvider) {
$provide.value('a', 123)
$provide.factory('a', function() { return 123; })
$compileProvider.directive('directiveName', ...).
$filterProvider.register('filterName', ...);
});
配置塊會(huì)按照$provide, $compileProvider, $filterProvider，注冊(cè)的順序，依次被應(yīng)用。唯一的例外是對(duì)常量的定義，它們應(yīng)該始終放在配置塊的開始處。
<!doctype html>
<html ng-app="xmpl">
<head>
<script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="XmplController">
{{ greeting }}!
</div>
</body>
</html>
script.js:
angular.module('xmpl.service', []). //服務(wù)模塊
value('greeter', { //自定義greeter對(duì)象
salutation: 'Hello',
localize: function(localization) {
this.salutation = localization.salutation;
},
greet: function(name) {
return this.salutation + ' ' + name + '!';
}
}).
value('user', { //自定義user對(duì)象
load: function(name) {
this.name = name;
}
});
angular.module('xmpl.directive', []); //指令模塊
angular.module('xmpl.filter', []); //過(guò)濾器模塊
angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']). //模塊xmpl依賴于數(shù)組中的模塊
run(function(greeter, user) {
// 初始化代碼，應(yīng)用啟動(dòng)時(shí)，會(huì)自動(dòng)執(zhí)行
greeter.localize({
salutation: 'Bonjour'
});
user.load('World');
})
// A Controller for your app
var XmplController = function($scope, greeter, user) {
$scope.greeting = greeter.greet(user.name);
}
Angular start項(xiàng)目
。。。待續(xù)
四.參考
https://angularjs.org/ AngularJS官網(wǎng)
理解AngularJs參考
http://www.zhihu.com/question/22284218 AngularJs在實(shí)踐中的優(yōu)缺點(diǎn)
http://www.jb51.net/article/60505.htm AngularJS中的模塊詳解
http://blog.csdn.net/renfufei/article/details/19038123 AngularJS中的依賴注入
http://ju.outofmemory.cn/entry/121904 AngularJS 中的 factory、 service 和 provider
應(yīng)用實(shí)踐AngularJs參考
http://www.angularjs.cn/tag/AngularJS AngularJs入門教程
http://www.runoob.com/angularjs/angularjs-tutorial.html AngularJs簡(jiǎn)單教程
