AngularJS 模块+表单+验证

AngularJS 模块

<small>模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。


创建模块

<small>你可以通过 AngularJS 的 angular.module 函数来创建模块:</small>

  <div ng-app="myApp">...</div>
  <script>
    var app = angular.module(**"**myApp**"**, []); 
  </script>

"myApp" 参数对应执行应用的 HTML 元素。
现在你可以在 AngularJS 应用中添加控制器,指令,过滤器等。</small>


添加控制器

<small>你可以使用 ng-controller 指令来添加应用的控制器:</small>
AngularJS 实例

<div ng-app="**myApp**" ng-controller=**"myCtrl"******>
  {{ firstName + " " + lastName }}
</div>
<script>
  var app = angular.module(**"myApp"**, []);
  app.controller(**"myCtrl"**, function($scope) {    
    $scope.firstName = "John";    
    $scope.lastName = "Doe";
  });
</script>

尝试一下 »
<small>你可以在 AngularJS 控制器 章节学到更多关于控制器的知识。</small>


添加指令

<small>AngularJS 提供了很多内置的指令,你可以使用它们来为你的应用添加功能。
完整的指令内容可以参阅 AngularJS 参考手册
此外,你可以使用模块来为你应用添加自己的指令:</small>
AngularJS 实例

<div ng-app="myApp" runoob-directive></div>
<script>
  var app = angular.module("myApp", []);
  app.directive("runoobDirective", function() {    
      return {        
          template : "我在指令构造器中创建!"    
      };
  });
</script>

尝试一下 »
<small>你可以在 AngularJS 指令 章节学到更多关于指令的知识。</small>


模块和控制器包含在 JS 文件中

<small>通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。
在以下实例中, "myApp.js" 包含了应用模块的定义程序, "myCtrl.js" 文件包含了控制器:</small>
AngularJS 实例

<!DOCTYPE html>
<html>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <body>

    <div ng-app="**myApp**" ng-controller="**myCtrl**">
      {{ firstName + " " + lastName }}
    </div>

    <script src="**myApp.js**"></script>
    <script src="**myCtrl.js**"></script>
  </body>
</html>

尝试一下 »
myApp.js

var app = angular.module(**"myApp"**, []);

myCtrl.js

app.controller(**"myCtrl"**, function($scope) {    
  $scope.firstName  = "John";    
  $scope.lastName= "Doe";
});

函数会影响到全局命名空间

<small>JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
AngularJS 模块让所有函数的作用域在该模块下,避免了该问题。</small>


什么时候载入库?

<small>在我们的实例中,所有 AngularJS 库都在 HTML 文档的头部载入。

对于 HTML 应用程序,通常建议把所有的脚本都放置在 <body> 元素的最底部。
这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。
在我们的多个 AngularJS 实例中,您将看到 AngularJS 库是在文档的 <head> 区域被加载。
在我们的实例中,AngularJS 在 <head> 元素中被加载,因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 <body> 元素中加载 AngularJS 库,但是必须放置在您的 AngularJS 脚本前面:</small>
AngularJS 实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      {{ firstName + " " + lastName }}
    </div>
    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function($scope) {    
          $scope.firstName = "John";    
          $scope.lastName = "Doe";
      });
    </script>
  </body>
</html>

尝试一下 »



AngularJS 表单

AngularJS 表单是输入控件的集合。

Angularjs-form表单扩展

HTML 控件

<small>以下 HTML input 元素被称为 HTML 控件:</small>

  • input 元素
  • select 元素
  • button 元素
  • textarea 元素

HTML 表单

<small>HTML 表单通常与 HTML 控件同时存在。</small>


AngularJS 表单实例

[点击查看表单实例](http://www.runoob.com/angularjs/angularjs-forms.html)

应用程序代码

<div ng-app="myApp" ng-controller="formCtrl">  
  <form novalidate>    
    First Name:<br>    
    <input type="text" ng-model="user.firstName"><br>    
    Last Name:<br>    
    <input type="text" ng-model="user.lastName">    
    <br><br>    
    <button ng-click="reset()">RESET</button>  
  </form>  
  <p>form = {{user}}</p>  
  <p>master = {{master}}</p>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('formCtrl', function($scope) {    
      $scope.master = {firstName: "John", lastName: "Doe"};    
      $scope.reset = function() {        
          $scope.user = angular.copy($scope.master);    
      };    
      $scope.reset();
  });
</script>

尝试一下 »
novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。


实例解析

<small>ng-app 指令定义了 AngularJS 应用。
ng-controller 指令定义了应用控制器。
ng-model 指令绑定了两个 input 元素到模型的 user 对象。
formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法。
reset() 方法设置了 user 对象等于 master 对象。
ng-click 指令调用了 reset() 方法,且在点击按钮时调用。
novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。</small>



AngularJS 输入验证

<small>AngularJS 表单和控件可以验证输入的数据。

输入验证

在前面的几个章节中,你已经学到关于 AngularJS 表单和控件的知识。
AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。

客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。</small>


应用代码

<!DOCTYPE html>
<html>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <body>

    <h2>Validation Example</h2>

    <form  ng-app="myApp"  ng-controller="validateCtrl" 
      name="myForm" novalidate>

      <p>用户名:<br>  
        <input type="text" name="user" ng-model="user" required>  
        <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">  
          <span ng-show="myForm.user.$error.required">用户名是必须的。</span>  
        </span>
      </p>

      <p>邮箱:<br>  
        <input type="email" name="email" ng-model="email" required>  
        <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">  
          <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>  
          <span ng-show="myForm.email.$error.email">非法的邮箱。</span>  
        </span>
      </p>

      <p>  
        <input type="submit"  
          ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
          myForm.email.$dirty && myForm.email.$invalid">
      </p>
    </form>
    <script>
      var app = angular.module('myApp', []);
      app.controller('validateCtrl', function($scope) {    
        $scope.user = 'John Doe';    
        $scope.email = 'john.doe@gmail.com';
      });
    </script>
  </body>
</html>

尝试一下 »
<small>
HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

实例解析

AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性: useremail
我们使用了 ng-show指令, color:red 在邮件是 $dirty$invalid 才显示。</small>

Paste_Image.png

推荐阅读更多精彩内容

  • ng-model 指令ng-model 指令 绑定 HTML 元素 到应用程序数据。ng-model 指令也可以:...
    壬万er阅读 298评论 0 2
  • AngularJS 简介 AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTM...
    hx永恒之恋阅读 969评论 0 24
  • 简介: AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。 Ang...
    JenniferYe阅读 980评论 0 13
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 582评论 0 3
  • 近半年来一直是先生陪宝贝睡觉,先生发明了一套哄宝贝入睡的方法。 先和她玩疯,玩累,再让她自己在床上选择睡觉的地方。...
    小书童妈妈阅读 106评论 0 1