AngularJS入門常見知識總結

前言

今天來和大家學習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:

section>

三、AngularJS中的DOM操作
①ng-disabled="true/false"
#當傳入true時，控制項停用。傳入false時，啟用。

   是否同意 
#小希真萌！

點我! button>

##②ng-show



#預設隱藏傳入true時顯示

是否
       顯示？

點我!> ;

③ng-hide
#預設顯示傳入true是隱藏

是否隱藏？

點我!> ;

#④ng-click
定義了AngularJS中的點擊事件。
只能觸發綁定在Angular作用域中的屬性與方法。 ###點我！ #########

{{ count }}

################

 

DOM操作附录：
eg:
先导入JS文件angular.js！！！

<script></script>

JS代码：

1 angular.module("app",[])2 .controller("ctrl",function($scope,$rootScope){3 $scope.count = 10;4 $scope.func = function(){5 alert("小希真萌！");6 }7 })

 

五、AngularJS中的表单验证

1、表单中常见的验证操作：
$dirty:表单有填写记录
$valid:字段内容合法的
$invalid:字段内容是非法的
$pristine:表单没有填写记录
$error:表单验证不通过的错误信息

2、验证时需给表单及需要验证的input，设置name属性；
给form及input设置name后，会将form表单信息，默认绑定到$scope作用域中，故可以使用formName.inputName.$验证操作 得到验证结果；
eg:
formName.inputName.$dirty="true" 表单被填写过
formName.inputName.$invalid="true" 表单输入不合法
formName.inputName.$error.required="true" 表单必填但未填
$error支持的验证有：required/minlength/maxlength/pattern/email/number/data
/url等……

3、为避免冲突，例如使用type="email"时，H5也会进行验证操作。
如果只想使用AngularJS验证，可以使用

属性，禁用H5自带验证功能。

 

六、AngularJS中的动画 

AngularJS中使用動畫 ：
提供了動畫效果，可以配合 CSS使用。

1、AngularJS 使用動畫需要引入angular-animate.js庫！

2、如果頁面中沒有自訂的模組（ng-app），可以直接綁定係統模組ng-app="ngAnimate";
如果頁面中已有自訂模組，可以在自訂模組後注入"ngAnimate"模組。
eg:angular.module("app",["ngAnimate"])

3、當呼叫相關指令控制元素顯示隱藏時，會自動加入對應的class類別；
ng-show/ng-hide 會移除/新增ng-hide
ng-if/ng-switch/ng- repeat等其他指令，需要分別設定顯示後和隱藏後的class樣式；
顯示後：.ng-enter-active,.ng-leave{}
隱藏後：.ng-enter,.ng-leave-active{}

七、AngularJS中的路由

#

1、載入了實作路由的 js 檔案：angular-route.js。

2、包含了 ngRoute 模組作為主應用模組的依賴模組。
eg:angular.module("app",["ngRoute"])

3.即將超連結改為路有格式：
eg:page1

4.在config中，注入$routeProvider，進行路由設定：
$routeProvider
     .when('/',{template:'這是首頁頁'})
     . when('/page1',{template:'這是page1頁面'})
     .when('/page2',{template:'這是page2頁面'})
#      .when('/page3',{template:'這是page3頁面'})
     .otherwise({redirectTo:'/'});
#})
5、在頁面的適當位置，新增ng-view，用於承載開啟的頁面

【路由參數物件中可選屬性】
1. tempalte：自訂的HTML模板，會載入在ng-view中
2.tempalteUrl:導入外部的HTML模板，為了避免衝突外部的HTML只需要保留body內部的程式碼即可；
3.redirectTo：重定向於某個頁面，一般用於.otherwise()中；
4.controller：在當模板上執行的controller函數，產生新的scope

 

 

## 

##o 

 

今天的理論知識先分享到這裡，願能幫助你~~~小菜鳥一枚，感謝您的支持！  

 

# 

 

#################################### ##########作者：日落希望###出處：###### ####### ###

以上是AngularJS入門常見知識總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！