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. Linux下修改进程名称

    catalog . 应用场景 . 通过Linux prctl修改进程名 . 通过修改进程argv[]修改进程名 . 通过bash exec命令修改一个进程的cmdline信息 1. 应用场景 . 标识 ...

  2. C#读txt文件并写入二维数组中（txt数据行，列未知）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  3. [SVN Mac的SVN使用]

    在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还 ...

  4. git命令笔记

    git -bare init git remote add origin ssh://myserver.com/home/git/myapp.git git remote show origin [r ...

  5. 修改/etc/profile导致常用命令不可用的解决办法

    原因:/etc/profile文件修改有误 解决办法: 用/usr/bin/vim /etc/profile进入,进去后修改正确/etc/profile,然后重启机器让该文件生效即可.

  6. python 动态调用模块、类、方法（django项目）

    需求:近一段时间基于django框架,开发各业务层监控代码,每个业务的监控逻辑不同,因此需要开发监控子模块,动态的导入调用. 项目名称:demo_django App:common_base.moni ...

  7. PHP中静态与抽象的概念

    静态//普通成员//普通成员是属于对象的 //静态成员//静态成员属于类的 类中的静态属性非常类似于函数的全局变量.类中的静态成员是不需要对象而使用类名来直接访问的. //关键字:static//se ...

  8. JavaWeb学习笔记——JSP标准标签库JSTL

  9. Java——URLEncoder和URLDecoder

    import java.net.URLDecoder; import java.net.URLEncoder; //========================================== ...

  10. 【ZeroClipboard is not defined】的解决方法

    参考:http://www.cnblogs.com/jfw10973/p/3921899.html https://github.com/zeroclipboard/zeroclipboard 近期该 ...