AngularJS模块详解及示例代码
AngularJS支持模块化的方法。模块用于单独的逻辑表示服务，控制器，应用程序等，并保持代码的整洁。我们在单独的js文件中定义的模块，并将其命名为按照module.js文件形式。在这个例子中，我们要创建两个模块。
Application Module - 用于初始化控制器应用程序
Controller Module - 用于定义控制器
应用模块
mainApp.js
var mainApp = angular.module("mainApp", []);
在这里，我们已经声明使用 angular.module 功能的应用程序 mainApp 模块。我们已经通过了一个空数组给它。此数组通常包含从属模块。
控制器模块
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
在这里，我们已经声明采用studentController模块的mainApp.controller功能的控制器。
使用模块
<div ng-app="mainApp" ng-controller="studentController"> .. <script src="mainApp.js"></script> <script src="studentController.js"></script>
在这里，我们使用 ng-app 指令和控制器采用ng-controller指令应用模块。我们已经在主要的HTML页面导入mainApp.js和studentController.js。
示例
下面的例子将展示上述所有模块。
testAngularJS.htm
<html>
<head>
<title>Angular JS Modules</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
<tr><td>Subject:</td><td>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat="subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td></tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="mainApp.js"></script>
<script src="studentController.js"></script>
</body>
</html>
mainApp.js
var mainApp = angular.module("mainApp", []);
studentController.js
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
输出
在Web浏览器打开textAngularJS.htm。看到结果如下。
以上就是AngularJS模块相关知识的资料整理，后续继续补充相关知识，谢谢大家对本站的支持！
相关推荐
-
AngularJS 服务详细讲解及示例代码
AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的任务.这也使得他们即维护和测试的单独实体.控制器,过滤器可以调用它们作为需求的基础.服务使用AngularJS的依赖注入机制注入正常. AngularJS提供例如许多内在的服务,如:$http, $route, $window, $location等.每个服务负责例如一个特定的任务,$http是用来创建AJAX调用,以获得服务器的数据. $route用来定义路由信息等.内置
-
AngularJS Ajax详解及示例代码
AngularJS提供$http控制,可以作为一项服务从服务器读取数据.服务器可以使一个数据库调用来获取记录. AngularJS需要JSON格式的数据.一旦数据准备好,$http可以用以下面的方式从服务器得到数据. function studentController($scope,$http) { var url="data.txt"; $http.get(url).success( function(response) { $scope.students = response;
-
AngularJS国际化详解及示例代码
AngularJS支持内置的国际化三种类型的过滤器货币,日期和数字.只需要根据国家的区域纳入相应的JS.默认情况下它处理浏览器的语言环境.例如,要使用丹麦语的语言环境,使用下面的脚本 <script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script> 使用丹麦语的语言环境实例 testAngularJS.html <html> <head&g
-
AngularJS 自定义指令详解及示例代码
自定义指令中使用AngularJS扩展HTML的功能.自定义指令使用的"指令"的功能定义.自定义指令只是替换了它被激活的元素.引导过程中AngularJS应用程序找到了匹配的元素,并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素. AngularJS提供支持,以下列元素的类型来创建自定义指令. Element directives - 指令遇到时激活一个匹配的元素. Attribute - - 指令遇到时激活一个匹配的属性. C
-
AngularJS包括详解及示例代码
HTML不支持嵌入在HTML页面中的HTML页面.实现这一功能通过使用以下方式: 1.使用Ajax - 让一台服务器来调用获取相应的HTML页面,并将其设置在HTML控件的innerHTML. 2.使用服务器端包含 - JSP,PHP等Web端服务器技术可以在包括动态页面中的HTML页面. 使用AngularJS,我们可以用ng-include指令在一个HTML页面嵌入另一个HTML页面. <div ng-app="" ng-controller="studentCon
-
AngularJS表单详解及示例代码
AngularJS提供丰富填写表单和验证.我们可以用ng-click来处理AngularJS点击按钮事件,然后使用 $dirty 和 $invalid标志做验证的方式.使用novalidate表单声明禁止任何浏览器特定的验证.表单控件使用了大量的角活动.让我们快速浏览一下有关事件先. 事件 AngularJS提供可与HTML控件相关联的多个事件.例如ng-click通常与按钮相关联.以下是AngularJS支持的事件. ng-click ng-dbl-click ng-mousedown ng-
-
AngularJS 作用域详解及示例代码
范围扮演其视图连接控制器的角色一个特殊的JavaScript对象.范围包含了模型数据.在控制器,模型数据通过$scope对象访问. <script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $s
-
AngularJS 视图详解及示例代码
AngularJS支持通过在单个页面上的多个视图的单页应用.要做到这一点AngularJS提供ng-view 和 ng-template指令,以及 $routeProvider 服务. ng-view ng-view 标记只是简单地创建一个占位符,是一个相应的视图(HTML或ng-template视图),可以根据配置来放置. 使用 定义一个div与ng-view在主模块中. <div ng-app="mainApp"> ... <div ng-view><
-
AngularJS过滤器详解及示例代码
过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入.以下是常用的过滤器的列表. S.No. 名称 描述 1 大写 转换文本为大写文本. 2 小写 转换文本为小写文本. 3 货币 货币格式格式文本. 4 过滤器 过滤数组中它根据所提供的标准的一个子集. 5 排序 排序提供标准的基础数组. 大写过滤器 添加大写的过滤器使用管道符的表达式.在这里,添加了大写过滤器,全部用大写字母打印学生姓名. Enter first name:<input type="text" ng
-
AngularJS 依赖注入详解及示例代码
依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式.这减轻一个组成部分,从定位的依赖,依赖配置.这有助于使组件可重用,维护和测试. AngularJS提供了一个至高无上的依赖注入机制.它提供了一个可注入彼此依赖下列核心组件. 值 工厂 服务 提供者 常值 值 值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器. //define a module var mainApp = angular.module("mainApp", []);
-
AngularJS 执行流程详细介绍
一.启动阶段 大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL页面先解析成DOM树,然后逐个加载DOM树中的每一个元素节点.我们可以把AngularJS当做一个类似jQuery的js库,我们通过<script>标签引入到HTML中,那么此时Angular就做为一个普通的DOM节点等待浏览器解析,当浏览器解析到这个节点时,发现它是一个js文件,那么浏览器会停止解析剩余的DOM节点,开始执行这个js(即angular.js),同时Angular会设置一个事件监听器来监听浏览器的DOM