1.AngularJS初探
1.須要什麼前端開發環境
1）代碼編輯工具 webstormhtml
2）斷點調試工具 chrome插件Batarang前端
3）版本管理 tortoiseGitnode
4）代碼合併和混淆工具angularjs
- grunt-contrib-uglify
- grunt-contrib-jshint
- grunt-contrib-qunit
- grunt-contrib-watch
- grunt-contrib-concat
5）依賴管理工具 bower
bower 自動安裝依賴的組件
組件之間的依賴檢測
版本兼容性自動檢測
http-server
簡單的http-server
基於nodeweb
6）單元測試工具Jasmine
相似Java裏面的JUnit 提供語法編寫測試用例ajax
- 分組 describe(string,function) 表示分組，一組測試用例
- 用例 it(string,function) 表示測試用例
- 指望 expect(expression) 表示指望expression這個表達式具備某個值或者某種行爲
- to***(arg) 這個函數表示匹配
protractor(專爲angularjs而生的)chrome
karma-coverage數據庫
7）集成測試工具express
2.完整的目錄結構
3.MVC框架
0）AngularJS框架強制正確實現MVC；模板聲明的功能，使HTML意圖更直觀；AngularJS模型部分是基本的JavaScript對象，容易操做；AngularJS使用聲明的方式，經過將HTML的聲明與背後的JavaScript功能直接聯繫來擴展HTML；AngularJS提供了過濾器，使得數據從模型傳遞到視圖時可輕鬆格式化數據；AngularJS傾向於使用傳統JavaScript應用程序所使用的代碼的一小部分，只需關注邏輯，沒必要關注細節，好比數據綁定；AngularJS比傳統方法所需的DOM操做少不少，指導你把操做放在程序中正確的位置，基於表示數據比基於DOM操做更易設計；AngularJS提供了內置服務，可用結構化和可重用的方式實現本身的服務；AngualrJS框架清晰地把職責分離編程
1）爲何須要MVC （模塊化和複用）
- 代碼規模愈來愈大，切分職責是大勢所趨
- 爲了複用：不少邏輯是如出一轍的
- 爲了後期維護方便：修改一塊功能不影響其餘功能
2）前端MVC的困難
- 操做DOM代碼必須等待整個頁面所有加載完成
- 多個js文件之間若是出現互相依賴，程序必須本身解決
- js的原型繼承給前端編程帶來不少困難
1.1.模塊
AngularJS引入了表明應用程序組件的模塊的概念。模塊提供命名空間，以基於模型的名稱來引用指令，範圍和其餘組件。使得包裝和再利用應用程序的部件更容易。
AngularJS中，每一個視圖或網頁都經過ng-app指令分配給他一個單獨的模塊。能夠把其餘模塊做爲依賴模塊添加到主模塊（更結構化和組件化）
1.2.做用域和數據模型
AngularJS引入做用域（scope）概念。（實際上只是用來填充呈如今網頁上的視圖的數據的JS表示），數據能夠來自任何源，如數據庫，遠程網絡服務，AngularJS代碼，web服務器動態生成etc.
做用域：普通的JavaScript對象。（能夠根據須要在AngularJS代碼中操做他們）。另外還能嵌套做用域來組織數據以匹配他們正在使用的上下文。
1.3.具備模板和指令的視圖
HTML是基於DOM的。大多數動態Web應用程序直接用js或者jQuery操做DOM。
AngularJS引入結合模板和指令創建呈現給用戶HTML的視圖的概念。
指令：1）要被添加到一個HTML模板的額外屬性，元素和CSS類。2）擴展了DOM的通常行爲的js代碼
使用指令的優勢：HTML模板模板經過指令指出了預期的邏輯。內置的AngularJS指令處理大多數必要的DOM操做功能，（可把做用域中的數據綁定到視圖）
能夠自定義指令作WEB應用的任何DOM操做
1.4.表達式
AngularJS：在HTML模板中添加表達式的能力。對錶達式求值，而後動態添加到網頁。表達式被連接到做用域。
1.5.控制器
MVC框架：經過實現控制器完成。（經過指令把控制器添加到HTML中，後臺實現爲js代碼）
1.6.數據綁定
AngularJS內置數據綁定：把模型中的數據與網頁提示的內容連接。
當網頁上的數據改變時模型被更新，且當數據在模型中被改變時網頁也自動更新（模型始終向用戶呈現數據的惟一來源，視圖只是模型的投影）
1.7.服務
AngularJS在環境中工做的主力：服務。爲Web應用程序提供功能的單例對象
（web應用程序的一個共同任務是執行對web服務器的ajax請求，angularjs提供了http服務，包含用來訪問web服務器的全部功能）
服務功能在上下文中徹底獨立，能夠很容易被組件化。（如內置的服務組件：http請求，日誌記錄分析，動畫）
1.8.依賴注入
依賴注入：一個過程。一個代碼組件定義了對其餘組件的依賴關係。當代碼被初始化，依賴組件可提供內部訪問。
常見方法：使用服務。（若是正在定義須要經過HTTP請求訪問Web服務器的模塊，能夠把http服務注入該模塊，模塊中的代碼就能使用http功能）
1.9.職責分明
重要原則：職責分離。結構化框架確保代碼很好的實現，容易理解維護測試。
視圖做爲應用程序正式表示結構。代表任何表示邏輯都做爲視圖中的HTML模板指令。
若是須要DOM操做。就在一個內置指令或本身的自定義指令js代碼中執行
把任何可重複使用的任務都實現爲服務，並經過依賴注入把他們添加到本身的模塊
確保做用域反映了模型當前狀態，而且是由該視圖使用數據的單一來源
確保控制器代碼只起到充實做用域數據的做用，而不包括任何業務邏輯
在模塊的命名空間中定義控制器，不是全局定義。
2.AngularJS生命週期
AngularJS:組件，（引導，編譯，運行階段）
2.1.引導階段
生命週期的第一階段：初始化自身的必要組件，初始化ng-app指令指向模塊。模塊被加載，任何依賴關係都被注入模塊，並提供給模塊中的代碼使用。
2.2.編譯階段
生命週期的第二階段：HTML編譯。加載時，DOM以靜態形式被加載到瀏覽器中。編譯階段，靜態DOM被替換成表示AngularJS視圖的動態DOM。
包括：1）遍歷靜態DOM並收集全部指令，而後把指令連接到AngularJS內置庫或自定義指令代碼中相應的js功能上。指令與做用域結合，產生動態或實時視圖
2.3.運行時數據綁定階段
最後階段：運行時階段。存在直到用戶從新加載或離開網頁。做用域的任何更改都反映在視圖中，視圖中的任何更改也直接更新到做用域。（做用域成爲視圖惟一來源）
AngularJS vs 傳統數據綁定：傳統方法把模板與從引擎接受到的數據相結合，每次數據發生變化時對DOM執行操做。AngularJS只編譯DOM一次，而後根據須要連接已經編譯的模板。
2.4.將AngularJS與現有的JavaScript和jQuery整合
1.編寫使用模式，自定義HTML指令，服務和控制器的AngularJS應用程序。
2.確保代碼模型部分。把模型中增長模型數據的代碼分離出來，放入控制器函數。把訪問後端模型數據的代碼分離放入服務
3.肯定操做視圖中的DOM元素代碼。把DOM操做代碼分離放入定義良好的自定義指令組件，提供HTML指令。
4.肯定其餘基於任務的函數，分離放入服務。
5.把指令和控制器隔離到模塊中組織代碼
6.使用依賴注入把服務和模塊恰當鏈接。
7.更新HTML模板以使用新指令
2.5.在HTML文檔中引導AngularJS
引導：1）經過ng-app指令定義應用程序模塊，2）加載在<script>標籤中的anjular.js
ng-app指令告訴AngularJS編譯器把該元素做爲編譯的根。ng-app一般裝入<html>標籤，確保整個網頁都會被包括。
- 1. 【AngularJS】—— 1 初識AngularJs
- 2. AngularJS基礎入門初探
- 3. 1、TensorFlow初探
- 4. 初探ES6(1)...
- 5. GPIO初探1
- 6. RxSwift（1）— 初探
- 7. 初探JVM（1）
- 8. Angular初探（1-2）
- 9. Angular初探（1-4）
- 10. AngularJs初探--讓AngularJS的$http 服務像jQuery.ajax()同樣工做
- 更多相關文章...
- • 探索Redis事務回滾 - Redis教程
- • ionic 創建 APP - ionic 教程
- • 適用於PHP初學者的學習線路和建議
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。