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中的数学函数集合
May 08 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 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
URL Rewrite的设置方法
2007/01/02 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
php查询ip所在地的方法
2014/12/05 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
extjs之去除s.gif的影响
2010/12/25 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
Python中functools模块函数解析
2017/03/12 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
Python重新加载模块的实现方法
2018/10/16 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
园林设计专业毕业生求职信
2014/03/23 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
2014年调度员工作总结
2014/11/19 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
2015年共青团工作总结
2015/05/15 职场文书
运动会广播稿100字
2015/08/19 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android