AngularJS基本使用

時間 2019-11-08

標籤 angularjs 基本使用欄目 AngularJS 简体版

原文原文鏈接

簡介

AngularJS是Google開源的前端JS結構化框架
Angular關注的是動態展現頁面數據, 並與用戶進行交互。其主體再也不是DOM，而是頁面中的動態數據
AngularJS特性(優勢)
- 雙向數據綁定
- 聲明式依賴注入
- 解耦應用邏輯, 數據模型和視圖
- 完善的頁面指令
- 定製表單驗證
- Ajax封裝
Angular應用舉例
- 餓了嗎: https://www.ele.me/home/
- 微信網頁版: https://wx.qq.com/
- 知乎週報: https://zhuanlan.zhihu.com/Weekly
- 後臺管理應用: 阿里雲, 土豆後臺, 惟品會...

概念

做用域對象
- 一個js實例對象，ng-app指令默認會建立一個根做用域對象($rootScope)
- 它的屬性和方法與頁面中的指令或表達式是關聯的
控制器對象
- 用來控制AngularJS應用數據的實例對象
- ng-controller：指定控制器構造函數，Angular會自動new此函數建立控制器對象
- 同時Angular還會建立一個新的做用域對象$scope，它是$rootScope的子對象
- 在控制器函數中聲明$scope形參，Angular會自動將$scope傳入
數據綁定：數據從一個地方A轉移(傳遞)到另外一個地方B, 並且這個操做由框架來完成
視圖(View)：也就是咱們的頁面(在Angular主要是Angular指令和表達式)
模型(Model) : 域對象(在Angular爲$rootScope), 它能夠包含一些屬性或方法
雙向數據綁定
- 數據能夠從View流向Model, 也能夠從Model流向View
- 當改變View中的數據, Model對象的對應屬性也會隨之改變
- 當Model域對象的屬性發生改變時, 頁面對應數據隨之更新
- 在Angular中ng-model是雙向數據綁定, 而{{}}是單向數據綁定
依賴對象
- 完成某個特定的功能須要某個對象才能實現，這個對象就是依賴對象
依賴注入(DI)
- 依賴的對象以形參的形式被注入進來使用，這種方式就是聲明式依賴注入
- 定義函數時, 使用形參聲明依賴對象變量, 在函數體中使用依賴對象
- 函數調用時, 自動將建立好的依賴對象動態傳入(框架實現)
  - 例: 事件監聽(如click)就使用了依賴注入, event就是依賴對象(event能夠是任意名稱)
- 依賴注入指依賴對象被別人(調用者)自動注入進入
  - angular的$scope對象就是依賴對象，而且是依賴注入的形式進行使用
  - 回調函數有形參就是依賴注入
依賴對象：完成特定功能的函數須要某個對象才能實現, 這個對象就是依賴對象
- 引入依賴對象的方式：
  - 方式一: 內部本身建立 --- 不動態
  - 方式二: 全局變量 --- 污染全局命名空間
  - 方式三: 形參引入依賴 --- 依賴注入使用的方式
- Angular中的依賴注入要求形參必須是特定的名稱, 不然Angular沒法注入拋異常
開發的兩種方式
- 命令式
  - 更加註重執行的過程
  - 更像考試的解答題
- 聲明式
  - 更加註重執行的結果
  - 聲明式是對命令的局部包裝
  - 更像選擇或者填空題

MVC模式

MVC的全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，是一種軟件設計典範。它是用一種業務邏輯、數據與界面顯示分離的方法來組織代碼，將衆多的業務邏輯彙集到一個部件裏面，在須要改進和個性化定製界面及用戶交互的同時，不須要從新編寫業務邏輯，達到減小編碼的時間。
M是指業務模型，V是指用戶界面，C則是控制器。
用戶首先在界面中進行人機交互，而後請求發送到控制器，控制器根據請求類型和請求的指令發送到相應的模型，模型能夠與數據庫進行交互，進行增刪改查操做，完成以後，根據業務的邏輯選擇相應的視圖進行顯示，此時用戶得到這次交互的反饋信息，用戶能夠進行下一步交互，如此循環。 html
模型Model：存儲數據的實體模型，操做數據的業務模型前端
視圖View：顯示數據，響應用戶操做, 與用戶進行交互數據庫
控制器Controller：操做模型數據, 更新視圖，是View與Model之間的橋樑
express

angular中的MVC

View視圖
- 顯示Model的數據
- 將數據同步到Model
- 與用戶交互
Model模型
- scope
- 儲存數據的容器
- 提供操做數據的方法
Controller控制器
- 初始化Model數據
- 爲Model添加行爲方法

M-V-VM模式

MVVM是MVC的進化版, Angular使用的就是M-V-VM
在angular中MVVM模式主要分爲四部分：
- View：它專一於界面的顯示和渲染，在angular中則是包含一堆聲明式Directive的視圖模板。
  - 與用戶交互
  - 顯示VM中的數據
- Model：它是與應用程序的業務邏輯相關的數據的封裝載體，它是業務領域的對象，Model並不關心會被如何顯示或操做，因此模型也不會包含任何界面顯示相關的邏輯。也就是Angular中的Service
  - scope中的各個數據對象
  - 數據模型
- ViewModel：它是View和Model的粘合體，負責View和Model的交互和協做，它負責給View提供顯示的數據，以及提供了View中Command事件操做Model的途徑；也就是Angular中的scope
  - scope對象
  - View和Model的交互和協做
  - 給View提供顯示的數據
  - 提供了View中Command事件操做Model的途徑
- Controller：這並非MVVM模式的核心元素，但它負責ViewModel對象的初始化，它將組合一個或者多個service來獲取業務領域Model放在ViewModel對象上，使得應用界面在啓動加載的時候達到一種可用的狀態。

做用域(scope)

一個js實例對象, ng-app指令默認會建立一個根做用域對象($rootScope)
它的屬性和方法與頁面中的指令或表達式是關聯的

控制器(controller)

ng-controller : 指定控制器構造函數, Angular會自動new此函數建立控制器對象
同時Angular還有建立一個新的域對象$scope, 它是$rootScope的子對象
在控制器函數中聲明$scope形參, Angular會自動將$scope傳入

例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>Document</title>
 8 </head>
 9 <body ng-app="myApp">
10   <!-- ng-app 的值指向對應的模塊對象的名字 -->
11   <div ng-controller="myController">
12       <input type="text" ng-model="firstName">
13       <p>員工1：{{firstName}}</p>
14       
15   </div>
16   <div ng-controller="myController2">
17       <input type="text" ng-model="firstName">
18       <p>員工2：{{firstName}}</p>
19   </div>
20 
21   <script src="../js/angular-1.5.5/angular.js"></script>
22   <script>
23     // 控制器的使用 angular 能夠鏈式調用
24     angular.module('myApp',[]) 
25     .controller('myController',['$scope', function ($scope) { // 顯示聲明依賴注入
26       $scope.firstName = 111;
27     }])
28     .controller('myController2',['$scope', function ($scope) {
29       $scope.firstName = 222;
30     }])
31 
32   </script>
33 </body>
34 </html>

View Code

模塊(module)

建立模塊對象
- 用全局變量angular對象
使用模塊對象
- 定義控制器
- 定義服務
- 定義指令

語法

表達式

使用Angular表達式
- 語法: {{expression}}
- 做用: 顯示錶達式的結果數據
- 注意: 表達式中引用的變量必須是當前域對象全部的屬性(包括其原型屬性)
Angular表達式操做的數據
- 基本類型數據: number/string/boolean
- undefined, Infinity, NaN, null解析爲空串: "", 不顯示任何效果
- 對象的屬性或方法
- 數組
比較Angular表達與JS的表達式
- Angular表達式寫法與JS的表達式類同
- 與JS表達式不一樣的是，AngularJS 表達式能夠寫在HTML中。
- 與JS表達式不一樣，AngularJS 表達式不支持條件判斷，循環及異常。
- 與JS表達式不一樣，AngularJS 表達式支持過濾器

指令

指令
- Angular爲HTML頁面擴展的屬性,標籤
- 與Angular的Model交互,擴展頁面的動態表現力
經常使用指令
- ng-app
  - 告訴angular核心，它管理當前標籤所包含的整個區域，而且會自動建立 $rootScope(根做用域對象)
  - ng-app的值指向對應的模塊對象的名字
  - 例：
```
<body ng-app="myApp"></body>
```
- ng-model
  - 雙向綁定，將當前輸入框的值與誰關聯(屬性名:屬性值),並做爲當前做用於對象($rootScope)的屬性
  - 例：
```
<input type="text" ng-model="username">
<p>您輸入的內容是：<span>{{username}}</span></p>
```
- ng-init
  - 用於初始化當前做用域變量
  - 例：
```
<div ng-app ng-init="username='Tom'">
    <input type="text" ng-model="username">
    <p>姓名1:{{username}}</p>
    <input type="text"  ng-model="username">
    <p>姓名2:{{username}}</p>
</div>
```
- ng-click
  - 調用做用域對象的方法（點擊時）
- ng-controller
  - 指定控制器構造函數名，內部會自動建立一個新的子做用域
- ng-bind
  - 解決使用{{}}顯示數據閃屏問題
- ng-repeat
  - 遍歷數組顯示數據，數組有幾個元素就會產生幾個新的做用域
  - $index：當前做用域索引
  - $first：布爾值，判斷當前做用域是否爲第一個
  - $last：布爾值，判斷當前做用域是否爲最後一個
  - $middle：布爾值，判斷當前做用域是否在中間，只要不是一個或最後一個值爲true
  - $odd：布爾值，當前做用域的索引是否爲奇數
  - $even：布爾值，當前做用域的索引是否爲偶數
- ng-show
  - 布爾類型，若是爲true才顯示
- ng-hide
  - 布爾類型，若是爲true就隱藏
- ng-class
  - 動態引用定義的樣式{aClass:true, bClass:false}
- ng-style
  - 動態引用經過js指定的樣式對象 {color:'red', background:'blue'}
- ng-click
  - 點擊監聽，值爲函數調用，能夠傳$event
- ng-mouseenter
  - 鼠標移入監聽，值爲函數調用，能夠傳$event
- ng-mouseleave
  - 鼠標移出監聽，值爲函數調用，能夠傳$event
  - 例：
```
<div style="width: 200px;height: 200px;" ng-style="myStyle" ng-mouseenter="enter()" ng-mouseleave="outer()"></div>
```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。