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 模块化的更多相关文章

  1. AngularJS基于模块化的MVC实现

    AngularJS基于模块化的MVC实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  2. angularJs之模块化

    <!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Cont ...

  3. AngularJs项目实践总结

    今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一．UI控件选择 Angularjs是不缺控件的,Github里现 ...

  4. Angularjs之基本概念梳理（一）

    1.Angularjs指令属性ng-app和ng-controller的理解 ng-app指令-标记了AngularJS脚本的作用域,在<html>中添加ng-app属性即说明整个< ...

  5. AngularJs项目

    AngularJs项目实践总结 今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一．UI控件选择 Angularj ...

  6. angularJS的核心特性

    前几天师傅让我了解一下angularJS,angularJS是一个前端框架,具体的优缺点和运用场景我现在也还没有搞清楚,暂时就先不做描述了,留到运用以后进行补充吧. angularJS四大核心特性:M ...

  7. （一）Angularjs - 入门

    AngularJS进行应用开发的一个重要的思维模式: 从构造声明式界面入手 ng-app: 这个指定定义并且关联了使用angularJS的HTML页面部分 ng-model: 这个指定定义并绑定Ang ...

  8. 基于angularJS和requireJS的前端架构

    1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...

  9. 用Django Rest Framework和AngularJS开始你的项目

    Reference: http://blog.csdn.net/seele52/article/details/14105445 译序:虽然本文号称是"hello world式的教程&quo ...

随机推荐

  1. RAC 相关概念解释

    1.1 并发控制 在集群环境中, 关键数据通常是共享存放的,比如放在共享磁盘上. 而各个节点的对数据有相同的访问权限, 这时就必须有某种机制能够控制节点对数据的访问. Oracle RAC 是利用DL ...

  2. Pipe

    #一边压缩一边传 一边解压 到对方的目录为/tlj/2/ / | ssh root@172.16.200.56 tar xzf - -C /tlj #在一个需要文件名的地方 使用-重定向输出到stdo ...

  3. HDU 1285 确定比赛名次(简单拓扑排序）

    题目链接: 传送门 确定比赛名次 Time Limit: 1000MS     Memory Limit: 65536K Description 有N个比赛队(1 Input 输入有若干组,每组中的第 ...

  4. Python翻转字符串或者列表的方式

    1. reversed class reversed(object) | reversed(sequence) -> reverse iterator over values of the se ...

  5. log4net配置和获取ILog实例

    名称 描述 File 文件路径,如果RollingStyle为Composite或Date,则这里设置为目录,文件名在DatePattern里设置,其他则这里要有文件名.已经扩展支持虚拟目录 Roll ...

  6. 翻译：通往WinDbg的捷径（一）

    原文:http://www.debuginfo.com/articles/easywindbg.html译者:arhat时间:2006年4月13日关键词:CDB WinDbg 导言你钟情什么样的调试器 ...

  7. vmware tools 在linux中的作用

    VMware Tools是VMware虚拟机中自带的一种增强工具,相当于VirtualBox中的增强功能 是VMware提供的增强虚拟显卡和硬盘性能 以及同步虚拟机与主机时钟的驱动程序. 只有在VMw ...

  8. autofac 注入普通服务和WCF服务

    using Autofac;using Autofac.Builder;using Autofac.Core; //实现Autofac扩展 public static AutofacRegisterW ...

  9. easyUI学习笔记之tab组件的鼠标事件

    一.鼠标经过组件后的事件,自动打开选项卡内容 var tabs = $('#tt').tabs().tabs('tabs'); for(var i=0; i<tabs.length; i++){ ...

  10. JSP 入门 HTML嵌套Java脚步 显示时间

    <%@ page import="java.util.Date"%> <%@ page language="java" contentType ...