# 流行框架第三天：Angular入門

# 流行框架第三天：Angular入門

 

## 推薦工具

 

- 在線編輯器

+ http://codepen.io/

+ https://jsfiddle.net/

 

## 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 的包

+ https://github.com/angular/angular.js/releases

- 使用 CDN 上的 Angular.js

+ http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js

- 使用 Bower 安裝

```bash

bower install angular

```

- 使用 NPM 安裝

```bash

npm install angular

```

- 每種方式安裝包，本質都是將angular的庫下載到當前文件夾中

 

### 簡單示例

 

```HTML

 

```

 

- angular中最重要的概念是指令（directive）

 

- ng-model 是雙向數據綁定的指令，效果就是將當前元素的value屬性和模型中的user.name創建綁定關係

 

- JS: BOM DOM ES

 

### 分析 Angular 示例

 

### 使用總結

 

### 運行官方文檔

 

 

## CDN的優點

 

Content Dev

 

- 快

- 節省本身服務器的帶寬壓力和流量

 

 

## Angular 基礎概念

 

### MVC 思想

 

#### 什麼是 MVC 思想

 

- 將應用程序的組成劃分爲三個部分：Model View Controller

- 控制器的做用就是初始化模型用的；

- 模型就是用於存儲數據的

- 視圖用於展示數據

 

 

- 登錄案例

- 模型

+ 咱們數據庫中全部用戶的信息

+ 接受控制器傳來的用戶名和密碼進行校驗的業務邏輯並返回true/false

- 控制器

+ 接受用戶在界面上填寫的用戶名和密碼

+ 將用戶名和密碼交給模型

- 視圖

+ 給用戶呈現一個表單

+ 接受用戶輸入內容，並將其提交給控制器

+ 根據控制器返回的數據，響應用戶頁面

 

 

### 模塊（Module）

 

- 劃分應用程序結構

- 咱們能夠經過angular.module建立一個模塊

- angular.module方法傳遞兩個參數纔是建立模塊，一個參數是獲取模塊

 

### 控制器（Controller）

 

- 經過$scope和視圖關聯

-

 

### 視圖模型（$scope）

 

 

### 表達式（Expression）

 

 

### 單向數據綁定

 

 

### 雙向數據綁定

 

 

## Angular 指令系統