详解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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
js 提交和设置表单的值
Dec 19 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
js快速排序的实现代码
Dec 08 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
小程序自定义圆形进度条
Nov 17 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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
详解vue组件基础
2018/05/04 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
Java语言程序设计测试题改错题部分
2014/07/22 面试题
安踏广告词改编版
2014/03/21 职场文书
医德医风演讲稿
2014/05/20 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
运动会通讯稿200字
2015/07/20 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
如何做好工作总结!
2019/04/10 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python