標籤：產品 img ica http 方法 div 入門基礎 常用 center
Angular JS從入門基礎 mvc模型 常用指令
★
最近一直在複習AngularJS，它是一款優秀的前端JS架構，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVC、模組化、自動化雙向資料繫結、語義化標籤、依賴注入等等。
1、常用指令 AngularJS 通過指令擴充了HTML,且通過運算式綁定資料到 HTML。下面我們看一下AngularJS中的常用指令。 （1）、基本概念 指令：AngularJS中，通過擴充HTML的屬性提供功能。所以，ng-開頭的新屬性，被我們成為指令。 （2）、AngularJS常用指令1、ng-app:聲明Angular所管轄的地區，一般寫在body或HTML上，原則上一個頁面只有一個。 2、ng-model:把元素值（比如輸入欄位的值）綁定到應用程式的變數中。
<input type="text" ng-model="name"/>
3、ng-bind:把應用程式變數中的資料繫結到HTML視圖中，可用運算式替代。
<div id="div1" ng-bind="name"></div><!--等效於--><div id="div1" >{{name}}</div>
4、ng-init:初始化 AngularJS應用程式變數。
<body data-ng-app="" ng-init="name=123">
5、運算式：{{}}綁定運算式，可以包含文字，運算子和變數。
但是運算式在網頁載入瞬間會看到{{}}，所以可以用ng-bind=""替代。 eg:{{ 5 + "" + 5 + ‘,Angular‘ }}2、mvc三層架構
model(模型):應用程式中用於處理資料的部分。（儲存或修改資料到資料庫、變數等）。AngularJS中的Model特指的是：資料。
View(視圖):使用者看到的用於顯示資料的頁面。
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綁定的變數範圍為： 1、如果ng-model在某個ng-controller中，則此變數會預設綁定到當前Controller的$scope上; 2、如果ng-model沒有在任何一個ng-controller中，此變數會綁定到$rootScope上。
本次分享就到這裡
謝謝大家的觀看
覺得不錯請點贊希望能對大家有所啟發
有更好的方法或不同的意見請在留言區跟我交流
Angular JS從入門基礎 mvc三層架構 常用指令
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
