1、寫在最前html
AngularJS是Google推出的一款Web應用開發框架。它提供了一系列兼容性良好而且可擴展的服務,包括數據綁定、DOM操做、MVC設計模式和模塊加載等。前端
如今網上JS框架茫茫多,真不知道是到底要學習什麼框架,學習了這個框架,說不定還沒用在項目,又有更好的js框架出來了。前端就是不斷折騰新東西,生命在於折騰~web
是的,這麼多的前端框架,是否是真的都要學習??答案固然不是,看所要完成的項目。這是帶個人前端前輩告訴我,具體使用什麼框架仍是不用框架,ajax
看項目需求,一切都以按時按質完成做爲選擇的標準。可是新的東西要學習,不學習就落後。後端
2、AngularJS的幾個重要概念有什麼設計模式
客戶端模板 舉個栗子:hello.html數組
模型/視圖/控制器(MVC)瀏覽器
數據綁定前端框架
依賴注入服務器
路由管理
指令(Angular的靈魂)
示例:購物車(源碼在最後)
3、對這些概念的理解
插個曲,Angular最適合用來作單頁web應用。在百度上查了單頁web應用的概念。如表:
單頁web應用(qq音樂) |
單頁Web應用(single page web application,SPA),就是隻有一張Web頁面的應用。 單頁應用程序 (SPA) 是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。 瀏覽器一開始會加載必需的HTML、CSS和JavaScript,全部的操做都在這張頁面上完成,都由JavaScript來控制。所以,對單頁應用來講模塊化的開發和設計顯得至關重要。 |
優勢: |
1).良好的交互體驗(用戶不須要從新曬新頁面,獲取數據都是經過ajax異步獲取) 2).良好的先後端分離 3).減輕服務器壓力(服務器只用出數據, 不用管展現邏輯和頁面合成,吞吐能力會提升幾倍)
4)..共用一套後端程序代碼(不用修改後端程序代碼就能夠同時用於Web界面、手機、平板等多種客戶端)
|
缺點: |
1).SEO難度較高 2).前進、後退管理( 全部的頁面切換須要本身創建堆棧管理) 3).初次加載耗時多(代碼合併、CDN) 像遊戲開發,頻繁操做DOM也不適合使用Angular |
客戶端模板 | |
多頁面 | 單頁面 |
經過裝配和連接服務器上數據來建立HTML,而後將構建好的HTML頁面發送到瀏覽器。 | Angular將模板和數據推送到瀏覽器中裝配他們,而後服務器角色只是爲模板提供靜態資源以及爲模板提供數據 |
模型/視圖/控制器(MVC) | |
M 代碼中清晰的分離數據管理 (模型 ) C 應用程序邏輯 (控制器 ) |
Angular中的
M 模型中的數據即是存儲在對象中的屬性 (屬性值 V 文檔對象模型 (DOM) C 控制器是 JavaScript類
C和V之間的紐帶就是$scope
|
數據綁定 | 雙向綁定 |
ng-model | 所謂的雙向綁定,無非是從界面的操做能實時反映到數據,數據的變動能實時展示到界面。 |
依賴注入 | 舉個栗子 |
程序運行過程當中,如需另外一個對象協做(調用它的方法、訪問他的屬性)時,無須在代碼中建立被調用者,而是依賴於外部容器的注入 | 在HelloController控制器中,$scope對象會把數據綁定自動傳遞給咱們;咱們不須要經過調用任何函數來建立他。只是經過將他防止在控制器的構造器中來請求它。 |
數據綁定 | |
![]() |
該過程,沒有在輸入字段上註冊一個改變值的事件監聽器。 |
指令 | Angular之能夠能夠編寫模板如HTML同樣,是由於框架核心包含了一個強大的DOM解析引擎。 |
擴展指令 | 例如:ng-controller。在HTML模板看到不屬於HTML規範的新屬性,這稱爲HTML擴展指令 |
自定義指令 | 本身定義本身須要的指令(聽說指令是Angular的靈魂) |
<!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8"> <title>購物車</title> </head> <body ng-controller="CartController"> <h1>Your order</h1> <div ng-repeat="item in items"> <span>{{item.title}}</span> <input ng-model="item.quantity"> <span>{{item.price | currency}}</span> <span>{{item.price * item.quantity | currency}}</span> <button ng-click="remove($index)">Remove</button> </div> </body> <script src="../assets/js/angular-1.3.0.js"></script> <script> function CartController($scope){ // currency是過濾器,用來轉換文本 // $index參數 包含了它在ng-repeat的索引值 //splice() arrayObject.splice(index,howmany,item1,.....,itemX) // 定義一個一維數組存放對象 $scope.items = [ {title: 'Paint pots',quantity:8,price:3.95}, {title: 'Polka dots',quantity:17,price:12.95}, {title: 'Pebbles',quantity:5,price:6.95} ]; $scope.remove = function(index){ $scope.items.splice(index,1); } } </script> </html>