#二、AngularJS中的MVC中的作用域 |
【MVC三層架構】
1、model(模型):
應用程式中用來處理資料的部分。 (儲存或修改資料到資料庫、變數等)。 AngularJS中的Model特別指的是:數據。
View(檢視):使用者看到的用於顯示資料的頁面。
Controller(控制器):應用程式中處理使用者互動的部分。負責從視圖讀取數據,控制用戶輸入,並向模型發送數據。
2、工作原理:
使用者從視圖層發出請求,controller接收到請求後轉發給對應的model處理,model處理完成後返回結果給controller,並在View層反饋給用戶.
3、創建一個Angular模組,即ng-app所綁定的部分,需傳遞兩個參數:
①模組名稱:即ng-app所需綁定的名稱,ng-app="myApp"
②陣列:需要注入的模組名稱,不需要可為空。
eg:var app= angular.module("myApp",[]);
在Angular模組上,建立一個控制器Controller,需要傳遞兩個參數。
①Controller名稱,即ng-controller需要綁定的名稱。 ng-controller="myCtrl"
②Controllerd的建構子:建構子可以傳入多個參數,包括$scope/$rootScope以及各種系統內建物件;
#【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上。
########################################################## ################AngularJS中,過濾器可以使用一個管道字元(|)加入到表達式和指令中。
>>>系統內建篩選器:
#currency:格式化數字為貨幣格式。
filter:從陣列項目中選擇一個子集。
lowercase:格式化字串為小寫。
orderBy:根據某個表達式排列陣列。
uppercase:格式化字串為大寫。
eg:
{{"aBcDeF"|uppercase}}
# {{"aBcDeF"|lowercase}}
{{123456|currency}}
###################################################### ## #########【自訂篩選器】#########1 .filter('reverse',function(){ //可以注入依赖2 return function(text){3 if(!angular.isString(text)){4 return "您输入的不是字符串!"5 }else{6 return text.split("").reverse().join("");7 }8 }9 })
登入後複製
###### ###### ############################################################## #############四、AngularJS中的http && select && DOM運算#####################一、AngularJS中的http
$http 是 AngularJS 中的一個核心服務,用於讀取遠端伺服器的資料。
二、AngularJS中的select
#①使用陣列作為資料來源,其中,x表示陣列的每一項。
預設會將x直接綁定到option的value中,而option顯示的內容,由前面的x for...決定。
eg:
②使用物件作為資料來源,其中,(x,y)表示鍵值對,x為鍵,y為值。
預設會將值y綁定到option的value中,而option顯示的內容,由前面的x for...決定。
eg:
三、AngularJS中的DOM操作
①ng-disabled="true/false"
#當傳入true時,控制項停用。傳入false時,啟用。
是否同意
#小希真萌!
##②ng-show
#預設隱藏傳入true時顯示
是否
顯示?
③ng-hide
#預設顯示傳入true是隱藏
是否隱藏?
#④ng-click
定義了AngularJS中的點擊事件。
只能觸發綁定在Angular作用域中的屬性與方法。 ############{{ count }}
#########