AngularJS的基礎知識

時間 2019-12-02

原文原文鏈接

1、AngularJS指令與表達式數據庫

【AngularJS經常使用指令】
一、ng-app:聲明Angular所管轄的區域，通常寫在body或HTML上，原則上一個頁面只有一個。
二、ng-model:把元素值（好比輸入域的值）綁定到應用程序的變量中。
eg:<input type="text" ng-model="name"/>
三、ng-bind:把應用程序變量中的數據綁定到HTML視圖中，可用表達式替代。
eg:<div id="div1" ng-bind="name">
</div>等效於<div id="div1" >{{name}}</div>
四、ng-init:初始化 AngularJS應用程序變量。
eg:<body data-ng-app="" ng-init="name=123">
五、表達式：{{}}綁定表達式，能夠包含文字，運算符和變量。
可是表達式在網頁加載瞬間會看到{{}}，因此能夠用ng-bind=""替代。
eg:{{ 5 + "" + 5 + ',Angular' }}數組

【基本概念】
指令：AngularJS中，經過擴展HTML的屬性提供功能。
因此，ng-開頭的新屬性，被咱們成爲指令。服務器

2、AngularJS中的MVC中的做用域架構

【MVC三層架構】
一、model(模型):
應用程序中用於處理數據的部分。（保存或修改數據到數據庫、變量等）。AngularJS中的Model特指的是：數據。
View(視圖):用戶看到的用於顯示數據的頁面。
Controller(控制器):應用程序中處理用戶交互的部分。負責從視圖讀取數據，控制用戶輸入，並向模型發送數據。app

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

三、建立一個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包含範圍中）ui

>>>若沒有使用$scope聲明變量，而直接在HTML中使用ng-model綁定的變量做用域爲：
一、若是ng-model在某個ng-controller中，則此變量會默認綁定到當前Controller的$scope上;
二、若是ng-model沒有在任何一個ng-controller中，此變量會綁定到$rootScope上。url

3、AngularJS過濾器

AngularJS中，過濾器能夠使用一個管道字符（|）添加到表達式和指令中。

>>>系統內置過濾器：
currency:格式化數字爲貨幣格式。
filter:從數組項中選擇一個子集。
lowercase:格式化字符串爲小寫。
orderBy:根據某個表達式排列數組。
uppercase:格式化字符串爲大寫。

eg:
<p>{{"aBcDeF"|uppercase}}</p>
<p>{{"aBcDeF"|lowercase}}</p>
<p>{{123456|currency}}</p>

【自定義過濾器】

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 })

4、AngularJS中的 http && select && DOM操做

1、AngularJS中的http
$http 是 AngularJS 中的一個核心服務，用於讀取遠程服務器的數據。

2、AngularJS中的select
①使用數組做爲數據源，其中，x表示數組的每一項。
默認會將x直接綁定到option的value中，而option顯示的內容，由前面的x for...決定。
eg:
<section ng-model= "name" ng-options="x.site for x in sites"></section>

②使用對象做爲數據源，其中，（x,y）表示鍵值對，x爲鍵，y爲值。
默認會將值y綁定到option的value中，而option顯示的內容，由前面的x for...決定。
eg:
<section ng-model= "name" ng-options="x for (x,y) in sites"></section>

3、AngularJS中的DOM操做
①ng-disabled="true/false"
當傳入true時，控件禁用。傳入false時，啓用。
<label>
<input type="checkbox" ng-model="mySwitch">是否贊成
小希真萌！
</label>
<button ng-disabled="!mySwitch" class="btn btn-primary">點我!</button>
<p></p>

②ng-show
默認隱藏傳入true時顯示
<label>
<input type="checkbox" ng-model="mySwitch1">是否
顯示？
</label>
<button ng-show="mySwitch1" class="btn btn-primary">點我!</button>
<p></p>

③ng-hide
默認顯示傳入true是隱藏
<label>
<input type="checkbox" ng-model="mySwitch2">是否隱藏？
</label>
<button ng-hide="mySwitch2" class="btn btn-primary">點我!</button>
<p></p>

④ng-click
定義了AngularJS中的點擊事件。
只能觸發綁定在Angular做用域中的屬性與方法。
<button ng-click="count = count + 1">點我！</button>
<p>{{ count }}</p>
<button ng-click="func()">說一下感想吧！</button>

DOM操做附錄：
eg:
先導入JS文件angular.js！！！

<script src="libs/angular.js"></script>

JS代碼：

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

5、AngularJS中的表單驗證

一、表單中常見的驗證操做：
$dirty:表單有填寫記錄
$valid:字段內容合法的
$invalid:字段內容是非法的
$pristine:表單沒有填寫記錄
$error:表單驗證不經過的錯誤信息

二、驗證時需給表單及須要驗證的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等……

三、爲避免衝突，例如使用type="email"時，H5也會進行驗證操做。
若是隻想使用AngularJS驗證，能夠使用<form novalidate></form>屬性，禁用H5自帶驗證功能。

6、AngularJS中的動畫

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

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

二、若是頁面中沒有自定義的模塊（ng-app），能夠直接綁定系統模塊ng-app="ngAnimate"；
若是頁面中已有自定義模塊，能夠在自定義模塊後注入"ngAnimate"模塊。
eg:angular.module("app",["ngAnimate"])

三、當調用相關指令控制元素顯示隱藏時，會自動添加對應的class類；
ng-show/ng-hide 會移除/添加ng-hide
ng-if/ng-switch/ng-repeat等其餘指令，須要分別設置顯示後和隱藏後的class樣式；
顯示後：.ng-enter-active,.ng-leave{}
隱藏後：.ng-enter,.ng-leave-active{}

7、AngularJS中的路由

一、載入了實現路由的 js 文件：angular-route.js。

二、包含了 ngRoute 模塊做爲主應用模塊的依賴模塊。
eg:angular.module("app",["ngRoute"])

3.即將超連接改成路有格式：
eg:<a href="#/page1">page1</a>

4.在config中，注入$routeProvider，進行路由配置：
$routeProvider
.when('/',{template:'這是首頁頁面'})
.when('/page1',{template:'這是page1頁面'})
.when('/page2',{template:'這是page2頁面'})
.when('/page3',{template:'這是page3頁面'})
.otherwise({redirectTo:'/'});
})
五、在頁面的合適位置，添加ng-view，用於承載打開的頁面
<div ng-view></div> <ng-view></ng-view>

【路由參數對象中可選屬性】
1.tempalte：自定的HTML模板，會加載在ng-view中
2.tempalteUrl:導入外部的HTML模板，爲了不衝突外部的HTML只須要保留body內部的代碼便可；
3.redirectTo：重定向於某個頁面，通常用於.otherwise()中；
4.controller：在當模板上執行的controller函數，生成新的scope

相關標籤/搜索

每日一句

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