本篇文章主要介绍了详解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; }; }) 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。
以上就是详解AngularJS 模块化的详细内容，更多请关注0133技术站其它相关文章！
