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. Android成长日记-ViewPager的使用

    ViewPager在安卓应用中主要用于作为程序的引导页面,欢迎页面,以及其他的动画效果,下面将给你讲述ViewPager的使用 在Android3.0以上的Api中,提供了ViewPager的接口,所 ...

  2. dedecms /member/mtypes.php SQL Injection Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Dedecms会员中心注入漏洞 Relevant Link http:/ ...

  3. js调用刷新

    _self.fireEvent('refresh');

  4. 关于当一个C#工程移植到另一台机子上（win7）上时，程序报错。dll没有被指定在Windows上运行，或者它包含错误。请尝试使用原始安装媒体重新安装程序。。。。。。

    , 解决方法:通过从网上重新下载dll文件 拷贝到报错的目录下,替换掉原有的dll,可以正确运行.

  5. Objective-C NSData与实现NSCoding协议进行序列化和反序列化

    1.NSData NSData是Objective-C语言中数据的基本类型,其成分可以理解为字节指针和长度的封装的类,来看看源代码 @interface NSData : NSObject <N ...

  6. linux文件系统简介

    文件系统是linux的一个十分基础的知识,同时也是学习linux的必备知识. 本文将站在一个较高的视图来了解linux的文件系统,主要包括了linux磁盘分区和目录.挂载基本原理.文件存储结构.软链接 ...

  7. Linux使用网盘客户端

    1. 百度网盘 - bypy https://github.com/houtianze/bypy 这是一个基于Python的命令行客户端. 安装参考上面链接的说明,或者这篇文章(推荐,有告诉你如何安装 ...

  8. C#6.0特性笔记

    Visual Studio 2015的C#6.0,今天无意中看这个视频,怕忘记其中的特性,故此进行记录. public class Point { //Getter专属自动属性 public int ...

  9. Java SimpleDateFormat使用

    SimpleDateFormat 是一个格式化日期的具体类. 它允许格式化 (date -> text) 和标准化. SimpleDateFormat 允许以为日期-时间格式化选择任何用户指定的 ...

  10. tcpdump抓包命令

    本文转自 : http://www.cnblogs.com/ggjucheng/archive/2012/01/14/2322659.html http://www.itshouce.com.cn/l ...