srcmini本文概述
在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="myApp.js"></script>
<script src="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>这个例子也可以写成：
<!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>
评论前必须登录！
注册