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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
为什么node.js不适合大型项目
Apr 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语法(3)
2006/10/09 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
python微信好友数据分析详解
2018/11/19 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Python操作Jira库常用方法解析
2020/04/10 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
最新会计专业求职信范文
2014/01/28 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
英语复习计划
2015/01/19 职场文书
2015年入党决心书
2015/02/05 职场文书
审美与表现自我评价
2015/03/09 职场文书
安全生产培训心得体会
2016/01/18 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL