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. tyvj2018 小猫爬山

    之前做过一道题"破锣摇滚乐队",把猫都编了号,每辆车只能装一些编号递增的猫,而且前一辆车的猫编号都比后一辆车小.那道题的DP状态是:f[i][j]表示装了前i只猫,使用了j辆车时第 ...

  2. static和public的区别

    static:静态.   可以设置:静态类.静态变量.静态方法.   没有使用static修饰的成员为实例成员. 静态成员的使用:通过类名.   1.不加static修饰的成员是对象成员,归每个对象所 ...

  3. Windows装机必备软件列表

    经常装系统,列个List,以后装完之后安装软件直接参照使用!windows版: 输入法: 搜狗输入法(由于长期使用导致此输入法十分熟悉我的输入习惯,以无法自拔).支持Linux.Windows(太穷还 ...

  4. 初识PHP

    初识PHP 虽然是做前端的,可是平时看书.做项目都会与后端PHP相关,但却不是很了解,并经常听PHP大神说:PHP是世界上最好的语言!因此,通过这篇博文学习.总结PHP,来认识认识这个“世界上最好的语 ...

  5. JS-DOM 综合练习-动态添加删除班级成绩表

    费了2个小时,才把原理弄懂,把问题逐个解决,当你发现你最后栽的那个点,是一个小石头拌的你,你起来是该哭还是该笑呢?只怪自己习武不精吧. 虽然问题都解决了,但是还有一个余留的问题就是鼠标经过input时 ...

  6. sql between and

    sql中的 a between 'a' and 'b' 基本上是代表 'a'>=a and 'b'<=a

  7. Winsock 入门 计算校验和 示例

    #include <stdio.h> #include <string.h> #define DATA_MAX_LEN 14 /* 最大数据长度 */ struct data_ ...

  8. C++ 内存管理与堆栈

    /*内存管理与堆栈: * # 一个由C/C++编译的程序占用的内存分为以下几个部分 * 1.栈区:由编译器自动分配释放,数据先进后出 * 2.堆区:由程序员手动分配释放,数据先进先出, * new 和 ...

  9. Unity Sprite Atlas Compression

    http://forum.unity3d.com/threads/2d-sprite-packer-and-pvrtc.218633/ http://docs.unity3d.com/Manual/S ...

  10. NodeJS Debugger

    http://cnodejs.org/topic/4f16442ccae1f4aa27001105 http://blog.csdn.net/ygh_0912/article/details/9108 ...