詳解AngularJS 模塊化
更新時間：2017年06月14日 16:57:44 作者：光明大神棍
本篇文章主要介紹了詳解AngularJS 模塊化，模塊用于單獨的邏輯表示服務,控制器,應用程序等,并保持代碼的整潔。有興趣的可以了解一下
學習要點：
- 控制器模塊化
- 指令模塊化
- 過濾器模塊化
- 服務模塊化
- 定義值模塊化
- 使用模塊工作
第一步：創(chuàng)建一個模塊
// 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;
};
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家?guī)硪黄狝ugularjs-起步詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了使用Angular內置模塊進行HTTP請求方法步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
本篇文章主要介紹了Angular網(wǎng)絡請求的封裝方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
AngularJS+Bootstrap3多級導航菜單的實現(xiàn)代碼
將介紹如何用AngularJS構建一個強大的web前端系統(tǒng)。文章介紹如何實現(xiàn)多限級導航菜單。本文圖文并茂給大家介紹的非常詳細，感興趣的朋友參考下吧2017-08-08
基于angular-utils-ui-breadcrumbs使用心得(分享)
下面小編就為大家?guī)硪黄赼ngular-utils-ui-breadcrumbs使用心得(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Angular6 用戶自定義標簽開發(fā)的實現(xiàn)方法
這篇文章主要介紹了Angular6 用戶自定義標簽開發(fā)的實現(xiàn)方法，下面我們就通過一個簡單的例子演示Angular6中的這一新功能，小編覺得挺不錯的，現(xiàn)在分享給大家，需要的朋友可以參考下2019-01-01
這篇文章主要介紹了詳解webpack+es6+angular1.x項目構建， 小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Angular2 Service實現(xiàn)簡單音樂播放器服務
本篇文章主要介紹了Angular2 Service實現(xiàn)簡單音樂播放器服務 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
在JavaScript的AngularJS庫中進行單元測試的方法
這篇文章主要介紹了在JavaScript的AngularJS庫中進行單元測試的方法,主要針對AngularJS中的控制器相關,需要的朋友可以參考下2015-06-06
使用AngularJS創(chuàng)建自定義的過濾器的方法
這篇文章主要介紹了使用AngularJS創(chuàng)建自定義的過濾器的方法,AngularJS是非常熱門的JavaScript庫,需要的朋友可以參考下2015-06-06