详解AngularJS 模块化

时间：2021-05-25

学习要点：

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

    • 第一步：创建一个模块

    // function : define module named exampleApp// param detail :// param one : module name// param two : relay on modules collection// parms three : config informationvar 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 valuevar now = new Date();valueModule.value("nowValue", now);

    第三步：定义服务

    var serviceModule = angular.module("exampleApp.Service", [])// function : define a service named daysserviceModule.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 viewcontrollerModule.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 methoddirectiveModule.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 dayNamefilterModule.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 informationvar 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 daysserviceModule.service("days", function (nowValue) { this.today = nowValue.getDay(); this.tomorrow = this.today + 1; })

    文件三：values/exampleValue.js

    var valueModule = angular.module("exampleApp.Values", [])// defind valuevar 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 methoddirectiveModule.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 viewcontrollerModule.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 dayNamefilterModule.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; };})

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

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章