详解AngularJS 模块化
蔺敏达
本文向大家介绍详解AngularJS 模块化，包括了详解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"])
在视图中应用模块
<!-- 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;
};
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
类似资料：
-
本文向大家介绍AngularJS中的模块详解，包括了AngularJS中的模块详解的使用技巧和注意事项，需要的朋友参考一下 在讲angularjs的模块之前，我们先介绍一下angular的一些知识点： AngularJS是纯客户端技术，完全用Javascript编写的。它使用的是网页开发的常规技术(HTML,CSS,Javascript)，目的是让网页应用开发更快更容易。 AngularJS简化应
-
本文向大家介绍AngularJS 模块化详解及实例代码，包括了AngularJS 模块化详解及实例代码的使用技巧和注意事项，需要的朋友参考一下 AngularJS有几大特性，比如： 1 MVC 2 模块化 3 指令系统 4 双向数据绑定 那么本篇就来看看AngularJS的模块化。 首先先说一下为什么要实现模块化： 1 增加了模块的可重用性 2 通过定义模块，实现加载顺
-
本文向大家介绍AngularJS 模块详解及简单实例，包括了AngularJS 模块详解及简单实例的使用技巧和注意事项，需要的朋友参考一下 AngularJS 模块 模块定义了一个应用程序。 模块是应用程序中不同部分的容器。 模块是应用控制器的容器。 控制器通常属于一个模块。 创建模块 你可以通过 AngularJS 的 angular.module 函数来创建模块： "myApp" 参数对应执行
-
本文向大家介绍AngularJS模块详解及示例代码，包括了AngularJS模块详解及示例代码的使用技巧和注意事项，需要的朋友参考一下 AngularJS支持模块化的方法。模块用于单独的逻辑表示服务，控制器，应用程序等，并保持代码的整洁。我们在单独的js文件中定义的模块，并将其命名为按照module.js文件形式。在这个例子中，我们要创建两个模块。 Application Module - 用于初
-
本文向大家介绍详解AngularJS中module模块的导入导出，包括了详解AngularJS中module模块的导入导出的使用技巧和注意事项，需要的朋友参考一下 AngularJS是一款来自Google的前端JS框架，它的核心特性有：MVC、双向数据绑定、指令和语义化标签、模块化工具、依赖注入、HTML模板，以及对常用工具的封装，例如$http、$cookies、$location等。 关于An
-
主要内容：创建模块,添加控制器,AngularJS 实例,添加指令,AngularJS 实例,模块和控制器包含在 JS 文件中,AngularJS 实例,myApp.js,myCtrl.js,函数会影响到全局命名空间,什么时候载入库?,AngularJS 实例模块定义了一个应用程序。 模块是应用程序中不同部分的容器。 模块是应用控制器的容器。 控制器通常属于一个模块。 创建模块 你可以通过 AngularJS 的 angular.module 函数来创建模块： < div ng-app= "my