Angular 簡介
什么是 AngularJS
- 一款非常優秀的前端高級 JS 框架
- 最早由 Misko Hevery 等人創建
- 2009 年被 Google 公式收購，用于其多款產品
- 目前有一個全職的開發團隊繼續開發和維護這個庫
- 有了這一類框架就可以輕松構建 SPA 應用程序
- 輕松構建 SPA（單一頁面應用程序）
- 單一頁面應用程序：
- 只有一個頁面（整個應用的一個載體）
- 內容全部是由AJAX方式呈現出啦的
- 其核心就是通過指令擴展了 HTML，通過表達式綁定數據到 HTML。
為什么使用 AngularJS
- 更少的代碼，實現更強勁的功能
- 將一些以前在后臺開發中使用的思想帶入前端開發
- 帶領當前市面上的框架走向模式化或者架構化
AngularJS 的核心特性
- MVC
- 模塊化
- 自動化雙向數據綁定
- 指令系統
相關鏈接
- http://www.apjs.net/
- http://www.angularjs.cn/
- http://docs.angularjs.cn/api
- https://material.angularjs.org
- http://angular-ui.github.io/
Angular 上手
安裝 Angular
-
下載 Angular.js 的包
-
使用 CDN 上的 Angular.js
-
使用 Bower 安裝
bower install angular -
使用 NPM 安裝
npm install angular 每種方式安裝包，本質都是將angular的庫下載到當前文件夾中
angular中最重要的概念是指令（directive）
ng-model 是雙向數據綁定的指令，效果就是將當前元素的value屬性和模型中的user.name建立綁定關系
JS: BOM DOM ES
使用總結
運行官方文檔
CDN的優勢
Content Delivery Network
- 快
- 節省自己服務器的帶寬壓力和流量
Angular 基礎概念
MVC 思想
什么是 MVC 思想
- 將應用程序的組成劃分為三個部分：Model View Controller
- 控制器的作用就是初始化模型用的，組織調度相應的處理模型；
- 模型就是用于存儲數據的,處理數據與業務邏輯
- 視圖用于以有好的方式向用戶展現數據
優勢：每個模塊分工明確，職責清晰，復用。
目的：模塊化和復用
- 登陸案例
- 模型
- 我們數據庫中所有用戶的信息
- 接受控制器傳來的用戶名和密碼進行校驗的業務邏輯并返回true/false
- 控制器
- 接受用戶在界面上填寫的用戶名和密碼
- 將用戶名和密碼交給模型
- 視圖
- 給用戶呈現一個表單
- 接受用戶輸入內容，并將其提交給控制器
- 根據控制器返回的數據，響應用戶頁面
模塊（Module）
//創建一個名字叫MyApp的模塊，第二個參數指的是該模塊依賴哪些模塊
var myApp = angular.module("MyApp",[]),
- 建立模塊，通過ng-app指令指定不同的模塊，劃分應用程序結構，對頁進行業務上的劃分；模塊間相互獨立
- 也可以將重復使用的指令或過濾器之類的做成模塊便于使用
- angular.module方法傳遞兩個參數才是創建模塊，一個參數是獲取模塊
- 便于協同分工和維護
控制器（Controller）
angular.mdule ('OneApp',[])
.controller('HelloController',[
'$scope',
function($scope){
$scope.p={
name:'zhangsan'
};
}
]);
控制器的三種職責
- 為應用中的模型設置初始狀態
- 通過$scope對象把數據模型或函數行為暴露給視圖
-監視模型的變化，做出相應的動作
例如
$scope.$watch('totalCart',calculateDiscount)
watch只能監視$scope中已有的屬性
視圖模型（$scope）
- 視圖和控制器之間的橋梁
- 用于在視圖和控制器之間傳遞數據
- 利用$scope暴露數據模型（數據、行為）
表達式（Expression）
作用
把 數據綁定到html上
語法
寫在雙大括號內{{expression}}
包含文字，運算符，變量
與JavaScript表達式對比
單向數據綁定
雙向數據綁定
Angular 指令系統
ng-app指令
angular找到第一個ng-app過后就不會再找,手動的讓第二個div被myApp2管理
angular.bootstrap(document.querySelector('[ng-app="myApp2"]'),['myApp2']);
也可以通過模塊依賴關系，創建一個總模塊，依賴其他多個模塊
angular.module('myApp', ['myApp1', 'myApp2']);
ng-bind指令
ng-bind指令在綁定的值包含HTML時會轉義，為了安全（跨站腳本攻擊）,需要引入sanitize.js,并且該模塊要添加依賴ngSanitize模塊。
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
使用自定義的模塊才可以依賴別的包里面定義模塊，angular定義的默認模塊沒有依賴任何
angular.module('myApp', ['ngSanitize']);
ng-model指令
用于綁定應用程序數據到html控制器（input select text）的值，可以將輸入的值與angularJS創建的變量綁定。
ng-repeat指令
ng-class指令
ng-show /ng-hide指令
ng-link/ng-src指令
自定義指令
過濾器filter
作用
常見的過濾器有
date過濾器
主要用于時間格式的轉換
limitTo過濾器
filter過濾器
filter過濾器會根據設置的檢索數據過濾未匹配到的數據內容，也可以通過設置檢索條件為一個對象，實現在指定屬性中檢索
通過自定義一個比較函數，在前臺為filter指定的第二個參數實現
json過濾器
可以將一個對象以json形式解析，利用它，我們可以在界面上直觀的查看一些對象的成員，這也是調試的好辦法。
自定義過濾器
實現自定義數據格式轉換
Form表單
Form表單-----驗證
Form表單-----驗證規則
服務（service）
創建服務
通過模塊的service方法創建一個服務
內置服務——$http
此服務是AngularJS中處理AJAX的服務
請求數據方式$http.jsonp(url).success(function(res){}
