AngularJS 模块使用方法

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

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

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

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

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

<div ng-app="myApp">...</div>

<script>

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

</script>
"myApp" 参数对应执行应用的 HTML 元素。

现在你可以在 AngularJS 应用中添加控制器,指令,过滤器等。

添加控制器
你可以使用 ng-controller 指令来添加应用的控制器:

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>

添加指令
AngularJS 提供了很多内置的指令,你可以使用它们来为你的应用添加功能。

完整的指令内容可以参阅 AngularJS 参考手册。

此外,你可以使用模块来为你应用添加自己的指令:

AngularJS 实例
<div ng-app="myApp" runoob-directive></div>

<script>

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

app.directive("runoobDirective", function() {
return {
template : "我在指令构造器中创建!"
};
});
</script>

模块和控制器包含在 JS 文件中
通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。

在以下实例中, "myApp.js" 包含了应用模块的定义程序, "myCtrl.js" 文件包含了控制器:

AngularJS 实例
<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">www.dgvast.cn</script>
<body>

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

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

posted @ 2020-10-22 17:31  学无边涯  阅读(155)  评论(0编辑  收藏  举报