好资源导航 » 文章资讯 » 详解AngularJS 模块化

详解AngularJS 模块化

2024-02-19 20:17:03 52

学习要点：

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

第一步：创建一个模块

//function:definemodulenamedexampleApp
//paramdetail:
//paramone:modulename
//paramtwo:relayonmodulescollection
//parmsthree:configinformation
varmyApp=angular.module("exampleApp",["exampleApp.Controllers",["exampleApp.Controllers","exampleApp.Filters","exampleApp.Directives","exampleApp.Service","exampleApp.Values"])

在视图中应用模块

...

第二步：定义值

varvalueModule=angular.module("exampleApp.Values",[])
//defindvalue
varnow=newDate();
valueModule.value("nowValue",now);

第三步：定义服务

varserviceModule=angular.module("exampleApp.Service",[])
//function:defineaservicenameddays
serviceModule.service("days",function(nowValue){
this.today=nowValue.getDay();
this.tomorrow=this.today+1;
})

第四步：定义控制器

varcontrollerModule=angular.module("exampleApp.Controllers",[]);
//function:defineacontrollernameddayCtrl
//thecontrollerincludetwoparam:
//paramdetail:
//paramone:nameofcontroller
//paramtwo:afactoryfunction
//theparam$scopeoffactoryfunctionshowinformationtoview
controllerModule.controller("dayCtrl",function($scope,days){
//days:usecustomservice
//todayis...
$scope.day=days.today;
//tomorrowis...
$scope.tomorrow=7;
})

将控制器应用于视图




AngularApp

Todayis{{day||"unknow"}}

Tomorrowis{{tomorrow||"unknow"}}

第五步：定义指令

vardirectiveModule=angular.module("exampleApp.Directives",[]);
//function:defineadirectivenamedhighlight
//itacceptstwoparam
//paramone:thenameofdirective
//paramtwo:afactorymethod
directiveModule.directive("highlight",function($filter){

//getthefilterfunction
vardayFilter=$filter("dayName");

//paramdetail:
//scope:viewscopeofaction
//element:theelementwhichusesthecustomdirective
//attrs:theattrsoftheelement
returnfunction(scope,element,attrs){
//console.log(dayFilter(scope.day));
if(dayFilter(scope.day)==attrs['highlight']){
element.css("color",'red');
}
}
})

将指令应用于视图

...
Todayis{{day||"unknow"|dayName}}
...

第六步：定义过滤器

varfilterModule=angular.module("exampleApp.Filters",[]);
//function:defineafitlernameddayName
filterModule.filter('dayName',function(){

vardayNames=['Sunday',"Monday",'Tuesday','Wednesday','Thurday','Friday','Saturday'];
returnfunction(input){
//inputisthevalueofdatabinding
returnangular.isNumber(input%7)?dayNames[input%7]:input%7;
};
})

将过滤器应用于视图


Todayis{{day||"unknow"|dayName}}
Tomorrowis{{tomorrow||"unknow"|dayName}}

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

文件一：example.html





Angluartest








AngularApp

Todayis{{day||"unknow"|dayName}}

Tomorrowis{{tomorrow||"unknow"|dayName}}

//function:definemodulenamedexampleApp //paramdetail: //paramone:modulename //paramtwo:relayonmodulescollection //parmsthree:configinformation varmyApp=angular.module("exampleApp",["exampleApp.Controllers","exampleApp.Filters","exampleApp.Directives","exampleApp.Service","exampleApp.Values"])

文件二：services/exampleService.js

varserviceModule=angular.module("exampleApp.Service",[])
//function:defineaservicenameddays
serviceModule.service("days",function(nowValue){
this.today=nowValue.getDay();
this.tomorrow=this.today+1;
})

文件三：values/exampleValue.js

varvalueModule=angular.module("exampleApp.Values",[])
//defindvalue
varnow=newDate();
valueModule.value("nowValue",now);

文件四：directives/exampleDirective.js

vardirectiveModule=angular.module("exampleApp.Directives",[]);
//function:defineadirectivenamedhighlight
//itacceptstwoparam
//paramone:thenameofdirective
//paramtwo:afactorymethod
directiveModule.directive("highlight",function($filter){

//getthefilterfunction
vardayFilter=$filter("dayName");

//paramdetail:
//scope:viewscopeofaction
//element:theelementwhichusesthecustomdirective
//attrs:theattrsoftheelement
returnfunction(scope,element,attrs){
//console.log(dayFilter(scope.day));
if(dayFilter(scope.day)==attrs['highlight']){
element.css("color",'red');
}
}
})

文件五：controllers/exampleController.js

varcontrollerModule=angular.module("exampleApp.Controllers",[]);
//function:defineacontrollernameddayCtrl
//thecontrollerincludetwoparam:
//paramdetail:
//paramone:nameofcontroller
//paramtwo:afactoryfunction
//theparam$scopeoffactoryfunctionshowinformationtoview
controllerModule.controller("dayCtrl",function($scope,days){//days:usecustomservice
//todayis...
$scope.day=days.today;
//tomorrowis...
$scope.tomorrow=days.tomorrow;
})

文件六：filters/exampleFilter.js

varfilterModule=angular.module("exampleApp.Filters",[]);
//function:defineafitlernameddayName
filterModule.filter('dayName',function(){

vardayNames=['Sunday',"Monday",'Tuesday','Wednesday','Thurday','Friday','Saturday'];
returnfunction(input){
//inputisthevalueofdatabinding
returnangular.isNumber(input%7)?dayNames[input%7]:input%7;
};
})

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

返回顶部
514930285
czq8825@qq.com

详解AngularJS 模块化

AngularApp

Todayis{{day||"unknow"}}

Tomorrowis{{tomorrow||"unknow"}}

Tomorrowis{{tomorrow||"unknow"|dayName}}

AngularApp

Tomorrowis{{tomorrow||"unknow"|dayName}}

热门推荐

随机推荐