www.hj8828.com 1

【www.hj8828.com】详解AngularJS 模块化,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;
 })

第四步:定义调节器

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举行个大约的摸底:

首先步:成立三个模块

AngularJS[1]  诞生于二零零六年,由Misko Hevery
等人创办,后为谷歌所收购。是大器晚成款可以的前端JS框架,已经被用来Google的多款产物中间。AngularJS有着大多风味,最为宗旨的是:MVVM、模块化、自动化双向数据绑定、语义化标签、正视注入等等。

// function : define module named exampleApp// param detail :// param one : module name// param two : relay on modules collection// parms three : config informationvar myApp = angular.module("exampleApp", ["exampleApp.Controllers", ["exampleApp.Controllers", "exampleApp.Filters", "exampleApp.Directives", "exampleApp.Service", "exampleApp.Values"])

 ...

AngularJS使用了分化的方法,它尝试去补足HTML自己在创设利用方面包车型客车症结。AngularJS通过运用大家誉为标记符(directives卡塔尔国的布局,让浏览器能够分辨新的语法。例如:

第二步:定义值

应用双大括号{{}}语法实行数量绑定;

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

运用DOM调整构造来得以达成迭代大概隐瞒DOM片段;

其三步:定义服务

支撑表单和表单的证实;

var serviceModule = angular.module("exampleApp.Service", [])// function : define a service named daysserviceModule.service("days", function  { this.today = nowValue.getDay(); this.tomorrow = this.today + 1; })

能将逻辑代码关联到相关的DOM成分上;

第四步:定义调控器

能将HTML分结合可接收的构件。

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 viewcontrollerModule.controller("dayCtrl", function  { // days : use custom service // today is ... $scope.day = days.today; // tomorrow is ... $scope.tomorrow = 7;})

   Angular App    Today is {{ day || "unknow" }} Tomorrow is {{ tomorrow || "unknow" }} 

AngularJS首要思考的是创设CRUD应用,不相符游戏,图形分界面编辑器,这种DOM操作很频仍也很复杂的行使。

第五步:定义指令

就不写hello
world的顺序例子,直接先表现五个项目目录,那样对贰个品种的创设才有所眉目,不至于无从动手,感觉angular.js官方给的phonecat项目是值得学习的,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 methoddirectiveModule.directive("highlight", function  { // get the filter function var dayFilter = $filter; // 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; if  == attrs['highlight']) { element.css; } } })

...Today is {{ day || "unknow" | dayName }}...

 

第六步:定义过滤器

www.hj8828.com 1

var filterModule = angular.module("exampleApp.Filters", []);// function : define a fitler named dayNamefilterModule.filter('dayName', function () { var dayNames = ['Sunday', "Monday", 'Tuesday', 'Wednesday', 'Thurday', 'Friday', 'Saturday']; return function  { // input is the value of data binding return angular.isNumber ? dayNames[input % 7] : input % 7; };})

Today is {{ day || "unknow" | dayName }}Tomorrow is {{ tomorrow || "unknow" | dayName }}

 

末段,上边是意气风发体化的代码:

js文件目录:

文件一:example.html

 

 Angluar test      Angular App     Today is {{ day || "unknow" | dayName }} Tomorrow is {{ tomorrow || "unknow" | dayName }} // function : define module named exampleApp// param detail :// param one : module name// param two : relay on modules collection// parms three : config informationvar myApp = angular.module("exampleApp", ["exampleApp.Controllers", "exampleApp.Filters", "exampleApp.Directives", "exampleApp.Service", "exampleApp.Values"])

后生可畏、app.js  项指标配备文件,路由的安顿,模块的注重能够写在这里地。demo: