【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 ...
随机推荐
- SPOJ GSS5 Can you answer these queries V
Time Limit: 132MS Memory Limit: 1572864KB 64bit IO Format: %lld & %llu Description You are g ...
- SPOJ GSS4 Can you answer these queries IV
Time Limit: 500MS Memory Limit: 1572864KB 64bit IO Format: %lld & %llu Description You are g ...
- qibocms /hr/listperson.php File Arbitrarily Include Vul Via Variable Uninitialization && Front Page Upload WEBSHELL
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Relevant Link:2. 漏洞触发条件 . 找到前台文件上传点 ...
- js实现A*寻路算法
这两天在做百度前端技术学院的题目,其中有涉及到寻路相关的,于是就找来相关博客进行阅读. 看了Create Chen写的理解A*寻路算法具体过程之后,我很快就理解A*算法的原理.不得不说作者写的很好,通 ...
- 数据结构作业——brothers（二叉树）
brothers Description 给你一棵节点编号从 1 到 n 的,根节点为 1 的二叉树.然后有 q 个询问,每个询问给出一个整数表示树的节点,要求这个节点的兄弟节点数目和堂兄弟节点的数目 ...
- Android中的Binder机制的简要理解
转载自:http://www.linuxidc.com/Linux/2012-07/66195.htm http://blog.csdn.net/sunxingzhesunjinbiao/articl ...
- python增删改查（四）
###增删改查 names = ["zhangding","wangxu","wudong","cheng"] #增 n ...
- tail 命令 查看Tomcat目录下日志的最后几行的方法
工作中需要查看日志信息,进行排错,但是面对上万行的错误日志,从头开始往后看,比较浪费时间,所有使用tail命令会节省不少时间. 1.命令 tail - n opt/tomcat/logs/ca ...
- c语言程序
汇编语言嵌入到c语言中 #include<stdio.h> int main(void) { int a,b,c; a=4; b=5; _asm { mov eax,a; add eax, ...
- ecshop 默认图处理
function get_banner_path($img) { $img = empty($img) ? C('no_picture') : $img; return $img;}