AngularJS

框架：優秀的能夠重複使用的代碼，單獨提取並封裝，提升代碼的服用了、開發速度，並保證良好的瀏覽器的兼容性。

angularJS、phoneGap、Ionic、ZeptoJS、React。。。

判斷框架：①它適用的場景 ②如何使用 ③遇到了問題怎麼解決(維基百科、官網、論壇（stackoverflow）)

1、經常使用的設計原則和設計模式

一、設計原則（明確）
① YANGI（You aren't gonna need it） 不寫不須要的代碼
②KISS（Keep it simple and stupid） 代碼越簡單越好
③DRY（Don't Repeat Yourself）封裝代碼
④高內聚低耦合
內聚：一個模塊內部的不一樣部分之間的關係
耦合：不一樣模塊/組件的關係
⑤SRP(single responsibility principle) 單一責任原則
⑥OCP（open closed principle） 開閉原則
對擴展開放 對修改關閉
⑦LCP（least knownledge principle） 最少知識法則

二、設計模式（23種 瞭解）
整體來講設計模式分爲三大類：

①建立型模式，共五種：工廠方法模式、抽象工廠模式、單例模式、建造者模式、原型模式。

②結構型模式，共七種：適配器模式、裝飾器模式、代理模式、外觀模式、橋接模式、組合模式、享元模式。

③行爲型模式，共十一種：策略模式、模板方法模式、觀察者模式、迭代子模式、責任鏈模式、命令模式、備忘錄模式、狀態模式、訪問者模式、中介者模式、解釋器模式。

常常用到的設計模式：
工廠方法模式、單例模式、適配器模式、解釋器模式、觀察者模式

MVC、MVVM、MVP。。。--》終極目標：模塊化和複用

MVC：
Model（模型數據）、View（視圖）、Controller（控制器）

遙控器--》控制器：數據的增刪改查的操做
電視 --》View：展現數據
光纜 --》Model：模型數據

why MVC？
解耦（下降代碼的耦合度）、職責的切分。。。。

工做原理：當對視圖操做的時候，觸發控制器中的一些方法，在這些方法中對於數據的增刪改查的操做，藉助一些綁定顯示，更新到視圖。

 

 

 

 

2、認識AngularJS

一、什麼是AngularJS
ng是一個由Google維護的開源的框架，實現單頁面應用程序，適用於數據操做比較頻繁的場景

二、爲何AngularJS
四大特徵：
①採用了MVC的設計模式
②雙向數據綁定
③依賴注入
④模塊化設計

三、怎麼使用？
引入對應的js文件。

3.1 表達式
語法：{{表達式}}
做用：將表達式的結果輸出到調用該表達式的元素的innerHTML中

練習：新建一個html文件，在文件中，經過雙花括號語法執行算術運算、比較運算、邏輯運算、三目運算。

3.2 指令
ngApp指令：①指定angularJS的做用範圍②自動載入並啓動ng應用

ngInit指令：初始化一些變量（對象、數組。。。），注意：不須要寫上var關鍵字
語法：<ANY ng-init=""></ANY>

練習：ngInit指令建立一個對象數組（學生數組），模擬4個對象，每一個對象包含name、sex、score；將對象數組輸出到一個table中。

步驟：
①引入js文件，指定ngApp指令
②經過ngInit初始化數據
③將數據展現在table中。

ng中的指令：是由AngularJS提供的，能夠將指令用在HTML中做爲擴展屬性、擴展標籤

擴展屬性用法：<ANY ng-xx=""></ANY>
擴展標籤用法：<ngView></ngView>

ngApp/ngInit
注意事項：ngInit來初始化變量的時候，若是須要初始化多個變量，只須要經過‘；’來隔開
<span ng-init="name='lucy';age=20">{{name}}</span>

ngApp指令ng應用的做用範圍，若是ngApp調用了屢次，只有第一次是生效的。

 

 

 

 

 

 

 

 

 

 

 

1、自定義指令
語法：
var app = angular.module('myModule',['ng']);
app.directive(name,fn);

自定義指令：
restrict:'EACM'
E-->Element 元素
A-->Attribute 屬性
C-->Class
M-->Comment 註釋（在指令中添加一個屬性：replace:true）

新指令的命名：
①駝峯式
②前綴通常是公司或者項目的簡寫，後綴通常是指令的做用
③使用指令: tsHello--->ts-hello

在第二個參數 指定一個方法，在方法中返回一個對象設置指令。對象中template、restrict、replace、scope。。。

總結：若是要參數的傳遞，須要在建立指令的時候，加上scope，同時指定對應的屬性的名稱（testName），在使用指令的時候，須要加上對應的屬性（test-name=''）

練習：建立自定義的指令 tsDirective,傳入ts-name="Hello Directive"，調用指令（做爲元素來使用）顯示出來。

2、雙向數據綁定
一、方向1的綁定（Model數據 綁定到View）

實現方法：{{name}}、經常使用指令（ngRepeat/ngBind/ngIf...）

相比DOM操做：先去查找元素，再去設置元素，只須要把model數據綁定視圖上，數據改，視圖就會更新。

二、方向2的綁定（將View數據綁定到Model數據）

實現方法只有一種方式： ng-model
<input type='text' ng-model='myText'/>

$scope.$watch('模型變量名',function(){})

練習：
留言本：多行文本輸入框textarea、
選擇城市：下拉菜單select、
是否贊成：複選框 checkbox

 

3、過濾器

4、經常使用函數

 

 

 

 

1、自定義指令
語法：
var app = angular.module('myModule',['ng']);
app.directive(name,fn);

自定義指令：
restrict:'EACM'
E-->Element 元素
A-->Attribute 屬性
C-->Class
M-->Comment 註釋（在指令中添加一個屬性：replace:true）

新指令的命名：
①駝峯式
②前綴通常是公司或者項目的簡寫，後綴通常是指令的做用
③使用指令: tsHello--->ts-hello

在第二個參數 指定一個方法，在方法中返回一個對象設置指令。對象中template、restrict、replace、scope。。。

總結：若是要參數的傳遞，須要在建立指令的時候，加上scope，同時指定對應的屬性的名稱（testName），在使用指令的時候，須要加上對應的屬性（test-name=''）

練習：建立自定義的指令 tsDirective,傳入ts-name="Hello Directive"，調用指令（做爲元素來使用）顯示出來。

2、雙向數據綁定
一、方向1的綁定（Model數據 綁定到View）

實現方法：{{name}}、經常使用指令（ngRepeat/ngBind/ngIf...）

相比DOM操做：先去查找元素，再去設置元素，只須要把model數據綁定視圖上，數據改，視圖就會更新。

二、方向2的綁定（將View數據綁定到Model數據）

實現方法只有一種方式： ng-model
<input type='text' ng-model='myText'/>

$scope.$watch('模型變量名',function(){})

練習：
留言本：多行文本輸入框textarea、
選擇城市：下拉菜單select、
是否贊成：複選框 checkbox

3、過濾器
過濾器是用在表達式中，實現對錶達式結果的篩選、過濾、格式化，達到更好的表現效果

語法：|--》管道
{{表達式 | 過濾器1：'name' | 過濾器2 }}

currency 貨幣樣式的過濾器
date 日期
uppercase
lowecase 大小寫的轉換
orderBy 升序或者降序 orderBy:'age':true
limitTo 限定顯示的數量
number 限制顯示小數點後幾位

練習：過濾器，模擬一個list=[{name,age,score},{}],、
①按照age升序，②按照score降序並只顯示前三名

4、經常使用函數
forEach
uppercase/lowercase
toJson/fromJson
序列化：將一個json對象轉換爲json格式的字符串
反序列化：將一個json格式的字符串 轉換爲json格式的對象

5、服務
在ng中 服務 是 一種單例對象，所謂單例，服務在每個應用中只會被實例化一次。

功能：爲應用提供數據和對象
兩大類：①內置的服務 ②自定義服務

一、內置的服務的使用方法

若是在控制器中，使用ng中內置的服務，須要在控制器的回調函數中
①將對應的服務給注入進來
②使用服務所提供的數據和對象

app.controller('myCtrl',function($scope,$location){
var url = $location.absUrl();
});

二、控制器和做用範圍

$scope與$rootScope：
$scope是$rootScope的子做用域控制對象，$rootScope的id爲1，其餘的爲2,3....

不一樣的控制器之間，所對應的做用域控制對象($scope),之間是相互隔離的，若是要共享數據，怎麼辦？

藉助$rootScope這個根做用域控制對象來實現。

若是父做用域對象想要調用子做用域對象的變量或者方法，ng提供了2個方法：
①$broadcast 將事件從父親傳遞給子級
$scope.$broadcast(eventName,data);

②$emit 將事件從子級傳遞給父親
$scope.$emit(eventName,data);

接收：
$scope.$on(eventName,function(event,data){

})

每日一練：全選

雙向數據綁定
ngChecked/ngClick/ngModel/ngChange

分析：
模型數據是一個對象數組

步驟：
①ui搞定
②部分選中
③所有選中

 

 

 

 

 

 

 

 

 

 

 

 

1、ng內置的服務（$http,$interval,$timeout...）

①雙向數據綁定的工做原理
<p>{{num}}</p>===>ng框架自動添加一個監聽（watch），和$scope.$watch是同樣的，只要是數據發生了變化，視圖就會更新。？？？
如何知道數據是否發生了變化？
ng會週期性的運行一個函數來檢查$scope的模型數據是否發生變化，稱之爲$digest===>$scope.$digest()

何時纔會調用$digest()?
ng指令，不多直接手工調用$digest(),都是$scope.$apply();==>$rootScope.$digest()

setInterval是原生js的功能，自己就是一個循環，須要咱們手工調用$scope.

②$interval $timeout

var t = $interval(function(){},100);
$timeout(function(){},100);

$interval.cancel(t);

定時器練習：
使用週期性定時器來實現一個圖片輪播，同時實現一個自增的計數器，當計數器大於30時自動中止。

③$http
AJAX調用：$http服務向服務器發起AJAX請求，異步的獲取服務器端返回的數據，聲明爲模型數據，在視圖中展示出來。

$http.get('url').success(function(data){....});
$http.post('url',data).success(function(data){..})

若是要發起post請求，必須設置頭信息，設置的方式：
$http.defaults.headers.post = {'Content-Type':'application/x-www-form-urlencoded'};

練習：$http發起get請求，編寫一個php文件，返回json數組。
顯示在table中。
分析：apache服務跑起來，將工程放在c:\xampp\htdocs的目錄中。
第一步:編寫php文件，在瀏覽器中去訪問該文件可否拿到數據
第二步：$http發起get請求，拿到數據
第三步：將數據顯示在table中。

2、自定義服務

不管是哪一種方式建立的服務，和ng內置的服務使用的方式都是一致：注入進來，直接拿來用

一、factory方法

app.factory('服務名稱',function(){
return {
}
})

二、service方法

app.service('服務名稱',function(){

})

三、constant、value
建立的服務返回是變量
app.constant('服務名稱',value) ==> 建立配置數據
app.value('服務名稱',value) ==》建立對象

常量服務若是注入到控制器以後，能夠經過angular.extend方法進行重置

練習：使用service方法 建立一個服務，在服務中有兩個方法，方法1中，啓動一個定時器 每隔1s打印一句話，方法2：結束定時器；放置2個按鈕，點擊時分別調用服務中的方法一、方法2，

3、依賴注入

一、文件壓縮
使用YUICompresspor來完成文件的壓縮，使用方式有2種：
①直接經過命令行

②藉助webStorm來配置
File--》Settings-->tools-->file watchers--》點擊右上角的+號--》選中YUICOMPRESSOR-JS，設置program爲jar包。

文件壓縮的做用：
①刪除全部的註釋
②刪除空白、沒有語義的字符
③簡化變量名、函數名、形參名--》混淆

二、依賴注入
每一個angularjs的應用，注入器負責查找和建立依賴的服務，注入器的本質是服務的定位器，快速定位到應用須要注入的各類服務，在定位服務的過程中，須要提供注入的標記，根據標記的不一樣，劃分爲3大類：
①推斷式依賴注入（猜想）
這種方法不須要關心注入服務的順序，ng會自動處理，根據參數列表注入服務，若是參數一旦通過混淆或者壓縮，有問題。

只能處理原始的代碼

②標記式依賴注入
直接調用$inject屬性來完成標記式的注入聲明，該屬性是一個字符型的數組，因爲它是數組，因此有引入的前後順序的。

③行內式依賴注入（內聯）
在構建一個ng對象時，容許開發人員將一個字符型數組做爲對象的參數，而不只僅是一個函數；在這個數組中，除最後一個元素必須是函數體外，其他都是注入的服務名稱，並且順序保持一致。

建議：使用第三種依賴注入的方式：行內式依賴注入。

練習：要求採用行內式依賴注入，建立一個服務，服務中有一個方法實現求和 add:function(arg1,arg2)
視圖：兩個input標籤，一個按鈕（調用服務的add方法將求和的結果彈窗顯示出來）。

三、注入器（$injector）

定位和查找服務的。

has --》查找服務是否存在
get --》獲得服務的實例

練習：在案例基礎之上，放置一個按鈕，點擊按鈕時，經過get拿到實例並調用print方法（angular.injector-->$injector 行內式依賴注入）

每日一練：
實現一個購物車：要求從php服務器獲取初始化的數據，經過$http.

 

 

 

 

 

 

 

 

 

 

 

ng四大特徵：
①採用了MVC的設計模式
②雙向數據綁定（view和model）
③依賴注入
④模塊化設計

1、如何自定義模塊並進行調用？？

自定義模塊：angular.module()
模塊之間如何相互之間的調用： angular.module('myApp02',['ng','myApp01']);

模塊化好處：體現「高內聚低耦合」的設計原則，提升代碼的複用率，下降測試難度。

模塊分類：
①ng官方提供的模塊
ng\ngAnimate\ngRoute\ngTouch...
②用戶自定義的模塊
angular.module();

2、ng包含哪些模塊
一個angularJS的模塊能夠包含哪些組件？？
①controller：維護模型數據
②directive：用在view中 輸出/綁定Model數據
③function：forEach\toJson\fromJson
④filter：結果的篩選、過濾、格式化
⑤service：提供變量或者方法的服務
。。。

3、SPA應用以及經過ngRoute來實現的方式

單頁面應用的工做原理：
①url
http://127.0.0.1/index.html#/路由地址
②瀏覽器請求index.html,解析路由地址
③查找路由詞典，#/start ==>tpl/start.html
④獲取當前路由地址 對應的真實模板的地址 start.html
⑤發起ajax請求，獲取目標模板頁面，將服務器返回的代碼片斷，插入到當前的DOM樹，實現局部刷新

 

使用ngRoute模塊來實現SPA應用的基本步驟：
①建立完整的HTML頁面 index.html,引入angular.js,angular-route.js
②建立自定義的模塊，指定依賴於ng\ngRoute
③指定容器，盛放代碼片斷 ngView
④建立模板頁面
⑤配置路由詞典
$routeProvider.when('/start',{
templateUrl:'tpl/start.html',
controller:'startCtrl'})
⑥測試在地址欄中 輸入不一樣的路由地址的時候，可否將代碼片斷加載進來。

4、代碼片斷之間的跳轉

模板頁面之間 執行跳轉的3種方式：
①直接修改地址欄中的url
②使用超連接 <a href='#/路由地址'></a>
③$location.path('/路由地址')

若是有多個代碼片斷，都須要經過js的方式來跳轉，爲每一個代碼片斷去建立控制器 去定義jump方法，這個是不合理的，能夠這麼處理：藉助父控制器定義方法，而後讓子控制器去調用。

配置代碼片斷的控制器的方式：
①ng-controller
②配置路由詞典設置
$routeProvider.when('/myLogin',{
templateUrl:'tpl/login.html',
controller:'loginCtrl'
});

 

練習：使用ngRoute來實現一個SPA應用。
建立一個完整的html--》index.html;建立2個代碼片斷 --》start.html register.html
start.html --> 點擊按鈕跳轉到register,
register.html -->a 跳轉到start.html

從register跳轉到start

5、代碼片斷進行傳參

使用ngRoute進行參數的傳遞：
①明確發送方和接收方
發送方：register
接收方：start
②配置接收方的路由以及接受參數
.when('/myStart',{
templateUrl:'tpl/start.html'
})
.when('/myStart/:id',{
templateUrl:'tpl/start.html'
})
若是接受id，
藉助ngRoute服務
$routeParams.id
③發送參數
<a href='#/myStart/123'></a>
$location.path('/myStart/123')

練習：實現SPA應用
完整：manager.html
代碼片斷：check.html pay.html send.html
要求：
①可以實現不一樣頁面的跳轉
②check.html-->超連接跳轉到pay.html，傳入price,
pay.html接受參數並顯示在頁面中
pay.html--》按鈕 點擊跳轉到send.html
send.html-->超連接跳轉到check.html

6、動態引入頁頭頁尾
ngInclude：
<ANY ng-include="'tpl/include/header.html'"></ANY>

7、其餘模塊
ngAnimate 支持js動畫和css動畫

①經過script 引入angular-animate.js到工程中
②指定自定義的模塊，要依賴於ngAnimate
③設置cssngAnimate模塊爲ngView添加ng-leave和ng-leave-active、ng-enter和ng-enter-active.

8、表單
在ng中，專門針對表單和表單中的控件，提供了一些屬性，用於驗證控件值的狀態。
$pristine 未輸入過
$dirty 已輸入過
$valid 驗證經過
$invalid 驗證未經過
$error 驗證時的錯誤信息

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ng四大特徵：
①採用了MVC的設計模式
②雙向數據綁定（view和model）
③依賴注入
④模塊化設計

1、如何自定義模塊並進行調用？？

自定義模塊：angular.module()
模塊之間如何相互之間的調用： angular.module('myApp02',['ng','myApp01']);

模塊化好處：體現「高內聚低耦合」的設計原則，提升代碼的複用率，下降測試難度。

模塊分類：
①ng官方提供的模塊
ng\ngAnimate\ngRoute\ngTouch...
②用戶自定義的模塊
angular.module();

一個angularJS的模塊能夠包含哪些組件？？
①controller：維護模型數據
②directive：用在view中 輸出/綁定Model數據
③function：forEach\toJson\fromJson
④filter：結果的篩選、過濾、格式化
⑤service：提供變量或者方法的服務
。。。

單頁面應用的工做原理：
①url
http://127.0.0.1/index.html#/路由地址
②瀏覽器請求index.html,解析路由地址
③查找路由詞典，#/start ==>tpl/start.html
④獲取當前路由地址 對應的真是模板的地址 start.html
⑤發起ajax請求，獲取目標模板頁面，將服務器返回的代碼片斷，插入到當前的DOM樹，實現局部刷新

使用ngRoute模塊來實現SPA應用的基本步驟：
①建立完整的HTML頁面 index.html,引入angular.js,angular-route.js
②建立自定義的模塊，指定依賴於ng\ngRoute
③指定容器，盛放代碼片斷 ngView
④建立模板頁面
⑤配置路由詞典
⑥測試在地址欄中 輸入不一樣的路由地址的時候，可否將代碼片斷加載進來。

模板頁面之間 執行跳轉的3種方式：
①直接修改地址欄中的url
②使用超連接 <a href='#/路由地址'></a>
③$location.path('/路由地址')

若是有多個代碼片斷，都須要經過js的方式來跳轉，爲每一個代碼片斷去建立控制器 去定義jump方法，這個是不合理的，能夠這麼處理：藉助父控制器定義方法，而後讓子控制器去調用。

配置代碼片斷的控制器的方式：①ng-controller②配置路由詞典設置$routeProvider.when('/myLogin',{ templateUrl:'tpl/login.html', controller:'loginCtrl'});