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.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"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> </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.Values"]) </script> </body> </html>

文件二：services/exampleService.js

var serviceModule = angular.module("exampleApp.Service",function (nowValue) {
        this.today = nowValue.getDay();
        this.tomorrow = this.today + 1;
    })

文件三：values/exampleValue.js

var valueModule = angular.module("exampleApp.Values",now);

文件四：directives/exampleDirective.js

var directiveModule = angular.module("exampleApp.Directives",'red');
            }
        }
    })

文件五：controllers/exampleController.js

var controllerModule = angular.module("exampleApp.Controllers",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",'Saturday'];
    return function (input) {
        // input is the value of data binding
        return angular.isNumber(input % 7) ? dayNames[input % 7] : input % 7;
    };
})

原文链接：https://www.f2er.com/angularjs/149418.html

猜你在找的Angularjs相关文章