详解AngularJS模块化

学习要点：

成都创新互联专注于齐齐哈尔企业网站建设,自适应网站建设,购物商城网站建设。齐齐哈尔网站建设公司,为齐齐哈尔等地区提供建站服务。全流程按需策划，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

控制器模块化
指令模块化
过滤器模块化
服务模块化
定义值模块化
使用模块工作

第一步：创建一个模块

// 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"])

在视图中应用模块

...

第二步：定义值

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

将控制器应用于视图


 
  
   Angular App
  
  
  
  Today is {{ day || "unknow" }}
  Tomorrow is {{ tomorrow || "unknow" }}

第五步：定义指令

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

将指令应用于视图

...
Today is {{ day || "unknow" | dayName }}
...

第六步：定义过滤器

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

将过滤器应用于视图


Today is {{ day || "unknow" | dayName }}
Tomorrow is {{ tomorrow || "unknow" | dayName }}

最后，下面是完整的代码：

文件一：example.html





 Angluar test
 
 
 


 
 
  
   Angular App
  
  
  
  
  Today is {{ day || "unknow" | dayName }}
  Tomorrow is {{ tomorrow || "unknow" | dayName }}

文件二：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;
 };
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

本文标题：详解AngularJS模块化
当前URL：http://cqcxhl.cn/article/jgdhip.html

重庆分公司，新征程启航

详解AngularJS模块化

Angular App

Today is {{ day || "unknow" }}

Tomorrow is {{ tomorrow || "unknow" }}

Today is {{ day || "unknow" | dayName }}

Today is {{ day || "unknow" | dayName }}

Tomorrow is {{ tomorrow || "unknow" | dayName }}

Angular App

Today is {{ day || "unknow" | dayName }}

Tomorrow is {{ tomorrow || "unknow" | dayName }}

其他资讯