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

AngularJS入門常見知識總結

巴扎黑
發布: 2017-07-23 15:07:36
原創
1439 人瀏覽過

前言

今天來和大家學習AngularJS…

  AngularJS 透過新的屬性和表達式擴充了HTML。

  AngularJS 可以建立一個單一頁面應用程式。

  AngularJS 學習起來非常簡單。

 

 

#一、AngularJS指令與表達式

【AngularJS常用指令】
1、ng-app:宣告Angular所管轄的區域,一般寫在body或HTML上,原則上一個頁面只有一個。
2、ng-model:把元素值(例如輸入域的值)綁定到應用程式的變數中。
eg:
3、ng-bind:把應用程式變數中的資料綁定到HTML視圖中,可用表達式取代。
eg:


 
等價於
{{name}}

4、ng-init:初始化AngularJS應用程式變數。
eg:
5、表達式:{{} }綁定表達式,可以包含文字,運算子和變數。
但是表達式在網頁載入瞬間會看到{{}},所以可以用ng-bind=""取代。
eg:{{ 5 + "" + 5 + ',Angular' }}

【基本概念】
# #指令:AngularJS中,透過擴充HTML的屬性提供功能。
     所以,ng-開頭的新屬性,被我們成為指示。

 

【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中的MVC中的作用域
#三、AngularJS濾波器
########################################################## ################

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時,啟用。

   是否同意 
#小希真萌!

#########

{{ count }}

#########
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!