你的位置:首页 > Java教程

[Java教程]AngularJS 模块 表单


模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块。

 

应用("myApp") 带有控制器 ("myCtrl"):

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

 

通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

AngularJS 模块让所有函数的作用域在改模块下,避免了该问题。

 

何时载入库

AngularJS 在 <head> 元素中被加载,因为对 angular.module 的调用只能在库加载完成后才能进行。

另一个解决方案是在 <body> 元素中加载 AngularJS 库,但是必须放置在您的 AngularJS 脚本前面:

 

 

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

实例

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

ng-app 指令定义了 AngularJS 应用。

ng-controller 指令定义了应用控制器。

ng-model 指令绑定了两个 input 元素到模型的 user 对象。

formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法。

reset() 方法设置了 user 对象等于 master 对象。

ng-click 指令调用了 reset() 方法,且在点击按钮时调用。