详解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 相关文章推荐
在javascript中对于DOM的加强
Apr 11 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
JavaScript中的继承之类继承
May 01 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
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中的超全局变量
2006/10/09 PHP
php自定义session示例分享
2014/04/22 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python数据结构之单链表详解
2017/09/12 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python 字典中取值的两种方法小结
2018/08/02 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
python绘图模块之利用turtle画图
2021/02/12 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
英语专业应届生求职信范文
2013/11/15 职场文书
小学生暑假家长评语
2014/04/17 职场文书
单位更名证明
2015/06/18 职场文书
如何写新闻稿
2015/07/18 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
Redis过期数据是否会被立马删除
2022/07/23 Redis