详解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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
Javascript 面试题随笔
Mar 31 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
基于javascript编写简单日历
May 02 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 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使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
php批量删除操作代码分享
2017/02/26 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
js常用函数 不错
2006/09/08 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
为什么称python为胶水语言
2020/06/16 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
四年大学生活的自我评价范文
2014/02/07 职场文书
劳动竞赛口号
2014/06/16 职场文书
忠诚教育心得体会
2014/09/03 职场文书
2015年护士节活动总结
2015/02/10 职场文书
大学生自我评价范文
2015/03/03 职场文书
婚礼家长致辞
2015/07/27 职场文书
安全伴我行主题班会
2015/08/13 职场文书
小学运动会入场口号
2015/12/24 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
MySQL修炼之联结与集合浅析
2021/10/05 MySQL