【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 ...
随机推荐
- AngularJs $animate 让页面动起来
$animate $animate服务提供了基本的DOM操作功能如在DOM里插入.移除和移动元素,以及添加和删除类.这个服务是ngAnimate的核心服务,为CSS和Javascript提供了高档次的 ...
- POJ 2533 Longest Ordered Subsequence（最长上升子序列（NlogN）
传送门 Description A numeric sequence of ai is ordered if a1 < a2 < ... < aN. Let the subseque ...
- Django admin coercing to Unicode: need string or buffer, tuple found
见 http://stackoverflow.com/questions/29762306/django-admin-coercing-to-unicode-need-string-or-buffer ...
- 【Alpha阶段】第四次Scrum例会
会议信息 时间:2016.10.20 21:00 时长:20min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 个人任务报告 姓名 今日已完成Issue 明日计划Issue 今日已做事务 ...
- Linux 吃掉我的内存
在Windows下资源管理器查看内存使用的情况,如果使用率达到80%以上,再运行大程序就能感觉到系统不流畅了,因为在内存紧缺的情况下使用交换分区,频繁地从磁盘上换入换出页会极大地影响系统的性能.而当我 ...
- 今天接触枚举类型,感觉是C里面应该才有的东西
遍历枚类型的方法: public static EActChannel getEnumByCode(int code) { for (EActChannel enm : EActChannel.val ...
- VIM for Python and Django Development
VIM for Python and Django Development VIM-PyDjango created by Programmer for Programmer who work on ...
- SMTP邮箱验证错误解决
开始报错,是因为权限设置问题,谷歌对第三方应用登录默认关闭,需要开通后python才能自动访问邮件 SMTPAuthenticationError: (502, b'5.5.1 Unrecognize ...
- Linux学习笔记（二）2015.4.14
笔记2.1 Q:登陆命令 A:刚开始登陆的是安装Linux时设置的普通用户,如lin,输入su - root后,成为root用户 笔记2.2 Q:切换控制台 A:ctrl+alt+F1-F7可以切 ...
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【四】——实现模型工厂，依赖注入以及格式配置
系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 在上一篇中,我们已经初步开始使用Web Api了,但同时出现了一些很多不足之处,本章我们就着 ...