前端MVC學習總結——AngularJS驗證、過濾器

時間 2019-11-08

標籤前端 mvc 學習總結 angularjs 驗證過濾器欄目 AngularJS 简体版

原文原文鏈接

前端MVC學習總結——AngularJS驗證、過濾器

1、驗證

angularJS中提供了許多的驗證指令，能夠輕鬆的實現驗證，只須要在表單元素上添加相應的ng屬性，常見的以下所示：html

<input Type="text" ng-model="" [name=""] [required=""] [ng-required=""] [ng-minlength=""] [ng-maxlength=""][ng-pattern=""][ng-change=""] [ng-trim=""]>前端

表單與表單元素都須要經過name引用，請注意設置name的值。得到錯誤的詳細參數能夠在示例中看到。java

示例代碼：angularjs

<!DOCTYPE html> <!--指定angular管理的範圍--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>驗證</title> </head> <body> <!--指定控制器的做用範圍--> <form ng-controller="Controller1" name="form1"> <p> <label for="username">賬號：</label> <input type="text" id="username" name="username" ng-model="username" ng-required="true" /> <span ng-show="form1.username.$error.required">必填</span> </p> <p> <label for="username">密碼：</label> <input type="text" id="password" name="password" ng-model="password" ng-required="true" ng-pattern="/^[a-z]{6,8}$/" ng-trim="true"/> <span ng-show="form1.password.$error.required">必填</span> <span ng-show="form1.password.$error.pattern">只容許6-8位小寫字母</span> </p> <p> 密碼的值：{{"["+password+"]"}}<br/> 是否合法：form1.password.$valid={{form1.password.$valid}}<br/> 是否非法：form1.password.$invalid={{form1.password.$invalid}}<br/> 錯誤消息：form1.password.$error={{form1.password.$error}}<br/> 是否修改：form1.password.$dirty={{form1.password.$dirty}}<br/> 是否默認：form1.password.$pristine={{form1.password.$pristine}}<br/> </p> <p> 表單信息：<br/> 錯誤消息：form1.$error={{form1.$error}}<br/> 是否合法：form1.$valid={{form1.$valid}}<br/> 是否非法：form1.$invalid={{form1.$invalid}}<br/> </p> <p> <button ng-disabled="form1.$invalid">提交</button> </p> </form> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定義模塊，指定依賴項爲空 var app01 = angular.module("app01", []); //定義控制器，指定控制器的名稱，$scope是全局對象 app01.controller("Controller1", function($scope) { }); </script> </body> </html>

運行結果：express

2、過濾器

使用過濾器格式化數據，變換數據格式，在模板中使用一個插值變量。語法格式以下：json

{{ express | filter:parameter1:p2:p3… | … | …}}bootstrap

過濾器分了內置過濾器與自定義過濾器，過濾器的調用方式也分了在模板中調用與在函數中調用。設計模式

2.一、內置過濾器

常見的內置過濾器有：數組

1)、currency(貨幣)

2)、number(數字)

3)、uppercase , lowercase(大小寫)格式化

4)、json(數據)格式化

5)、limitTo(截取)格式化，數量限制
{{"StringObject" | limitTo : 3}}

6)、date 日期格式化

'yyyy': 4位數字的年份(如AD 1 => 0001, AD 2010 => 2010)
'yy': 2位數字的年份，範圍爲(00-99)。(如AD 2001 => 01, AD 2010 => 10)
'y': 1位數字的年份，例如 (AD 1 => 1, AD 199 => 199)
'MMMM': 月份 (January-December)
'MMM': 月份 (Jan-Dec)
'MM': 月份, padded (01-12)
'M': 月份 (1-12)
'dd': 日，範圍爲(01-31)
'd': 日 (1-31)
'EEEE': 星期,(Sunday-Saturday)
'EEE': 星期, (Sun-Sat)
'HH': 小時, 範圍爲(00-23)
'H': 小時 (0-23)
'hh': am/pm形式的小時, 範圍爲(01-12)
'h': am/pm形式的小時, (1-12)
'mm': 分鐘,範圍爲 (00-59)
'm': 分鐘 (0-59)
'ss': 秒, 範圍爲 (00-59)
's': 秒 (0-59)
'.sss' or ',sss': 毫秒,範圍爲 (000-999)
'a': am/pm 標記
'Z': 4 位數字的時區偏移(+符號)(-1200-+1200)
'ww': ISO-8601 年內的週數 (00-53)
'w': ISO-8601 年內的週數 (0-53)

format 字符串也能夠是如下預約義的本地化格式之一:
'medium': 等於en_US本地化後的 'MMM d, y h:mm:ss a' (如：Sep 3, 2010 12:05:08 pm)
'short': 等於en_US本地化後的 'M/d/yy h:mm a' (如： 9/3/10 12:05 pm)
'fullDate': 等於en_US本地化後的 'EEEE, MMMM d, y' (如： Friday, September 3, 2010)
'longDate': 等於en_US本地化後的 'MMMM d, y' (如： September 3, 2010)
'mediumDate': 等於en_US本地化後的 'MMM d, y' (如： Sep 3, 2010)
'shortDate': 等於en_US本地化後的 'M/d/yy' (如： 9/3/10)
'mediumTime': 等於en_US本地化後的 'h:mm:ss a' (如： 12:05:08 pm)
'shortTime': 等於en_US本地化後的 'h:mm a' (如： 12:05 pm)
format 字符串能夠包含固定值。這須要用單引號括起來 (如： "h 'in the morning'")。若是要輸出單引號，使序列中使用兩個單引號(如： "h 'o''clock'")。

7)、orderBy(排序)格式化

orderBy:'age':reverse
reverse是true表示降序、false表示升序

8)、filter(篩選&過濾)格式化

2.1.一、在模板中使用過濾器

示例代碼：

<!DOCTYPE html> <!--指定angular管理的範圍--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>過濾器</title> </head> <body> <!--指定控制器的做用範圍--> <form ng-controller="Controller1" name="form1"> <p> 貨幣：{{money}} ，{{money|currency}} ，{{money|currency:"￥"}} </p> <p> 數字：{{money|number:1}} ，{{money | number:1 | currency:"$" }} </p> <p> 大寫：{{message|uppercase}} </p> <p> 小寫：{{message|lowercase}} </p> <p> json：{{user | json}} </p> <p> 截取：{{message|limitTo:5|uppercase}} </p> <p> 日期1：{{birthday|date:'yyyy年MM月dd日 HH:mm:ss'}} </p> <p> 日期2：{{birthday|date:'fullDate'}} </p> <p> 排序：{{users|orderBy:'age':true}} </p> </form> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定義模塊，指定依賴項爲空 var app01 = angular.module("app01", []); //定義控制器，指定控制器的名稱，$scope是全局對象  app01.controller("Controller1", function($scope) { $scope.money=1985.678; $scope.message="Hello AngularJS!" $scope.user={name:"rose",age:18}; $scope.birthday=new Date(); $scope.users=[{name:"rose",age:18},{name:"jack",age:19},{name:"tome",age:17}]; }); </script> </body> </html>

運行結果：

2.1.二、在腳本中調用過濾函數

在函數中調用過濾器的方法是：在控制中添加對$filter的依賴，$filter("過濾函數名稱")(被過濾對象,'參數')

示例代碼：

<!DOCTYPE html> <!--指定angular管理的範圍--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>過濾器</title> </head> <body> <!--指定控制器的做用範圍--> <form ng-controller="Controller1" name="form1"> {{money}} <hr/> {{moneyString}} </form> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定義模塊，指定依賴項爲空 var app01 = angular.module("app01", []); //定義控制器，指定控制器的名稱，$scope是全局對象  app01.controller("Controller1", function($scope,$filter) { $scope.money=1985.897; //使用$filter服務查找currency函數，並調用  $scope.moneyString=$filter("currency")($scope.money,'USD$'); }); </script> </body> </html>

運行結果：

2.二、自定義過濾器

示例代碼：

<!DOCTYPE html> <!--指定angular管理的範圍--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>過濾器</title> </head> <body> <!--指定控制器的做用範圍--> <form ng-controller="Controller1" name="form1"> <p> {{"Hello AngularJS and NodeJS" | cutString:15:'...'}} </p> <p> {{longString}} </p> </form> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定義模塊，指定依賴項爲空 var app01 = angular.module("app01", []); //向模塊中添加過濾 //用於裁剪字符，超過長度則截取，添加...  app01.filter("cutString",function(){ return function(srcString,length,addString){ if(srcString.length<length){ return srcString; } return srcString.substring(0,length)+addString; } }); //定義控制器，指定控制器的名稱，$scope是全局對象  app01.controller("Controller1", function($scope,$filter) { $scope.longString=$filter("cutString")("Hello AngularJS and NodeJS",5,":):):)"); }); </script> </body> </html>

運行結果：

練習1：

點擊價格與名稱能夠進行排序，排序時顯示向上或向下的箭頭，在搜索框中能夠輸入查詢條件過濾數據。驗證搜索框中的內容只能是字母與數字，不容許輸入其它類型的字符。

練習2：

請自定義一個過濾器實現敏感關鍵字過濾，在過濾器中能夠準備一個敏感詞數組，將敏感詞替換成指定的符號，默認爲*號。
{{"This is some bad,dark evil text" | censor:"bad,dark,evil":"happy"}}
顯示結果：
This is some happy,happy happy text

3、指令（directive）

指令(directive)是AngularJS模板標記和用於支持的JavaScript代碼的組合。AngularJS指令標記能夠是HTML屬性、元素名稱或者CSS類，指令擴展了HTML的行爲。指令能夠分爲：
a)、內置指令：支持AngularJS功能的指令、擴展表單元素的指令、把做用域綁定到頁面元素的指令
b)、自定義指令，增長與擴展出新的指令。

ng-app這樣的標記咱們稱之爲指令。模板經過指令指示AngularJS進行必要的操做。好比：ng-app指令用來通知AngularJS自動引導應用；ez-clock 指令用來通知AngularJS生成指定的時鐘組件。

3.一、支持AngularJS功能的指令

3.1.一、應用與模塊（ng-app）

自動載入啓動一個AngularJS應用，聲明瞭ng-app的元素會成爲$rootScope的起點
每一個HTML文檔只有一個AngularJS應用能被自動載入啓動,文檔中找到的第一個ngApp將被用於定義自動載入啓動的應用的根元素。要在一個HTML文檔中運行多個應用，你必須使用angular.bootstrap來手工啓動。AngularJS應用間不能嵌套。

3.1.二、控制器（ng-Controller）

ngController指令給視圖添加一個控制器，控制器之間能夠嵌套，內層控制器可使用外層控制器的對象，但反過來不行。這是angular支持基於「視圖-模型-控制器」設計模式原則的主要方面。

Angular中的MVC組件有：
模型 — 模型是一個域的屬性集合；域被附加到DOM上，經過綁定來存取域屬性。
視圖 — 模板(進行數據綁定的HTML)會被呈現到視圖中。
控制器 — ngController指令聲明一個控制器類；該類包含了業務邏輯，在應用後臺使用函數和值來操控域中的屬性。
注意，你也能使用$route服務定義一個路由來將控制器附加到DOM上。一個常見錯誤是在模板上再次使用ng-controller定義一個控制器。這將引發控制器被附加和執行兩次。

3.1.三、包含（ng-Include）

獲取、編譯並引用一個外部HTML片斷(也能夠是內部的)

默認狀況下，模板URL被強制爲使用與應用文檔相同的域名和協議。這是經過調用$sce.getTrustedResourceUrl 實現的。爲了從其它的域名和協議載入模板，你能夠採用白名單化或包裹化任一手段來做爲可信任值。參考 Angular的強上下文轉義。
此外，瀏覽器的同源策略和交叉源資源共享(CORS) 策略會進一步限制模板是否能成功載入。例如，ngInclude 在全部瀏覽器上不能進行交叉域請求，一些瀏覽不能訪問 file:// 等。

內部包含：

<ng-include src="" [onload=""] [autoscroll=""]></ng-include>
<ANY ng-include="" [onload=""] [autoscroll=""]></ANY>
<ANY class="ng-include: ; [onload: ;] [autoscroll: ;]"> </ANY>

外部包含：

3.1.四、不綁定（ngNonBindable）

ngNonBindable指令告訴Angular編譯或綁定當前DOM元素的內容。這對於要求Angular忽略那些元素中包含Angular指令和綁定的狀況下頗有用。這種狀況能讓你的網站實時顯示源碼。

<div>Normal: {{1 + 2}}</div><div ng-non-bindable>Ignored: {{1 + 2}}</div>

3.二、擴展表單元素的指令

3.2.一、ng-options

該指令容許你基於一個迭表明達式添加選項

</select>

3.2.二、ng-class-even與ng-class-odd

AngularJS模板使你能夠把該做用域內的數據直接綁定到所顯示的HTML元素

ng-class-even與ng-class相似，ng-repeat中偶數時應用

ng-class-odd與ng-class相似，ng-repeat中奇數時應用

3.2.三、ng-bind-template

同時綁定多個表達式塊

3.2.四、ng-init

初始化

3.2.五、ng-switch

根據做用域表達式動態切換把那個DOM元素包含在已經編譯的模板中。

3.2.六、ng-value

綁定給定的表達式到input[select]或 input[radio]的值上

<input type="radio" ng-value="'值'" ng-model="radioValue" />{{radioValue}}

3.三、事件

ng-blur 失去焦點
ng-change 改變
ng-checked 被選擇
ng-click 點擊
ng-copy 複製
ng-cut 剪切
ng-dbclick 雙擊
ng-focus 得到焦點
ng-keydown 按下鍵
ng-keyup 按鍵彈起
ng-mousedown 鼠標按下
ng-mouseenter 鼠標進入
ng-mouseleave 鼠標離開
ng-mousemove 鼠標移動
ng-mouseup 鼠標按下後彈起
ng-paste 粘貼
ng-submit 提交
ng-swipe-left 左滑動
ng-swipe-right 右滑動

3.四、其它內置指令

angular中提供了不少的內置指令，還有如：ng-{app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/switch-when/view}

能夠查看幫助文檔得到詳細幫助。

3.五、自定義指令

內置的指令就算再豐富也是有限的，對於特殊的須要能夠選擇自定義指令，自定義指令能夠封裝經常使用操做也便於分享與交流，自定義指令的語法格式以下：

module.directive('指令名稱'，function(){
return {
template:插入指令元素的模板
restrict:容許指令應用的範圍
replace:告訴編譯器用指令模板取代定義該指令的元素
transclude:是否能夠訪問內部做用域之外的做用域
scope:指定內部做用域
link:連接函數
controller:定義控制器來管理指令做用域和視圖
require:指定所須要的其它指令
};
});

restrict：限制指令行爲，容許指令應用的範圍，取值，能夠組合，如AE。

@：使用@（@attribute）來進行單向文本（字符串）綁定
= ：使用=（=attribute）進行雙向綁定變量
& ：使用&來調用父做用域中的函數

3.5.一、第一個自定義指令