Angular的新手教學

這次帶給大家Angular的新手教程，Angular新手教程的注意事項有哪些，下面就是實戰案例，一起來看一下。

什麼是UI

對於一個使用者介面，它實際上包含三個主要部分：

內容：你想展現哪些訊息？包括動態資訊和靜態資訊。注意，這裡的內容不包括它的格式，例如生日，跟它顯示為紅色還是綠色無關，跟它顯示為年月日無關

外觀：這些資訊要展示為什麼樣子？這包括格式和样式。樣式還包括靜態樣式和動畫效果等。

互動：使用者點擊了加入購物車按鈕時會發生什麼事？還要更新哪些顯示？
在前端技術中，這三個部分分別由三項技術負責：HTML負責描述內容，CSS負責描述外觀，JavaScript負責實現互動。
如果進一步抽象，它們分別對應MVC的三個主要部分：內容-- Model,外觀--- View,交互-- Controller.
對應到angular中的概念，靜態內容--> 對應模板，動態內容--> scope,互動對應--controller，外觀部分複雜點：CSS決定樣子式，過濾器決定格式。

模組

angular.module(abc'') 引用模块abc
angular.module('abc',[]) 定义模块abc

作用域

凡是上級scope擁有的屬性，都可以從下級scope讀取，但是當需要對這些繼承下來的屬性進行寫入的時候，問題就來了：寫入會導致在下級scope上建立一個同名屬性，而不會修改上級scope上的屬性。

展示動態資訊有兩種：

綁定表達式 指令

指令相當於一個自訂的HTML元素，在angular官方稱它為HTML語言的DSL擴充
依照指令的使用場景和作用可以分為兩種類型的指令：元件型和裝飾型。

元件型相當於把一個頁面依功能點拆分成多個模組。

裝飾型指令是為DOM添加行為，使其具有某種能力，如自動聚焦、雙向綁定、可點擊(ngClick)、條件顯示、隱藏(ngShow,ngHide)等能力。同時它也是連結Model和View之間的橋樑，保持view和Model的同步。在angular中的大部分的指令屬於裝飾型指令，它們負責收集和創建$watch,然後利用angular髒檢查機制保持view的同步。

元件型指令

angular.module('com.ngnice.app').directive('jobCategory',function(){    return {
        restrict:'EA',
        scope:{
            configure:'='//独立作用域
        },
        templateUrl:'a.html',        //声明指令的控制器
        controller:function($scope){
            
        }
    }
});

restrict屬性用來表示這個指令的應用方式，它的取值可以是E(元素)、A(屬性)、C(類別名稱)、M （註）這幾個字母的任意組合，工程實務常用的是E、A、EA這三個，對於C、M不建議使用。

scope有三個取值：不指定(undefined)/false/true或一個雜湊物件。
不指定或為false時，表示這個指令不需要一個新的作用域。它直接存取現有的作用域上的屬性和方法，也可以不存取作用域。同一節點上有新作用域或獨立作用域指令，則直接用它，否則直接使用父級作用域。
為true時，表示它需要一個新作用域。
為哈希物件時，表示它需要一個獨立作用域。

{    name:'@',//绑定字面量
    details:'=',//绑定变量
    onUpdate:'&'//绑定事件
}

使用方法如下：

<user-details name=&#39;test&#39; details=&#39;details&#39; on-update=&#39;updateIt(times)&#39;></user-details>

對於元件型指令，更重要的是內容資訊的展示，所以一般不涉及到指令的link函數，而是應該盡可能的將業務邏輯放置在controller。

angular
    .module('com.ngnice.app')
    .directive('twTitle',function(){        return {            //作用域
            restrict:'A',            link:function(scope,element,attrs){
                
            }
        }
    });

裝飾器型指令主要用來加入行為和保持View和Model的同步，所以它不同於元件型指令，我們經常需要進行DOM操作。其restrict屬性通常是A，也就是屬性宣告方式，這比較符合裝飾器的語意：它不是一個內容的主體，而是附加行為能力的連接器。

瞭解 MVVM

$scope可以看作ViewModel，而controller則是裝飾、加工處理這個ViewModel的JavaScript函數。

在angular中MVVM模式主要分為四個部分：

View 它專注於介面的顯示和渲染，在angular中則是包含一堆聲明式directive的視圖模板

ViewModel:它是View和Model的黏合體，負責View和Model的互動與協作，它負責提供View顯示的數據，以及供View操作Model的途徑。在angular中$scope充當了這個ViewModel的角色，ViewModel上有兩種不同來源的數據：一種是展示資訊的業務數據，另一種是描述交互的派生數據，如：表格中的複選框，如果點選全選則會選取所有有清單中的複選框，在這裡就需要一個類似isSelectAll的衍生資料放置在ViewModelh .

Model:它是與業務邏輯相關的資料封裝本體，也就是領域物件。 Model並不在乎自己會如何顯示或操作，也就不應該包含任何與介面顯示有關的邏輯。在web頁面中，大部分Model都是來自ajax的服務端回傳資料或是全域配置物件。 angular中的service正是封裝和處理這些與Model相關的業務邏輯的最佳方式，這些領域物件可以被controller或其他service重複使用。

controller 這並不是MVVM模式中的核心元素，但它負責ViewModel物件的初始化。它將呼叫一個或多個service來取得領域對象，並將結果放在ViewModel對象的初始化。它將呼叫一個或多個service來取得領域對象，並將結果放在ViewModel物件上。這樣，應用程式介面在啟動載入時候，就可以達到一種最初的可用狀態。它可以在ViewModel上加入用於描述互動的行為函數，例如用於回應ng-click事件的addItemToShopCart()

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Node.js的新手教學（二）

Node.js的新手教學（一）

以上是Angular的新手教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！