AngularJS有几大特征,举个例子: 1 MVC style="color: #ff0000;">2 模块化 三 指令系统 动用模块化的选用。 四双向数据绑定 style="font-size: 壹3" />

动用模块化的选用

作者: 韦德国际1946国际网址  发布:2019-05-28

1.模块化的利润

style="font-size: 一叁px; color: #000080;">AngularJS有几大特征,举个例子:

  1 MVC

   style="color: #ff0000;">2 模块化

  三 指令系统

动用模块化的选用。  四双向数据绑定

style="font-size: 壹3px; color: #000080;">那么本篇就来看看AngularJS的模块化。

详解AngularJS 模块化,angularjs模块化

读书要点:

  1. 调整器模块化
  2. 一声令下模块化
  3. 过滤器模块化
  4. 劳务模块化
  5. 定义值模块化
  6. 行使模块职业

先是步:成立二个模块

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

第5步:定义调整器

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>

第4步:定义指令

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模块化 学习要点: 调整器模块化 指令模块化 过滤器模块化 服务模块化 定义值模块化 使用模块工作 第叁步:...

学学要点:

(一)落成逻辑更明显、可读性强;
(②)共青团和少先队开垦分工分明,轻易调节;
(三)足够利用能够选拔代码;
(四)抽象出可公用的模块,可维护性强;
(伍)模块化的遗留系统造福组装开垦新的形似系统.

  首先先说一下为何要落到实处模块化:

  1. 调节器模块化
  2. 命令模块化
  3. 过滤器模块化
  4. 劳动模块化
  5. 定义值模块化
  6. 运用模块专门的工作

贰.AngularJS模块的定义

  1扩大了模块的可重用性

率先步:创设贰个模块

(一)angular对象的module()使用格局:

  2透过定义模块,完毕加载顺序的自定义

// 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"])
  // 定义一个无依赖模块
  angular.module('appModule',[]);
  // 定义一个依赖module1、module2的模块
  angular.module('appModule',['module1','module2']);

  3在单元测试中,不必加载全部的剧情

在视图中采纳模块

(2)angular.module()方法:接收多少个参数

  在此之前做的多少个例证,调控器的代码直接写在script标签里面,那样注脚的函数都以大局的,显明不是贰个最棒的抉择。

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

首先个为模块的称谓,第二个是数组,表示模块正视的模块的名称。假使无需依附别的模块,传入空数组就可以.第陆个参数可选,接收一个主意,用于对模块进行布署,作用和模块实例的config()方法相同.

  上面看看怎么样进行模块化:

第二步:定义值

angular.module()方法重回一个模块实例对象,能够调用该对象的controller()、directive()、filter()等艺术向模块中增添调整器、指令、过滤器等任何组件.

        <script type="text/javascript">
            var myAppModule = angular.module('myApp',[]);

            myAppModule.filter('test',function(){
                return function(name){
                    return 'hello, ' name '!';
                };
            });

            myAppModule.controller('myAppCtrl',['$scope',function($scope){
                $scope.name='xingoo';
            }]);
        </script>
var valueModule = angular.module("exampleApp.Values", [])
// defind value
var now = new Date();
valueModule.value("nowValue", now);

(叁)页面引用模块:ng-app指令

  首先,通过全局变量angular创制模块myAppModule

其三步:定义服务

<html ng-app="appMobile">
angular.module('myApp',[]);
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;
 })

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:动用模块化的选用

关键词: JavaScript AngularJS 19462211伟德国际