angularjs模块 angularjs模块|AngularJS教程

本文概述

如何创建一个模块
如何将控制器添加到模块
如何向模块添加指令
如何添加指令
文件中的模块和控制器

在AngularJS中，模块定义了一个应用程序。它是应用程序不同部分（如控制器，服务，过滤器，指令等）的容器。
模块用作Main（）方法。控制器始终属于模块。
如何创建一个模块角度对象的module（）方法用于创建模块。它也被称为AngularJS函数angular.module

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

在这里，“ myApp”指定了将在其中运行应用程序的HTML元素。
现在，我们可以向AngularJS应用程序添加控制器，指令，过滤器等。
如何将控制器添加到模块如果要向应用程序中添加控制器，请使用ng-controller指令引用该控制器。
请参阅以下示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} < /div> < script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "Ajeet"; $scope.lastName = "Maurya"; }); < /script> < /body> < /html>

如何向模块添加指令AnglarJS指令用于向你的应用程序添加功能。你也可以为应用程序添加自己的指令。
以下是AngularJS指令的列表：

指示	描述
ng-app	它定义了应用程序的根元素。
ng-bind	它将html元素的内容绑定到应用程序数据。
ng-bind-html	它将html元素的innerhtml绑定到应用程序数据, 并且还从html字符串中删除了危险代码。
ng-bind-template	它指定文本内容应替换为模板。
ng-blur	它指定模糊事件的行为。
ng-change	它指定一个表达式, 以评估用户何时更改内容。
ng-checked	它指定是否检查元素。
ng-class	它在html元素上指定css类。
ng-class-even	它与ng-class相同, 但仅对偶数行有效。
ng-class-odd	与ng-class相同, 但仅对奇数行有效。
ng-click	它指定一个表达式, 以在单击元素时求值。
ng-cloak	防止在加载应用程序时闪烁。
ng-controller	它定义了应用程序的控制器对象。
ng-copy	它指定复制事件的行为。
ng-csp	它更改了内容安全策略。
ng-cut	它指定剪切事件的行为。
ng-dblclick	它指定双击事件的行为。
ng-disabled	它指定一个元素是否被禁用。
ng-focus	它指定了焦点事件的行为。
ng-form	它指定一个HTML表单来继承控件。
ng-hide	隐藏或显示html元素。
ng-href	它指定< a> 元素的URL。
ng-if	如果条件为假, 它将删除html元素。
ng-include	它在应用程序中包含html。
ng-init	它定义了应用程序的初始值。
ng-jq	它指定应用程序必须使用jQuery之类的库。
ng-keydown	它指定按键事件的行为。
ng-keypress	它指定按键事件的行为。
ng-keyup	它指定了keyup事件的行为。
ng-list	它将文本转换为列表（数组）。
ng-model	它将html控件的值绑定到应用程序数据。
ng-model-options	它指定如何完成模型中的更新。
ng-mousedown	它指定有关mousedown事件的行为。
ng-mouseenter	它指定了mouseenter事件的行为。
ng-mouseleave	它指定了mouseleave事件的行为。
ng-mousemove	它指定了mousemove事件的行为。
ng-mouseover	它指定鼠标悬停事件的行为。
ng-mouseup	它指定了mouseup事件的行为。
ng-non-bindable	它指定在此元素或其子元素中不能进行任何数据绑定。
ng-open	它指定元素的open属性。
ng-options	它在< 选择> 列表中指定< 选项> 。
ng-paste	它指定粘贴事件的行为。
ng-pluralize	它指定了一条消息, 该消息将根据使用中的本地化规则显示。
ng-readonly	它指定元素的只读属性。
ng-repeat	它为集合中的每个数据定义模板。
ng-required	它指定元素的必需属性。
ng-selected	它指定元素的选定属性。
ng-show	它显示或隐藏html元素。
ng-src	它为< img> 元素指定src属性。
ng-srcset	它为< img> 元素指定srcset属性。
ng-style	它指定元素的样式属性。
ng-submit	它指定在onsubmit事件上运行的表达式。
ng-switch	它指定将用于显示/隐藏子元素的条件。
ng-transclude	它指定一个插入被插入元素的点。
ng-value	它指定输入元素的值。

如何添加指令请参阅以下示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body>< div ng-app="myApp" w3-test-directive>< /div> < script> var app = angular.module("myApp", []); app.directive("w3TestDirective", function() { return { template : "This is a directive constructor. " }; }); < /script> < /body> < /html>

文件中的模块和控制器在AngularJS应用程序中，你可以将模块和控制器放在JavaScript文件中。
在此示例中，“ myApp.js”包含应用程序模块定义，而“ myCtrl.js”包含控制器：
请参阅以下示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < script src="http://www.srcmini.com/myApp.js">< /script> < script src="http://www.srcmini.com/myCtrl.js">< /script> < /body> < /html>

这里的“ myApp.js”包含：

app.controller("myCtrl", function($scope) { $scope.firstName = "Ajeet"; $scope.lastName= "Maurya"; });

这里的“ myCtrl.js”包含：

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

【angularjs模块】这个例子也可以写成：

< !DOCTYPE html> < html> < body> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} < /div> < script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "Ajeet"; $scope.lastName = "Maurya"; }); < /script> < /body> < /html>