angularjs前兩個(gè)特性見：http://www.reibang.com/p/edbf0a8ac920
一. AngularJS四大特性之三-依賴注入
-
若某個(gè)函數(shù)調(diào)用時(shí)需要其他的對(duì)象作為形參箕肃，就稱此函數(shù)依賴于形參
function Driver(car) {
car.strat();
car.run();
car.stop();
} -
如何解決依賴關(guān)系
1）主動(dòng)創(chuàng)建
var c1 = new Car(); var d1 = new Driver(c1);-
被動(dòng)注入(Injection)方式
module.controller("控制器"涌庭，function($scope,$inerval));
angular中的ngController指令在實(shí)例化控制器對(duì)象時(shí)铺呵，會(huì)根據(jù)指令的形參名猾担，創(chuàng)建出控制器所依賴的對(duì)象辑奈，并注入進(jìn)來---依賴注入（Dependency Injection）
注意：
1. angular在創(chuàng)建控制器對(duì)象時(shí)袱瓮，會(huì)根據(jù)形參列表中的每個(gè)形參依賴的對(duì)象的名稱來創(chuàng)建辙谜，故控制器聲明函數(shù)不能聲明angular無法識(shí)別的形參名 angular只提供了一種依賴注入方式-根據(jù)形參名來注入依賴的對(duì)象
2. 若項(xiàng)目js文件使用了類似yuicompressor等壓縮程序问欠，默認(rèn)會(huì)把函數(shù)的形參名精簡為一個(gè)字母的形式肝匆，會(huì)導(dǎo)致Angular的依賴注入失敗-解決辦法module.controller("控制器名"，[
"$scope", "$interval", "$http", function(a,b,c){ }]);
3. 可以被注入的對(duì)象 - 所有的service對(duì)象都可以被注入
1）$rootScope 在多個(gè)控制器間共享數(shù)據(jù)的服務(wù)
2）$interval 提供周期性定時(shí)器服務(wù)
3）$timeout 提供一次性定時(shí)器服務(wù)
4）$log 體用五個(gè)基本的日志輸出服務(wù)
5）$http 提供異步HTPP請(qǐng)求（AJAX）的服務(wù)$http({method:"GET",url:""}).then(fun).catch(fun) $http.get("url").then(fn); $http.post("url",data).then(fn);6）$location
-
二. ng模塊中提供的過濾器
filter:把model中的數(shù)據(jù)在顯示時(shí)以某種特定的格式來呈現(xiàn)
-
lowercase
語法：{{表達(dá)式 | lowercase} -
uppercase
語法：{{表達(dá)式 | uppercase} -
number
語法：{{表達(dá)式 | number}} {{表達(dá)式 | number:小數(shù)位數(shù)}} -
currency
{{表達(dá)式 | currency}} {{表達(dá)式 | currency:'貨幣符號(hào)'}} -
date
{{表達(dá)式 | date }} {{表達(dá)式 | date | "yyyy-MM-dd"}}
三. 總結(jié)ng模塊中我們已經(jīng)用到的內(nèi)容
-
directive - 用在DOM元素上
ngApp/ngbind/nginit/ngcontroller/ngmodel/ -
service - 用在控制器的聲明里
$scope/$rootScope/$timerout/$interval/$http/$location filter - 把model中的數(shù)據(jù)在顯示時(shí)以某種特定的格式來呈現(xiàn)
四. 單頁應(yīng)用
單頁面應(yīng)用與多頁面應(yīng)用的區(qū)別
五. angularjs提供的模塊---ngroute
- 概念
route: 路由 通過某條線路找到目標(biāo)內(nèi)容
ngroute 模塊的目標(biāo)： 就是根據(jù)瀏覽器中url中的一個(gè)特殊的地址標(biāo)記顺献，查找到該標(biāo)記所對(duì)應(yīng)的模板頁面旗国，并異步加載到ngview
- 使用步驟
1) 創(chuàng)建唯一完整的HTML頁面，其中聲明一個(gè)容器注整，ngview指令能曾。引入angular.js angular-routejs
<div ng-view></div>
2）創(chuàng)建多個(gè)模板頁面(習(xí)慣上放在一個(gè)特別的目錄下，如tpl)
3) 創(chuàng)建Module,聲明依賴于ng/ng-route兩個(gè)模板
var app = angular.module("module",["ng","ngRoute"]);
4）在Module中配置路由字典
app.config(function($routeProvider){
$routeProvider.when("/start",{
templateUrl:xxx,
controller:"" //此處聲明的控制器可供當(dāng)前目標(biāo)頁面所有元素使用
})
})
5）使用瀏覽器做測試
http:IP地址/index.html#/路由地址
-
ngroute中的頁面跳轉(zhuǎn)
通過超鏈接訪問 href="#/main"
通過js跳轉(zhuǎn) $location.path("/2")
補(bǔ)充：
AngularJS的最大的不足/應(yīng)用時(shí)需要特別關(guān)注的地方
原生ES/JS/DOM只有特定HTML元素的特定事件的監(jiān)聽機(jī)制肿轨，沒有監(jiān)聽數(shù)據(jù)的機(jī)制
$interval和window.setInterval()的區(qū)別
$interval修改任何的模型Model數(shù)據(jù)寿冕，底層會(huì)立即遍歷一遍$digest隊(duì)列
即使修改了Model數(shù)據(jù)，也不會(huì)遍歷$diges
