前端MVC學習總結——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(貨幣)

{{123.456 | currency:'¥'}}

2)、number(數字)

{{12.235| number:2}}

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

{{"Hello"| uppercase}}

4)、json(數據)格式化

{{userObject| json}}

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

6)、date 日期格式化

{{name | date : 'yyyy-MM-dd hh:mm:ss'}}

'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(篩選&過濾)格式化

{{name | filter : 'l' | json}}

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 ng-model="color" ng-options="c.name for c in colors">

<option>--請選擇--</option>

</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中奇數時應用

<p ng-repeat="a in animals" ng-class-odd="'odd'" ng-class-even="'even'">
{{a.name}}
</p>

3.2.三、ng-bind-template

同時綁定多個表達式塊

<p ng-bind-template="{{student1}} and {{student2}}"></p>

3.2.四、ng-init

初始化

<p ng-init="test=1" ng-repeat="a in animals">
{{a.name}} {{a.id+test}}
</p>

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.一、第一個自定義指令

 

 

 

 

 

 

 

 

 

 

 

 

分類: 前端
相關文章
相關標籤/搜索