国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

理解和學習AngularJS（一）

EastWoodYang / 2536人閱讀

摘要：為指令賦值函數名，即可運行。它也是一個對象，指向應用程序作用域內的所有元素和執行上下文。簡而言之，是與指令元素相關聯的當前作用域，可以理解為視圖和控制器間的一個通道。它們被組織為模塊形式，之后可以被另一個引用。

Angularjs

Angular是一款主旋律的MVVM框架，框架和傳統的庫不同：

類庫是一些函數的集合，它能幫助你寫WEB應用。起主導作用的是你的代碼，由你來決定何時使用類庫。類庫有：jQuery等

框架是一種特殊的、已經實現了的WEB應用，你只需要對它填充具體的業務邏輯。這里框架是起主導作用的，由它來根據具體的應用邏輯來調用你的代碼。框架有：knockout等。

Angular.js主要用于構建單頁面web應用，提供了諸如：

1.解耦應用邏輯、數據模型和視圖
2.AJax服務
3.依賴注入
4.瀏覽歷史
5.測試和更多功能

簡要解釋Angularjs就是一個可以給HTML加上互動性的客戶端js框架。我們需要明白如何讓HTML適時調用js。

在Angular中，我們通過指令（Directives）給HTML加上行為。指令是一個在HTML標簽上的標記，用來告訴Angular運行或者引用哪些js代碼。為指令賦值函數名，即可運行。但這不是很好的方式，我們只需明白這就是指令如何綁定行為的

Angular模塊（module）

模塊是指寫Angular應用的代碼片段，這樣可以使代碼分離開來，因此代碼會更好維護，可讀和測試。還可以在module里定義代碼依賴關系，可以調用一個模塊，再在代碼中定義這個模塊依賴于另外兩個。

var app = angular.module("store",[]);//store=>應用名,[]=>定義依賴關系,app為模塊的實例對象

AngularJS允許我們使用angular.module()方法來聲明模塊，這個方法能夠接受兩個參數, 第一個是模塊的名稱，第二個是依賴列表,也就是可以被注入到模塊中的對象列表。

表達式

表達式{{}}允許你動態插入值到你的HTML當中。

控制器（Controller）

控制器幫助我們把應用內的數據信息顯示到頁面中，控制器是通過定義函數和變量，從而定義應用行為的地方。ng-controller定義了AngularJS 應用程序被控制器控制。

ng-controller幫助我們把控制器附屬在html元素上，作為ng-controller屬性的值，我們要寫控制器名字，我們用as關鍵字這個屬性值起個別名。我們將會在元素內的表達式中使用這個別名


    
{{store.product.name}}

    
${{store.product.price}}

    
{{store.product.description}}



(function () {
    var app = angular.module("store",[]);
    app.controller("StoreController", function () {
        this.product = gem;
    });
    var gem = {
        name: "trigkit4",
        price: 2.09,
        description: "..."
    }
})();

這個控制器的范圍權限僅限于它所附屬的元素

指令是觸發javascript函數行為的html標記
模塊是定義應用的各個組成部分
控制器定義應用的行為
表達式控制我們如何將信息顯示在頁面上


ng-app來把應用模塊放到頁面上 
ng-controller來把邏輯控制器放到頁面上
ng-show & ng-hide來通過表達式控制元素的顯示與否
ng-repeat來循環一個數組中所有的數據
過濾器filter

angular提供了很多不同的過濾器，在相似的表示方式下，即取出一些數據，傳遞數據（豎線| 后跟表達式）給相應的過濾器，
有時候也可以給它加上相應的參數

{{data* | filter:option*}}

比如：
uppercase & lowercase

{{"trigkit4" | uppercase}} /*TRIGKIT4*/

還有比如限制過濾器（limitTo filter），可以控制字符的輸出數量：

{{"My dictionary" | limitTo:8}} /*My dicti*/
指令Directives

Angularjs通過指令（directive）擴展HTML的語法，通過通過{{}}進行數據綁定

ng-app

ng-app屬性聲明所有被其包含的內容都屬于這個AngularJS應用, 只有被具有ng-app屬性的DOM元素包含的元素才會受AngularJS影響。如果不寫該指令，angular是不會執行的。

ng-init

ng-init指令初始化應用程序數據，也就是為AngularJS應用程序定義初始值。如下，為應用程序name賦初值：


    {{names}}
ng-model

只需要使用ng-model指令就可以把應用程序數據綁定到HTML元素，實現model和view的雙向綁定。看下面實例：

http://codepen.io/hawx1993/pe...

ng-bind

ng-bind和Angularjs表達式{{}}很類似，不同的是ng-bind是在angular解析渲染完畢后才將數據顯示出來的。還有就是表達式不能寫在DOM元素的屬性里，而指令可以。

http://codepen.io/hawx1993/pe...

ng-click

AngularJS也有自己的HTML事件指令,比如說通過ng-click定義一個AngularJS單擊事件。

http://codepen.io/hawx1993/pe...

ng-hide="true"，設置HTML元素不可見。

ng-controller

控制器在AngularJS中的作用是增強視圖。 當我們在頁面上創建一個新的控制器時，AngularJS會生成并傳遞一個新的$scope給這個控 制器。可以在這個控制器里初始化$scope。

http://codepen.io/hawx1993/pe...

要明確創建一個$scope對象，我們就要給DOM元素安上一個controller對象，使用的是ng-controller 指令屬性。

一般情況下，我們使用控制器做兩件事：

初始化 $scope 對象

為 $scope 對象添加行為（方法）

ng-repeat 

    

        
            

                {{"Name: " + x.name + ",Age: "+ x.age}}
$scope控制范圍

$scope是一個將view（一個DOM元素）連結到controller上的對象。每一個Angular應用都會有一個 $rootScope。這個 $rootScope 是最頂級的scope，它對應著含有 ng-app 指令屬性的那個DOM元素。

它也是一個JavaScript對象，指向應用程序作用域內的所有HTML元素和執行上下文。

所有$scope都遵循原型繼承，這意味著它們都能訪問父$scope，也具有原型鏈那樣的特性，即向上訪問屬性和方法，直到最頂層。

簡而言之，$scope 是與指令元素相關聯的當前作用域，可以理解為視圖和控制器間的一個通道。當angular運行時，所有的$scope對象都會附加或者鏈接到視圖中。

指令和作用域

指令通常不會創建自己的$scope，除了ng-controller和ng-repeat，他們會創建自己的子作用域并將他們附加到DOM元素上。

雙向數據綁定

雙向數據綁定意味著這些表達式會在屬性改變的時候自動改變。當數據發生改變的時候，會使相應的視圖進行改變，當我們的視圖上發生改變的時候，可以促使相應的數據發生改變，這就是雙向的數據綁定到一起了。

雙向數據綁定節省了大量的樣板代碼。Angular 幫助你把構建應用的程序塊劃分為下面這幾種類型：控制器(Controller)，指令(Directive)，工廠(Factory)，過濾器 (Filter)，服務(Service)和視圖(View) (就是模板)。它們被組織為模塊形式，之后可以被另一個引用。

雙向數據綁定：數據模型（Module）和視圖（View）之間的雙向綁定。

雙向數據綁定的優點是無需進行和單向數據綁定的那些CRUD（Create，Retrieve，Update，Delete）操作

雙向數據綁定最經常的應用場景就是表單了，這樣當用戶在前端頁面完成輸入后，不用任何操作，我們就已經拿到了用戶的數據存放到數據模型中了。

依賴注入

依賴注入的意思是 你需要的東西不用由你創建，而是由第三方，或者說容器提供給你的。這樣的設計符合正交性，即所謂的松耦合。

總之就是你不用關心對象的生命周期，什么時候被創建，什么時候銷毀，只需直接使用即可，對象的生命周期由提供 依賴注入的框架來管理。

第一個 AngularJS Web 應用 


todoList demo

http://codepen.io/hawx1993/pe...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91550.html

相關文章

  • 【譯】《精通使用AngularJS開發Web App》（一） --- 相關背景、社區、工具介紹

    摘要：下一篇譯精通使用開發二原版書名第一章之道這一章主要是介紹，包括這個框架以及它背后的項目。幸運的是，擁有一個活躍的，支持度高的社區。另外，社區還為已經存在的工具箱里貢獻了許多有意思的工具。 下一篇：【譯】《精通使用AngularJS開發Web App》（二） 原版書名：Mastering Web Application Development with AngularJS Ch...

    ddongjian0000 評論0 收藏0

  • 【譯】《精通使用AngularJS開發Web App》（四）--- 深入視圖，模板系統，模塊和依賴注

    摘要：模塊和依賴注入細心的讀者可能已經發現了，到目前為止所用到的例子都是使用的全局的構造函數來定義控制器的。這非常的簡單，只需使用如下參數來調用即可控制器的名字字符串類型控制器的構造函數全局定義的控制器構造函數只適用于快速示例和原型開發。 上一篇：【譯】《精通使用AngularJS開發Web App》（三） 下一篇： 書名：Mastering Web Application Develop...

    zr_hebo 評論0 收藏0

  • [ 學習路線 ] 學完這些去阿里！GOGOGO

    摘要：以下知識點是前輩師兄總結基礎語義化標簽引進了一些新的標簽，特別注意等，注意的標題結構理解瀏覽器解析的過程，理解的樹形結構，及相應理解標簽在各個瀏覽器上的默認樣式代理樣式，理解中的重置樣式表的概念理解等功能性標簽理解標簽，理解文件提交過程推薦 以下知識點是前輩師兄總結 1、HTML/HTML5基礎： 1.0、語義化H5標簽1.1、H5引進了一些新的標簽，特別注意article...

    zhaochunqi 評論0 收藏0

  • [ 學習路線 ] 學完這些去阿里！GOGOGO

    摘要：以下知識點是前輩師兄總結基礎語義化標簽引進了一些新的標簽，特別注意等，注意的標題結構理解瀏覽器解析的過程，理解的樹形結構，及相應理解標簽在各個瀏覽器上的默認樣式代理樣式，理解中的重置樣式表的概念理解等功能性標簽理解標簽，理解文件提交過程推薦 以下知識點是前輩師兄總結 1、HTML/HTML5基礎： 1.0、語義化H5標簽1.1、H5引進了一些新的標簽，特別注意article...

    learn_shifeng 評論0 收藏0

  • [譯]學習如何去學習 JavaScript - 5 個你應該如何花在學習 JS 上時間的建議

    摘要：擁抱異步編程縱觀發展史也可以說成開發的發展史，你會發現異步徹底改變了這場游戲。可以這么說，異步編程已成為開發的根基。這也是你應盡早在上投入大量時間的一處核心知識點，這其中包含和等重要概念。這也是最突出的一項貢獻。 原文地址：Medium - Learning How to Learn JavaScript. 5 recommendations on how you should spend ...

    wanglu1209 評論0 收藏0

發表評論

0條評論

EastWoodYang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<