angular總結控制器的三種主要職責：爲應用中的模型設置初始狀態經過$scope對象把數據模型或函數行爲暴露給視圖監視模型的變化，作出相應的動做

時間 2019-11-08

標籤 angular 總結控制器三種主要職責應用模型設置初始狀態經過 scope 對象數據函數行爲暴露視圖監視變化作出相應欄目 AngularJS 简体版

原文原文鏈接

m1.雙向數據綁定：html

<body>
  <div ng-app ng-init="user.name='world'">
    <h1>使用NG實現雙邊數據綁定</h1>
    <input type="text"
      placeholder="請輸入你的姓名"
      ng-model="user.name">
    <p>hello <strong>{{user.name}}</strong></p>
  </div>
  <script src="bower_components/angular/angular.js"></script>
</body>

1   // // 用A連接對象解析url的組成
2       // var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name';
3       // var aLink = window.document.createElement('a');
4       // aLink.href = url;
5       // // console.log(aLink);
6       // console.log(aLink.search);
7       // console.log(aLink.hash);
8 
9       // JSON就是用字符串描述對象的方式

爲何使用angular前端

mvc思想：git

$SCOPE的做用：angularjs

表達式的做用：github

angular與js的對比：數據庫

## 推薦工具npm

- 在線編輯器
+ http://codepen.io/
+ https://jsfiddle.net/api

## Angular 簡介數組

### 什麼是 AngularJSbash

- 一款很是優秀的前端高級 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 指令系統

1 <ul class="messages">
2     <li ng-repeat="item in messages track by $index" ng-class="{red:item.read}">
3         {{item.content}}
4     </li>
5 </ul>

1 <ul class="messages">
2     <li ng-repeat="item in messages track by $index" ng-show="item.read">
3         {{item.content}}
4     </li>
5 </ul>

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="HelloApp">
 3 
 4 <head>
 5   <meta charset="utf-8">
 6 </head>
 7 
 8 <body>
 9   <table border="1" ng-controller="WorldController">
10     <tr>
11       <td>用戶名</td>
12       <td>
13         <input type="text" ng-model="user.username">
14       </td>
15     </tr>
16     <tr>
17       <td>密碼</td>
18       <td>
19         <input type="password" ng-model="user.password">
20       </td>
21     </tr>
22     <tr>
23       <td></td>
24       <td>
25         <input type="button" ng-click="login()" value="登錄">
26       </td>
27     </tr>
28     <tr>
29       <td></td>
30       <td>{{message}}</td>
31     </tr>
32   </table>
33   <script src="bower_components/angular/angular.js"></script>
34   <script>
35     // 建立一個模塊
36     var app = angular.module('HelloApp', []);
37     // 爲這個模塊建立一個控制器
38     app.controller('WorldController', ['$scope', function($scope) {
39 
40       // 數據
41       $scope.user = {
42         username: '',
43         password: ''
44       };
45       $scope.demo = '';
46 
47       // 行爲數據
48       $scope.login = function() {
49         // 由於數據的變化時雙向的同步，因此界面上的值變化會同步到$scope.user上
50         console.log($scope.user);
51       };
52 
53 
54       // 請輸入用戶名  輸入格式不合法
55       $scope.message = '請輸入用戶名';
56       // $scope.message取決於$scope.user
57 
58       // 官方的API中提供了一個$scope.$watch方法，
59       $scope.$watch('user.username', function(now, old) {
60         // 當user.username發生變化時觸發這個函數
61         // console.log('now is ' + now);
62         // console.log('old is ' + old);
63         if (now) {
64           if (now.length < 7) {
65             $scope.message = '輸入格式不合法';
66           } else {
67             $scope.message = '';
68           }
69         } else {
70           $scope.message = '請輸入用戶名';
71         }
72       });
73 
74       // angular 基本不用操做DOM，若是必要，可使用angular提供的jqlite
75       //
76       // angular.element('body')
77     }]);
78   </script>
79 </body>
80 
81 </html>

控制器：

 1 <script>
 2     // 因爲控制器是必須出如今某個模塊下的，想建立一個控制器必須先建立模塊
 3     var module = angular.module('myModule', []); // 返回的就是模塊對象
 4 
 5     // angular在執行控制器函數時，
 6     // 會根據參數的名字（$scope）去自動的注入對象
 7     // 根據參數名稱傳遞對應對象，因此必需要寫正確的參數名稱
 8     // module.controller('HelloController', function($scope) {
 9     //   console.log($scope);
10     // });
11     //
12     // 因爲壓縮代碼會改變參數名稱，註冊控制的標準方式就是經過第二個參數傳遞數組的方式（數組的成員最後一個就是本來的控制器函數，前面的成員都是須要注入的對象名稱）
13     module.controller('HelloController', ['$scope','$http', function(a,b) {
14       console.log(a);
15     }]);
16   </script>

模塊：

 1 <body>
 2   <div ng-app="myApp" ng-controller="DemoController">
 3     <h1>使用NG實現雙邊數據綁定</h1>
 4     <input type="text" placeholder="請輸入你的姓名" ng-model="user.name">
 5     <p>hello <strong>{{user.name}}</strong></p>
 6     <input type="button" ng-click="show()">
 7   </div>
 8   <script src="bower_components/angular/angular.js"></script>
 9   <script>
10     // 註冊模塊 經過module函數，
11     // 第一個參數是這個模塊的名字
12     // !!! 第二個參數是這個模塊所依賴的模塊, 若是不依賴任何模塊也必須傳遞第二個參數，若是沒有傳遞第二個參數，angular.module就不是建立一個模塊
13     // angular.module 返回 剛剛建立的模塊對象
14    var app=  angular.module('myApp',[]);
15     // app.controller 方法用於建立一個控制器，所建立的控制器屬於myApp模塊
16     // app.controller('DemoCtrl');
17     // 控制器函數的參數中有一個$scope
18     // angular.module('myApp').controller('DemoController', function($scope) {
19     //   // 當控制器執行時會自動執行的函數
20     //   $scope.user = {};
21     //   $scope.user.name = '張三';
22     //   // $scope不單單能夠往視圖中暴露數據，還能夠暴露行爲
23     //   $scope.show = function() {
24     //     console.log($scope.user);
25     //   };
26     // });
27   </script>
28 </body>