当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > 详解AngularJS 模块化

详解AngularJS 模块化

2017年12月12日  | 移动技术网IT编程  | 我要评论

妥协伴奏,妹调,淘宝店铺推广

学习要点：

  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;
 };
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网