AngularJS 模块化详解及实例代码

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 模块化 的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • AngularJS入门教程之模块化操作用法示例

    AngularJS入门教程之模块化操作用法示例

    本文实例讲述了AngularJS模块化操作用法.分享给大家供大家参考,具体如下: 在前面几节教程中,代码比较少,为了方便说明问题笔者將控制器代码都写在了HTML页面中,实际上这并不是什么好的编程习惯,而且可维护性差.通常的做法都是將处理业务逻辑的代码写在一个单独的JS文件中,然后在HTML页面中引入该文件. 然而这样会带来新的问题,我们的控制器全都定义在全局的命名空间中,假设我们有一个公共的JS文件,在登录页面和密码修改页面都引入这个JS,A开发人员和B开发人员英雄所见略同,对控制器的命名都是U

  • 详解AngularJS 模块化

    学习要点: 控制器模块化 指令模块化 过滤器模块化 服务模块化 定义值模块化 使用模块工作 第一步:创建一个模块 // function : define module named exampleApp // param detail : // param one : module name // param two : relay on modules collection // parms three : config information var myApp = angular.modu

  • AngularJS 模块化详解及实例代码

    AngularJS 模块化详解及实例代码

    AngularJS有几大特性,比如: 1 MVC 2 模块化 3 指令系统 4 双向数据绑定 那么本篇就来看看AngularJS的模块化. 首先先说一下为什么要实现模块化: 1 增加了模块的可重用性 2 通过定义模块,实现加载顺序的自定义 3 在单元测试中,不必加载所有的内容 之前做的几个例子,控制器的代码直接写在script标签里面,这样声明的函数都是全局的,显然不是一个最好的选择. 下面看看如何进行模块化: <script type="text/javascript">

  • AngularJS 表达式详解及实例代码

    AngularJS 表达式详解及实例代码

    前面了解了AngularJS的基本用法,这里就跟着PDF一起学习下表达式的相关内容. 在AngularJS中的表达式,与js中并不完全相同. 首先它的表达式要放在{{}}才能使用,其次相对于javascript中的表达式概念,它有以下几点不同: 1 作用域不同 在javascript中默认的作用于是window,但是在angularJs中就不同了.它使用$scope控制作用于. 2 允许未定义的值 在angularjs中,如果使用了未定义的表达式,也不会出现错误,直接返回空值. 3 过滤器 可以

  • Angularjs CURD 详解及实例代码

    Angularjs CURD 详解及实例代码

    Angularjs CURD 前言 基于一个手机端的项目使用了angularjs,硬着头皮去用,有很多的疑问还需要一一去验证,刚开始总是感觉找不到北,总是感觉有很多概念,而且似乎ng既夹杂MVC又夹杂MVVM的思想, 忙里偷闲敲了个简单的CURD demo. 当然顺着这个demo还可以延伸很多知识点,比如: 带分页查询.连接后台数据库.调用WebApi.分层使用Servcice.Factory. 效果图 <script type="text/javascript"> var

  • MyBatis获取数据库自生成的主键Id详解及实例代码

    MyBatis获取数据库自生成的主键Id详解及实例代码 在使用MySQL数据库时我们一般使用数据库的自增主键自动产生主键.如果在插入主表时,我们需要同时插入从表的数据,这时我们通常需要知道主表插入时自动产生的主键Id值. 下面介绍使用MyBatis进行插入时,如何同时获取数据库自生成的主键: 1.XML配置文件 <insert id="insert" parameterType="Person" useGeneratedKeys="true"

  • MySQL 序列 AUTO_INCREMENT详解及实例代码

    MySQL 序列 AUTO_INCREMENT详解及实例代码 MySQL序列是一组整数:1, 2, 3, ...,由于一张数据表只能有一个字段自增主键, 如果你想实现其他字段也实现自动增加,就可以使用MySQL序列来实现. 本章我们将介绍如何使用MySQL的序列. 使用AUTO_INCREMENT MySQL中最简单使用序列的方法就是使用 MySQL AUTO_INCREMENT 来定义列. 实例 以下实例中创建了数据表insect, insect中id无需指定值可实现自动增长. mysql>

  • AngularJs bootstrap详解及示例代码

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化. 二.Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化. <!doctype html> <html xmlns:ng=&qu

  • Java 两种延时thread和timer详解及实例代码

    Java 两种延时thread和timer详解及实例代码 在Java中有时候需要使程序暂停一点时间,称为延时.普通延时用Thread.sleep(int)方法,这很简单.它将当前线程挂起指定的毫秒数.如 try { Thread.currentThread().sleep(1000);//毫秒 } catch(Exception e){} 在这里需要解释一下线程沉睡的时间.sleep()方法并不能够让程序"严格"的沉睡指定的时间.例如当使用5000作为sleep()方法的参数时,线 程

  • Spring组件自动扫描详解及实例代码

    Spring组件自动扫描详解及实例代码 问题描述 一个系统往往有成千上万的组件,如果需要手动将所有组件都纳入spring容器中管理,是一个浩大的工程. 解决方案 Spring 提供组件扫描(component scanning)功能.它能从classpath里自动扫描.侦测和实例化具有特定注解的组件.基本的注解是@Component,它标识一个受Spring管理的组件.其他特定的注解有@Repository.@Service和@Controller,它们分别标识了持久层.服务处和表现层的组件.

  • Java中自定义异常详解及实例代码

    Java中自定义异常详解及实例代码 下面做了归纳总结,欢迎批评指正 自定义异常 class ChushulingException extends Exception { public ChushulingException(String msg) { super(msg); } } class ChushufuException extends Exception { public ChushufuException(String msg) { super(msg); } } 自定义异常 En

  • Spring AOP 基于注解详解及实例代码

    Spring AOP  基于注解详解及实例代码 1.启用spring对@AspectJ注解的支持: <beans xmlns:aop="http://www.springframework.org/schema/aop"...> <!--启动支持--> <aop:aspectj-autoproxy /> </beans> 也可以配置AnnotationAwareAspectJAutoProxyCreator Bean来启动Spring对@

随机推荐