详解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 setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
vue实现折线图 可按时间查询
Aug 21 Javascript
JavaScript的一些小技巧分享
Jan 06 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
PHP4引用文件语句的对比
2006/10/09 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
form自动提交实例讲解
2017/07/10 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
新员工培训个人的自我评价
2013/10/09 职场文书
材料加工工程求职信
2014/02/19 职场文书
降消项目实施方案
2014/03/30 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
企业领导对照检查材料
2014/08/20 职场文书
金融保险专业求职信
2014/09/03 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
健康状况证明模板
2014/10/23 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
Python简易开发之制作计算器
2022/04/28 Python
Redis实现订单过期删除的方法步骤
2022/06/05 Redis