溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

詳解AngularJS 模塊化

發(fā)布時間：2020-09-04 10:58:43 來源：腳本之家 閱讀：149 作者：光明大神棍 欄目：web開發(fā)

學(xué)習(xí)要點：

  1. 控制器模塊化
  2. 指令模塊化
  3. 過濾器模塊化
  4. 服務(wù)模塊化
  5. 定義值模塊化
  6. 使用模塊工作

第一步：創(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"])

在視圖中應(yīng)用模塊

<!-- use module -->
<html ng-app="exampleApp">
 ...
</html>

第二步：定義值

var valueModule = angular.module("exampleApp.Values", [])
// defind value
var now = new Date();
valueModule.value("nowValue", now);

第三步：定義服務(wù)

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;
})

將控制器應(yīng)用于視圖

<!-- use controller -->
 <div class="panel" ng-controller="dayCtrl">
  <div class="panel-header">
   <h4>Angular App</h4>
  </div>
  <!-- if the day is undefined, show unknow -->
  <!-- use filter and data binding -->
  <h5>Today is {{ day || "unknow" }}</h5>
  <h5>Tomorrow is {{ tomorrow || "unknow" }}</h5>
 </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');
   }
  }
 })

將指令應(yīng)用于視圖

...
<h5 highlight="Saturday">Today is {{ day || "unknow" | dayName }}</h5>
...

第六步：定義過濾器

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;
 };
})

將過濾器應(yīng)用于視圖

<!-- 用 | 分開 -->
<h5 highlight="Saturday">Today is {{ day || "unknow" | dayName }}</h5>
<h5>Tomorrow is {{ tomorrow || "unknow" | dayName }}</h5>

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

文件一：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">
   <h4>Angular App</h4>
  </div>
  <!-- if the day is undefined, show unknow -->
  <!-- use defined directive "highlight" -->
  <!-- use filter and data binding -->
  <h5 highlight="Saturday">Today is {{ day || "unknow" | dayName }}</h5>
  <h5>Tomorrow is {{ tomorrow || "unknow" | dayName }}</h5>
 </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;
 };
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手