AngularJS 模块化详解及实例代码


Posted in Javascript onSeptember 14, 2016

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 模块化详解及实例代码

          以上就是对AngularJS 模块化 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 #Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 #Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 #Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 #Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 #Javascript
AngularJS equal比较对象实例详解
Sep 14 #Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 #Javascript
You might like
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php中常用的预定义变量小结
2012/05/09 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
web打印小结
2017/01/11 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
js仿360开机效果
2019/12/26 Javascript
Python格式化压缩后的JS文件的方法
2015/03/05 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
python的setattr函数实例用法
2020/12/16 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
毕业生怎样写好自荐信
2013/11/11 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
园林系毕业生求职信
2014/06/23 职场文书
国贸专业求职信
2014/06/28 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
稽核岗位职责
2015/02/10 职场文书
2015年教学工作总结
2015/04/02 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技