详解AngularJS 模块化


Posted in Javascript onJune 14, 2017

学习要点:

  1. 控制器模块化
  2. 指令模块化
  3. 过滤器模块化
  4. 服务模块化
  5. 定义值模块化
  6. 使用模块工作

第一步:创建一个模块

// function : define module named exampleApp
// param detail :
// param one : module name
// param two : relay on modules collection
// parms three : config information
var myApp = angular.module("exampleApp", ["exampleApp.Controllers", ["exampleApp.Controllers", "exampleApp.Filters", "exampleApp.Directives", "exampleApp.Service", "exampleApp.Values"])

在视图中应用模块

<!-- use module -->
<html ng-app="exampleApp">
 ...
</html>

第二步:定义值

var valueModule = angular.module("exampleApp.Values", [])
// defind value
var now = new Date();
valueModule.value("nowValue", now);

第三步:定义服务

var serviceModule = angular.module("exampleApp.Service", [])
// function : define a service named days
serviceModule.service("days", function (nowValue) {
  this.today = nowValue.getDay();
  this.tomorrow = this.today + 1;
 })

第四步:定义控制器

var controllerModule = angular.module("exampleApp.Controllers", []);
// function : define a controller named dayCtrl
// the controller include two param:
// param detail:
// param one : name of controller
// param two : a factory function 
// the param $scope of factory function show information to view
controllerModule.controller("dayCtrl", function ($scope, days) {  
 // days : use custom service
 // today is ...
 $scope.day = days.today;
 // tomorrow is ...
 $scope.tomorrow = 7;
})

将控制器应用于视图

<!-- use controller -->
 <div class="panel" ng-controller="dayCtrl">
  <div class="panel-header">
   <h3>Angular App</h3>
  </div>
  <!-- if the day is undefined, show unknow -->
  <!-- use filter and data binding -->
  <h4>Today is {{ day || "unknow" }}</h4>
  <h4>Tomorrow is {{ tomorrow || "unknow" }}</h4>
 </div>

第五步:定义指令

var directiveModule = angular.module("exampleApp.Directives", []);
// function : define a directive named highlight
// it accepts two param
// param one : the name of directive 
// param two : a factory method
directiveModule.directive("highlight", function ($filter) {

  // get the filter function
  var dayFilter = $filter("dayName");

  // param detail:
  // scope : view scope of action
  // element : the element which uses the custom directive
  // attrs : the attrs of the element
  return function (scope, element, attrs) {
   // console.log(dayFilter(scope.day));
   if (dayFilter(scope.day) == attrs['highlight']) {
    element.css("color", 'red');
   }
  }
 })

将指令应用于视图

...
<h4 highlight="Saturday">Today is {{ day || "unknow" | dayName }}</h4>
...

第六步:定义过滤器

var filterModule = angular.module("exampleApp.Filters", []);
// function : define a fitler named dayName
filterModule.filter('dayName', function () {

 var dayNames = ['Sunday', "Monday", 'Tuesday', 'Wednesday', 'Thurday', 'Friday', 'Saturday'];
 return function (input) {
  // input is the value of data binding
  return angular.isNumber(input % 7) ? dayNames[input % 7] : input % 7;
 };
})

将过滤器应用于视图

<!-- 用 | 分开 -->
<h4 highlight="Saturday">Today is {{ day || "unknow" | dayName }}</h4>
<h4>Tomorrow is {{ tomorrow || "unknow" | dayName }}</h4>

最后,下面是完整的代码:

文件一:example.html

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angluar test</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" >
</head>
<body>
 <!-- use controller -->
 <div class="panel" ng-controller="dayCtrl">
  <div class="panel-header">
   <h3>Angular App</h3>
  </div>
  <!-- if the day is undefined, show unknow -->
  <!-- use defined directive "highlight" -->
  <!-- use filter and data binding -->
  <h4 highlight="Saturday">Today is {{ day || "unknow" | dayName }}</h4>
  <h4>Tomorrow is {{ tomorrow || "unknow" | dayName }}</h4>
 </div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="values/exampleValue.js"></script>
<script type="text/javascript" src="controllers/exampleController.js"></script>
<script type="text/javascript" src="filters/exampleFilter.js"></script>
<script type="text/javascript" src="directives/exampleDirective.js"></script>
<script type="text/javascript" src="services/exampleService.js"></script>
<script type="text/javascript">
// function : define module named exampleApp
// param detail :
// param one : module name
// param two : relay on modules collection
// parms three : config information
var myApp = angular.module("exampleApp", ["exampleApp.Controllers", "exampleApp.Filters", "exampleApp.Directives", "exampleApp.Service", "exampleApp.Values"])
</script>
</body>
</html>

文件二:services/exampleService.js

var serviceModule = angular.module("exampleApp.Service", [])
// function : define a service named days
serviceModule.service("days", function (nowValue) {
  this.today = nowValue.getDay();
  this.tomorrow = this.today + 1;
 })

文件三:values/exampleValue.js

var valueModule = angular.module("exampleApp.Values", [])
// defind value
var now = new Date();
valueModule.value("nowValue", now);

文件四:directives/exampleDirective.js

var directiveModule = angular.module("exampleApp.Directives", []);
// function : define a directive named highlight
// it accepts two param
// param one : the name of directive 
// param two : a factory method
directiveModule.directive("highlight", function ($filter) {

  // get the filter function
  var dayFilter = $filter("dayName");

  // param detail:
  // scope : view scope of action
  // element : the element which uses the custom directive
  // attrs : the attrs of the element
  return function (scope, element, attrs) {
   // console.log(dayFilter(scope.day));
   if (dayFilter(scope.day) == attrs['highlight']) {
    element.css("color", 'red');
   }
  }
 })

文件五:controllers/exampleController.js

var controllerModule = angular.module("exampleApp.Controllers", []);
// function : define a controller named dayCtrl
// the controller include two param:
// param detail:
// param one : name of controller
// param two : a factory function 
// the param $scope of factory function show information to view
controllerModule.controller("dayCtrl", function ($scope, days) {  // days : use custom service
 // today is ...
 $scope.day = days.today;
 // tomorrow is ...
 $scope.tomorrow = days.tomorrow;
})

文件六:filters/exampleFilter.js

var filterModule = angular.module("exampleApp.Filters", []);
// function : define a fitler named dayName
filterModule.filter('dayName', function () {

 var dayNames = ['Sunday', "Monday", 'Tuesday', 'Wednesday', 'Thurday', 'Friday', 'Saturday'];
 return function (input) {
  // input is the value of data binding
  return angular.isNumber(input % 7) ? dayNames[input % 7] : input % 7;
 };
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
vue实现移动端input上传视频、音频
Aug 18 Javascript
JS判断时间段的实现代码
Jun 14 #Javascript
bootstrap选项卡扩展功能详解
Jun 14 #Javascript
zTree树形插件异步加载方法详解
Jun 14 #Javascript
详解Angular2响应式表单
Jun 14 #Javascript
vue过渡和animate.css结合使用详解
Jun 14 #Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 #Javascript
详解Vue.use自定义自己的全局组件
Jun 14 #Javascript
You might like
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
内容编辑个人求职信
2013/12/10 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
西式婚礼证婚词
2014/01/12 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
房地产项目建议书
2014/03/12 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
银行求职自荐信
2014/06/30 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
大学生自我评价范文
2015/03/03 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python