【AngularJS】—— 7 模块化
AngularJS有几大特性，比如：
1 MVC
2 模块化
3 指令系统
4 双向数据绑定
那么本篇就来看看AngularJS的模块化。
首先先说一下为什么要实现模块化：
1 增加了模块的可重用性
2 通过定义模块，实现加载顺序的自定义
3 在单元测试中，不必加载所有的内容
之前做的几个例子，控制器的代码直接写在script标签里面，这样声明的函数都是全局的，显然不是一个最好的选择。
下面看看如何进行模块化：
<script type="text/javascript">
var myAppModule = angular.module('myApp',[]); myAppModule.filter('test',function(){
return function(name){
return 'hello, '+name+'!';
};
}); myAppModule.controller('myAppCtrl',['$scope',function($scope){
$scope.name='xingoo';
}]);
</script>
首先，通过全局变量angular创建模块myAppModule
angular.module('myApp',[]);
第一个参数是绑定的应用app名称，这个app标识了页面中angular的入口点，类似main函数的作用。
第二个参数[]里面标识了依赖的模块。
下面看看如何使用模块吧！
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="myAppCtrl">
{{name | test }}
</div>
<script type="text/javascript">
var myAppModule = angular.module('myApp',[]); myAppModule.filter('test',function(){
return function(name){
return 'hello, '+name+'!';
};
}); myAppModule.controller('myAppCtrl',['$scope',function($scope){
$scope.name='xingoo';
}]);
</script>
</body>
</html>
直接绑定myApp到ng-app上，就可以了。
在script中，我们通过模块创建了一个filter和一个控制器。
filter的作用是 添加字符串修饰。
控制器的作用则是初始化变量。
程序的运行结果如下：
【AngularJS】—— 7 模块化的更多相关文章
- AngularJS基于模块化的MVC实现
AngularJS基于模块化的MVC实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- angularJs之模块化
<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Cont ...
- AngularJs项目实践总结
今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一．UI控件选择 Angularjs是不缺控件的,Github里现 ...
- Angularjs之基本概念梳理（一）
1.Angularjs指令属性ng-app和ng-controller的理解 ng-app指令-标记了AngularJS脚本的作用域,在<html>中添加ng-app属性即说明整个< ...
- AngularJs项目
AngularJs项目实践总结 今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一．UI控件选择 Angularj ...
- angularJS的核心特性
前几天师傅让我了解一下angularJS,angularJS是一个前端框架,具体的优缺点和运用场景我现在也还没有搞清楚,暂时就先不做描述了,留到运用以后进行补充吧. angularJS四大核心特性:M ...
- （一）Angularjs - 入门
AngularJS进行应用开发的一个重要的思维模式: 从构造声明式界面入手 ng-app: 这个指定定义并且关联了使用angularJS的HTML页面部分 ng-model: 这个指定定义并绑定Ang ...
- 基于angularJS和requireJS的前端架构
1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...
- 用Django Rest Framework和AngularJS开始你的项目
Reference: http://blog.csdn.net/seele52/article/details/14105445 译序:虽然本文号称是"hello world式的教程&quo ...
随机推荐
- 订阅Linux内核的邮件列表
1.发送订阅邮件 注意:一定不要使用像Foxmail这样的第三方邮件客户端,因为发送的邮件会转码,导致订阅不成功,推荐使用Gmail,直接登录进去发送. 发送邮件内容: 接收人:majordomo@v ...
- Mac: Jdk版本切换
通过命令’jdk6′, ‘jdk7′,’jdk8′轻松切换到对应的Java版本: 1.首先安装所有的JDk:* Mac自带了的JDK6,安装在目录:/System/Library/Java/JavaV ...
- RabbitMQ配置文件
配置文件Config 在Web的可视化管理界面中可以看到一些文件的路径 比如 Config文件的地址 数据库存放的文件夹 log文件的地址 进入到这个文件夹会发现有这些文件,其中example是con ...
- AngularJs angular.identity和angular.noop
angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. 格式:angular.identity() 使用代码: (function () { angular.modul ...
- HTML之：fieldset——一个不常用的HTML标签
2016年4月14日17:10:02记录 一个不常用的HTML标签fieldset,不过我觉得比较有意思,其语法如下: <fieldset><legend>fieldset名称 ...
- 北京地铁站点遍历最少经站次数问题普遍意义上是一个NP问题，目前不存在多项式时间算法能够解决该问题
http://www.cnblogs.com/jiel/p/5852591.html 众所周知求一个图的哈密顿回路是一个NPC问题: In the mathematical field of grap ...
- 【Alpha阶段】第十次Scrum例会
会议信息 挺过编译ddl,开始Alpha阶段最后的调试 时间:2016.11.08 21:30 时长:25min 地点:大运村1公寓5楼 类型:日常会议 NXT:2016.11.10 21:30 个人 ...
- POJ3281 Dining(拆点构图 + 最大流）
题目链接 题意:有F种食物,D种饮料N头奶牛,只能吃某种食物和饮料(而且只能吃特定的一份) 一种食物被一头牛吃了之后,其余牛就不能吃了第一行有N,F,D三个整数接着2-N+1行代表第i头牛,前面两个整 ...
- CSS3-box盒布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- myeclipse 破解步骤
Fllow Orders.0. Close MyEclipse Application(if you wanna replace jar file).1. Fill usercode2. Fill s ...