甚么是小程序流程_详解AngularJS 模块化

日期:2021-01-12 类型:科技新闻 

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

详解AngularJS 模块化       本篇文章主要介绍了详解AngularJS 模块化,模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁。有兴趣的可以了解一下
// parms three : rmation 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 rmation 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 ng-controller="dayCtrl" 
 div 
 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 

最后,下面是完整的代码:
<

 !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 ng-controller="dayCtrl" 
 div 
 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 : rmation
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 rmation 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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。