详解AngularJS 模块化
程序员文章站
2022-07-05 20:43:09
学习要点：
控制器模块化
指令模块化
过滤器模块化
服务模块化
定义值模块化
使用模块工作
第一步：创建一个模块
/...
学习要点：
- 控制器模块化
- 指令模块化
- 过滤器模块化
- 服务模块化
- 定义值模块化
- 使用模块工作
第一步：创建一个模块
// 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"])
在视图中应用模块
<!-- 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" 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 information
var 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 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;
};
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。