AngularJS模块详解及示例代码


Posted in Javascript onAugust 17, 2016

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模块相关知识的资料整理,后续继续补充相关知识,谢谢大家对本站的支持!

Javascript 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
JavaScript OOP类与继承
Nov 15 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
js实现简单数字变动效果
Nov 06 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 #Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 #Javascript
AngularJS表格详解及示例代码
Aug 17 #Javascript
AngularJS过滤器详解及示例代码
Aug 16 #Javascript
AngularJS控制器详解及示例代码
Aug 16 #Javascript
AngularJS表达式讲解及示例代码
Aug 16 #Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 #Javascript
You might like
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
Python下Fabric的简单部署方法
2015/07/14 Python
浅谈Python单向链表的实现
2015/12/24 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
python中的yield from语法快速学习
2020/11/06 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
经典的班主任推荐信
2013/10/28 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
大学活动总结格式
2014/04/29 职场文书
青岛海底世界导游词
2015/02/11 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python