AngularJS入門
## AngularJS是什麼？ ##javascript
AngularJS是一個前端JavaScript框架，背後有Google支持。這個框架最先是09年發佈的，隨後發展迅速，尤爲是最近，流行度很高。和其餘框架不一樣，AngularJS有不少獨特的特性，使得其很是不同凡響。考慮到本人的文章多寫的邏輯混亂，若是你對AngularJS不瞭解，推薦你先去其[官網](http://www.angularjs.org)看看。對於我來講，最吸引個人兩個特性是雙向綁定以及依賴注入。前者免去了開發時顯示的刷新DOM，能讓開發者更專一在邏輯上，然後者則使得測試以及集成變得很是方便。html
### Hello，World ###
先來看一個經典的Hello World。前端
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script>
function HelloController($scope) {
$scope.person = {
name: "World"
}
$scope.sayHelloWorld = function() {
alert($scope.person.name);
}
</script>
</head>
<body ng-app>
<div ng-controller="HelloController">
<input type="text" ng-model="person.name" />
<button ng-click="sayHelloWorld()"></button>
</div>
</body>
</html>
### Controller ###
在Angular中，Controller主要負責初始化scope，包括數據以及所須要的函數。上面的HelloController就是個典型的Controller，另一種更增強大的定義方式容許你聲明所依賴的模塊。java
var controllers = angular.module('demo.controllers');
controllers.controller("demoController", ['$scope', '$http', function($scope, $http) {
$scope.test_data = {
value: 'test data'
};
$scope.test_function = function() {
alert("test function");
};
}]);
Controller比較直觀，須要注意的有兩個地方，一是使用$watch關注某個表達式的值，當發生變化時作相應操做，二是使用外部庫操做數據，須要使用apply通知angular，否則的話頗有可能外部庫更新了數據，但angular卻沒有作相應更新。angularjs
### Directive ###
在前端開發中，常常須要操做DOM，並且有時候須要使用一大堆HTML來構建一個經常使用的組件，例如Google+信息流中的一條信息，在Angular中這都屬於Directive的做用，這也就意味着在Controller中操做DOM是個錯誤的作法。ajax
一般狀況下，Directive定義時採用CamelCase規則進行命名，而在使用時則使用橫線進行分隔。api
Directive的定義數組
var directives = angular.module('demo.directives', []);
directives.directive('customDirective', function() {
return {
restrict: 'ECMA',
template: '<nav></nav>',
templateUrl: 'directive.html',
replace: false,
priority: 0,
transclude: false,
scope: false,
terminal: false,
require: false,
controller: function(scope, element, attrs, transclude, otherInjectables {},
compile: function(element, attrs, transclude) {
return {
pre: function preLink(scope, element, attrs, controller) {},
post: function postLink(scope, element, attrs, controller) {}
};
},
link: function(scope, element, attrs) {
}
};
});
restrict: 指定了directive的使用形式，共有四種：
1. Element（restrict定義時的E）
2. Attribute（restrict定義時的A）
3. Class（restrict定義時的C）
4. Comment（restrict定義時的M）app
compile：在directive中若是須要對DOM元素進行處理，基本都是在這個函數中進行。仔細看這個函數，compile並不能訪問scope，
link：此函數的主要做用就是對DOM和scope作數據綁定。和compile不一樣，在這個函數中，已經能夠訪問scope了。
template和templateUrl：用於指定directive對應的模板，前者直接使用字符串定義模板，然後者則經過url連接外部模板文件。在模板中可使用對應controller或者rootScope中的scope，固然也有例外，具體請看關於scope的解釋。
replace：指定是否使用模板替換directive做用的DOM元素。
priority：指定優先級，angular在處理directive時，會將頁面出現的全部directive按優先級排序，通常這個數值都是不指定的。
controller：directive對應的controller，一般用於directive之間的通訊。在這個函數中，全部綁定到this上的變量，其餘的directive都能經過使用require來進行訪問。
require：經過指定某個directive的名字，來訪問其對應的controller。其中以？做爲前綴時，若是找不到此directive將報錯，而以^爲前綴，將會在父元素進行遞歸查找，可使用數組來引入多個directive，如['directive1','directive2','directive3']
scope：用於指定當前directive所對應的scope，不一樣的取值之間的影響很是大。框架
1. false：此時directive與父元素共享scope
2. true：此時directive有本身的scope，該scope繼承父元素所對應的scope
3. isolate：directive有本身的scope，該scope不會繼承自父元素對應的scope，可是仍然能夠經過scope.$parent訪問父節點的scope。這不是一個推薦的作法，由於這樣就對父元素進行了限制，影響了directive的使用範圍。若是想在父子元素之間共享數據，能夠明確指定那些元素須要父子之間共享。方法共有三種：
使用@將父級scope中的屬性綁定到本地scope中，單向綁定，這個值老是字符串，在template中須要使用{{}}
使用=同上，只不過這裏是雙向綁定，在template中能夠直接給出父級scope的屬性名稱
使用&用於倒入函數或者表達式
transclude：用於控制是否要將該directive的子元素添加到模板中ng-tranclude指定的元素之下
### Service ###
在Angular中，Service是一些提供常見功能的單例對象。諸如上面出現$http等，其使用也是比較簡單的，只要在使用時聲明這個依賴就能夠了，例如上面的demoController。其定義方式主要有一下幾種：
1. service只是簡單的數值可使用constant（name，value）進行註冊，若是時已經存在的對象，可使用value（name，value）進行註冊
var services = angular.moudle('demo.services', []);
services.constant('number', 42);
services.constant('string', 'string');
var existingService = {
notify: function(msg) {
alert(msg);
}
};
services.value('notify', existingService);
2. 註冊一個service構造函數
services.service('demoService2', function() {
this.func = function() {
};
});
3. 註冊一個工廠函數用於建立service實例，這種方式能夠在建立服務實例以前作些處理
services.factory('demoService1', function(msg) {
// some processing code
return {
func: function() {
}
};
});
4. 使用provider，使用這種方式，複雜一點，可是好處是能夠對service進行配置。
services.provider('demoService3', function() {
this.value = "string";
this.$get = function() {
var value = this.value;
return {
print: function() {
console.log(value);
}
}
}
this.setValue = function(value) {
this.value = value;
}
});
// 使用config能夠對provider進行配置
services.config(function(demoService3Provider) {
demoServiceProder.setValue('hello');
});
固然，建立服務也是能夠聲明依賴的，具體格式和controller相似，再也不羅嗦。
Angular還全部不少概念，包括router和filter等，我不多用到，沒有細研究過。
- 1. AngularJs入門
- 2. AngularJS入門demo
- 3. AngularJS入門
- 4. angularjs入門
- 5. AngularJS入門（三）
- 6. AngularJS入門（一）
- 7. AngularJS入門（五）
- 8. (angularjs) 入門
- 9. AngularJS入門(一)
- 10. AngularJS入門（四）
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Neo4j數據庫入門教程 - NoSQL教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. AngularJs入門
- 2. AngularJS入門demo
- 3. AngularJS入門
- 4. angularjs入門
- 5. AngularJS入門（三）
- 6. AngularJS入門（一）
- 7. AngularJS入門（五）
- 8. (angularjs) 入門
- 9. AngularJS入門(一)
- 10. AngularJS入門（四）