Angular JS從入門基礎 mvc三層架構經常使用指令

時間 2019-12-09

標籤 angular 入門基礎 mvc 三層架構經常使用指令欄目 AngularJS 简体版

原文原文鏈接

Angular JS從入門基礎 mvc模型經常使用指令前端

★

最近一直在複習AngularJS，它是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。web

　　一、經常使用指令

　　　　AngularJS 經過指令擴展了HTML,且經過表達式綁定數據到 HTML。下面咱們看一下AngularJS中的經常使用指令。

　　　（1）、基本概念

　　　　　　指令：AngularJS中，經過擴展HTML的屬性提供功能。因此，ng-開頭的新屬性，被咱們成爲指令。

　　　（2）、AngularJS經常使用指令

      　　　　　　一、ng-app:聲明Angular所管轄的區域，通常寫在body或HTML上，原則上一個頁面只有一個。 
    

　　　　　　二、ng-model:把元素值（好比輸入域的值）綁定到應用程序的變量中。

　<input type="text" ng-model="name"/>

　　　　　　三、ng-bind:把應用程序變量中的數據綁定到HTML視圖中，可用表達式替代。　　　數據庫

<div id="div1" ng-bind="name"></div><!--等效於--><div id="div1" >{{name}}</div>

　　　　　　四、ng-init:初始化 AngularJS應用程序變量。數組

<body data-ng-app="" ng-init="name=123">

　　　　　　五、表達式：{{}}綁定表達式，能夠包含文字，運算符和變量。架構

　　　　　　可是表達式在網頁加載瞬間會看到{{}}，因此能夠用ng-bind=""替代。

　　　　　　eg:{{ 5 + "" + 5 + ',Angular' }}

　　二、mvc三層架構

　　　　model(模型):應用程序中用於處理數據的部分。（保存或修改數據到數據庫、變量等）。AngularJS中的Model特指的是：數據。mvc

　　　　View(視圖):用戶看到的用於顯示數據的頁面。app

　　　　Controller(控制器):應用程序中處理用戶交互的部分。負責從視圖讀取數據，控制用戶輸入，並向模型發送數據。

　　（1）、工做原理：

　　　　用戶從視圖層發出請求，controller接收到請求後轉發給對應的model處理，model處理完成後返回結果給controller，並在View層反饋給用戶.框架

　　（2）、建立一個Angular模塊

 
     　　　　即ng-app所綁定的部分 ,需傳遞兩個參數： 
    

　　　　　　①模塊名稱：即ng-app所須要綁定的名稱，ng-app="myApp"

　　　　　　②數組：須要注入的模塊名稱，不須要可爲空。

var app= angular.module("myApp",[]);

　　（3）建立一個控制器

　　　　在Angular模塊上，建立一個控制器Controller，須要傳遞兩個參數。

　　　　①Controller名稱，即ng-controller須要綁定的名稱。ng-controller="myCtrl"

　　　　②Controllerd的構造函數：構造函數能夠傳入多個參數，包括$scope/$rootScope以及各類系統內置對象；

　　　　　　說的終究不清楚，看咱們靈魂畫手的圖片你就明白mvc是怎麼回事了模塊化

最後，補充一下AngularJS中的做用域函數

　　　　①$scope：局部做用域，聲明在$scope上的屬性和方法，只能在當前的Controller中使用

　　　　②$rootScope：根做用域，聲明在$rootScope上的屬性和方法，

　　　　能夠在ng-app所包含的任何區域使用（不管是否同Controller，或是否在Controller包含範圍中）

　　　　>>>若沒有使用$scope聲明變量，而直接在HTML中使用ng-model綁定的變量做用域爲：

　　　　一、若是ng-model在某個ng-controller中，則此變量會默認綁定到當前Controller的$scope上;

　　　　二、若是ng-model沒有在任何一個ng-controller中，此變量會綁定到$rootScope上。

本次分享就到這裏

謝謝你們的觀看

以爲不錯請點贊

但願能對你們有所啓發

有更好的方法或不一樣的意見請在留言區跟我交流

相關標籤/搜索

每日一句

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

Angular JS從入門基礎 mvc三層架構 經常使用指令

一、經常使用指令

（1）、基本概念

（2）、AngularJS經常使用指令

二、mvc三層架構

（1）、工做原理：

（2）、建立一個Angular模塊

（3）建立一個控制器

Angular JS從入門基礎 mvc三層架構經常使用指令

　　一、經常使用指令

　　　（1）、基本概念

　　　（2）、AngularJS經常使用指令

　　二、mvc三層架構

　　（1）、工做原理：

　　（2）、建立一個Angular模塊

　　（3）建立一個控制器