首頁 > web前端 > js教程 > 主體

Angular的新手教學

php中世界最好的语言
發布: 2018-03-12 17:22:49
原創
2141 人瀏覽過

這次帶給大家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(&#39;com.ngnice.app&#39;)
    .directive(&#39;twTitle&#39;,function(){        return {            //作用域
            restrict:&#39;A&#39;,            link:function(scope,element,attrs){
                
            }
        }
    });
登入後複製

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

瞭解 MVVM

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

Angular的新手教學

在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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板