Angular 核心概念

時間 2019-11-25

標籤 angular 核心概念欄目 AngularJS 简体版

原文原文鏈接

module（模塊）

做用

經過模塊對頁面進行業務上的劃分,根據不一樣的功能劃分不一樣的模塊。
將重複使用的指令或者過濾器之類的代碼作成模塊，方便複用
注意必須指定第二個參數，不然變成找到已經定義的模塊
- 請參照資料-備課代碼-20-module.html理解

語法

語法： angular.module('模塊名',[])
- 第二個參數是個數組,這個數組裏的每個元素，是咱們當前模塊依賴的其餘模塊
- 注意: 即使咱們不依賴其餘的模塊，也須要傳遞一個空數組
  由於如是不傳第二個參數的話，這個方法的做用就會變爲獲取一個名爲"模塊名"的模塊對象
- angular.module('myApp'),是獲取一個名爲myApp的模塊對象。
- 咱們須要給ng-app指令一個屬性值，這個值就是咱們建立的模塊名:
- 告訴anuglar,如今由咱們本身建立的這個模塊來管理頁面。

controller（控制器）

做用

爲應用中的模型設置初始狀態
經過$scope對象把數據模型或者函數行爲暴露給視圖
監視模型的變化，作出相應的動做
- 請參照資料-備課代碼-24-watch.html理解

語法

控制器是經過模塊對象來建立的:
- 語法:html
```
var app = angular.module('模塊名',[])
app.controller('控制器的名字',function($scope){
  // 在這個function裏寫咱們具體想要執行的代碼
  // $scope 就是用來存儲咱們的數據模型.
})
```
- 咱們須要在頁面上使用了數據模型的元素父級元素上加上ng-controller指令，並給這個指令一個屬性值，這個值就是咱們建立的控制器名字。git

控制器的注入方式

普通的定義控制器

var myModule = angular.module('myModule', []);
myModule.controller('DemoController', function($scope) {
  $scope.user = {
    name: 'world1111'
  };
});

安全的定義控制器（推薦）

angular代碼在壓縮混淆的時候回被替換成特殊字符，這樣就會產生找不到對象的問題
請參照資料-備課代碼-07-controller2.html理解
代碼混淆工具

面向對象的方式定義控制器(擴展)

請參照資料-備課代碼-09-oo-controller.html理解

MVC 思想

什麼是 MVC 思想

將應用程序的組成劃分爲三個部分：Model View Controller
- 模型：數據處理
- 視圖：以友好的方式向用戶展現數據
- 控制器：業務邏輯處理
控制器的做用就是初始化模型用的；
模型就是用於存儲數據的,作一些業務邏輯的操做。
視圖用於展示數據angularjs
請參照資料-圖片-03-富士康MVC類比圖和04-MVC在代碼中的應用理解
請參照資料-備課代碼-22-register.html理解github

用MVC構建應用的優點

剝離開視圖和邏輯之間的關係，不管怎麼修改dom操做都不用修改業務邏輯代碼
請參照資料-備課代碼-23-calc2.html理解

MVC思想總結

是一種設計思想，約定了程序的結構應該是怎樣的，
每個組成原件都有一個明確的職責
提升代碼的結構和可維護性提升

雙向數據綁定

頁面文本框的值改變，致使數據模型的值發生改變，
數據模型的值的改變，反過來致使頁面文本框的值的改變，這種相互影響的關係，咱們起了個名詞，叫做雙向數據綁定。
ng-model = ""

$scope

視圖和控制器之間的數據橋樑
用於在視圖和控制器之間傳遞數據
用來暴露數據模型（數據，行爲）

ViewModel

$scope 實際上就是MVVM中所謂的VM（視圖模型）
正是由於$scope在Angular中大量使用甚至蓋過了C（控制器）的概念，因此不少人（包括我）把Angular稱之爲MVVM框架，這一點卻是無所謂，具體看怎麼用罷了
你們必須掌握的就是如何根據一個原型抽象出對應的視圖模型

表達式

相似於模版引擎的語法express

做用：

使用表達式把數據綁定到 HTML。bootstrap

語法：

表達式寫在雙大括號內：{{ expression }}。
AngularJS 表達式很像 JavaScript 表達式
它們能夠包含文字、運算符和變量
如 {{ 5 + 5 }} 或 {{ firstName + '-' + lastName }}
- 請參照資料-備課代碼-10-expression.html理解

支持的類型

數字 {{ 100 + 100 }}
字符串 {{ 'hello' + 'angular' }}
對象 {{ zhangsan.name }}
數組 {{ students[10] }}

與JS的比較：

相同點：數組

AngularJS 表達式能夠包含字母，操做符，變量。

不一樣點：瀏覽器

AngularJS 表達式能夠寫在 HTML 中。
AngularJS 表達式不支持條件判斷，循環及異常。
AngularJS 表達式支持過濾器。

指令

在 AngularJS 中將前綴爲 ng- 這種屬性稱之爲指令，其做用就是爲 DOM 元素調用方法、定義行爲綁定數據等
簡單說：當一個 Angular 應用啓動，Angular 就會遍歷 DOM 樹來解析 HTML，根據指令不一樣，完成不一樣操做

指令標準屬性的問題

ng-xxx 的屬性自己並非HTML標準中定義的屬性
不少狀況下語法校驗是沒法經過的,可是瀏覽器有容錯性。
HTML5 容許擴展的（自制的）屬性，以 data- 或者x- 開頭。
在 AngularJS 中可使用 data-ng- 來讓網頁對 HTML5 有效。
ng-和data-ng-兩者效果相同。安全
請隨便把example中的ng-app替換爲data-ng-app理解mvc

內置指令

ng-app

ng-app 指令用來標明一個 AngularJS 應用程序
標記在一個 AngularJS 的做用範圍的根對象上
系統執行時會自動的執行根對象範圍內的其餘指令
能夠在同一個頁面建立多個 ng-app 節點（不推薦）
建立多個ng-app時，默認只能執行第一個，後面的須要手動引導：angular.bootstrap()
標記的範圍儘量小，這樣能夠減小遍歷的dom元素，主要爲了性能

自動引導

在angular中一個頁面中只能有一個ng-app指令，這是單頁面應用程序的入口,這屬於自動引導
- 請參照資料-備課代碼-02-module.html理解

手動引導

若是想在一個頁面中使用多個ng-app指令，須要進行手動引導
請參照資料-備課代碼-03-mulit-module.html理解

多模塊使用標準寫法

請參照資料-備課代碼-04--module2.html理解
請參照資料-圖片-01--angular應用結構圖理解

ng-model

用於創建界面上的元素到數據模型屬性的雙向數據綁定
通常狀況綁定到元素的value屬性上
可是在checkbox之類的表單元素會有不一樣

ng-bind

ng-bind和表達式效果相同,不過能防止閃動一下頁面
ng-bind上來是沒有東西的，須要經過viewmodel或者ng-init初始化綁定的值
- 請參照資料-備課代碼-11-directive.html理解

ng-bind-html

能夠把字符串中的html在頁面中直接展現
不過在使用的時候會報不安全問題，缺乏引用的文件，須要引用第三方的包才能實
- 請參照資料-備課代碼-11-directive.html理解
現安全輸出瀏覽器自動也會幫你處理一些安全問題的,不會執行或者輸出不安全的代碼，
你在開發的過程當中要有意識的考慮攻擊問題，想一下輸出的會不會是可執行的代碼，須要編碼後再呈現。
- 請參照資料-備課代碼-12-html-safe.html理解安全問題

ng-repeat

循環輸出頁面內容
- 請參照資料-備課代碼-13-userful-directive.html理解
數據源是數組

var data = [
       /* beautify ignore:start */
       { id: 1, name: '詹三1', age: 118, gender: true },
       { id: 2, name: '詹三2', age: 128, gender: true },
       { id: 3, name: '詹三3', age: 138, gender: true },
       { id: 4, name: '詹三4', age: 148, gender: true },
       { id: 5, name: '詹三5', age: 158, gender: true },
       /* beautify ignore:end */
     ];

<ul ng-controller="MainController">
    <li ng-repeat="item in data">
      <p>
        <span>{{item.id}}</span>
        <span>{{item.name}}</span>
        <span>{{item.age}}</span>
      </p>
    </li>
  </ul>

數據源是對象

var data = {
      /* beautify ignore:start */
      1: { name: '詹三1', age: 11, gender: true },
      2: { name: '詹三2', age: 12, gender: true },
      3: { name: '詹三3', age: 13, gender: true },
      4: { name: '詹三4', age: 14, gender: true },
      5: { name: '詹三5', age: 15, gender: true },
      /* beautify ignore:end */
    };

<ul ng-controller="MainController">
    <li ng-repeat="(id, item) in ps track by $index">
      <p>
        <span>{{id}}</span>
        <span>{{item.name}}</span>
        <span>{{item.age}}</span>
      </p>
    </li>
  </ul>