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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端