歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> AngularJS 1.3 提升了 HTML 表單

AngularJS 1.3 提升了 HTML 表單

日期:2017/3/1 9:39:07   编辑:Linux編程

即將到來的 AngularJS 1.3 版本會放出對提升表單數據操作的重點關注. 而這次的版本解決了一些真正的痛點,對於一些開發者而言,這次的版本可能不是一次自動升級(言下之意就是需要開發者自己做一些額外的事情).

AngularJS 團隊推出1.3版的候選版本。在一份 Google+ 貼子 上 Angular 團隊寫到:

1.3版的大多數API已經做出了裁定,而接下來版本一直到1.3.0穩定版將會修復遺留的bug.

1.3 的一些特性如下:

  • 新的驗證器管道

  • 異步的自定義驗證器

  • 模型數據綁定選項

  • 用於錯誤消息重用的 ngMessages 模塊

  • 對一次性數據綁定的支持

最新版為開發者提供了創建自定義驗證器的新方法, 去除了對使用轉換和格式化裝置的需求. 為了在1.3中創建一個自定義的驗證器,開發者必須在新的$validators管道上注冊這個驗證器並返回true或者false:

ngModule.directive('validateLessthanfive', function() { return { require : 'ngModel', link : function($scope, element, attrs, ngModel) { ngModel.$validators.lessthanFive = function(value) { return (value < 5); }; } } });

Matias Niemela是一名Angular貢獻者,他寫了一篇文章 概述了新的表單特性 包括為提供基於服務器的驗證創建異步驗證器的新功能. Matias 同時也指出了對HTML5驗證器的提升:

現在所有的 HTML5 驗證屬性都被綁定到ngModel,它們的錯誤消息都注冊到了 ngModel.$error

Angular 團隊在版本1.3中引入了重大的修改,一些開發者抱怨這次重大修改應該要帶來一次主版本的更新(比如. 版本 2.0). 在最近的一次 GitHub 評論上 Chad Moran(Woot的軟件開發經理)警告道:

做出重點修改卻不提升主版本號,很有可能給用戶帶來很多的痛苦.

潛在的會影響到企業開發者的變化就是1.3版不再支持IE8. 自從 Angular 團隊在它們 2013年12月的博客上 公布了這個事情,開發者已經發出了大量的警告. 這個修改的背後的部分原因是 1.3 只支持 jQuery 2.1 或者以上版本,而jQuery在版本2.x去掉了對IE8的支持.

在Angular的早期版本中,顯示表單驗證錯誤消息就是結合 ng-if 指令和許多布爾邏輯來在對的時間展示恰當的錯誤消息,這樣的操作. 版本1.3引入了 ngMessages 模塊,作為一種處理復雜驗證錯誤消息的升級方式. 下面是來自 yearofmoo.com 博客文章 的有關這個新語法的示例:

<form name="myForm"> <input type="text" name="colorCode" ng-model="data.colorCode" minlength="6" required /> <div ng-messages="myForm.colorCode.$error" ng-if="myForm.$submitted || myForm.colorCode.$touched"> <div ng-message="required">...</div> <div ng-message="minlength">...</div> <div ng-message="pattern">...</div> </div> </form>

據Niemela所述, 不僅在於減少了代碼的行數,新的ng-message模塊將”解決一條錯誤消息在另外一條錯誤消息之前顯示的復雜性"。

目前還不清楚1.3.0何時會達成一個穩定版本,而對版本1.2而言,有三個候選版本擴散了超過三個月的時間. 目前已經有三個針對1.3的候選版本擴散了三個星期. 版本 1.3 之上就是 2.0, 根據Angular團隊的一片帖子,這一版本將會專注於讓Angular成為一個"用於移動應用的框架".

AngularJS 是由谷歌贊助的一個JavaScript框架。

希望你喜歡,並分享我的工作~帶你走近AngularJS系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的詳細介紹:請點這裡
AngularJS 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved