AngularJS学习笔记——使用模块定义AngularJS组件

来源：互联网发布：excel两列重复数据筛选编辑：程序博客网时间：2024/04/29 20:25

概述

模块是angularJS应用程序中的顶层组件，在一个angularJS应用中，模块具有三种主要角色：

1、将一个AngularJS应用程序与HTML文档中的一部分相关联

2、起到通往AngularJS框架的关键特性的门户的作用

3、帮助组织一个AngularJS应用程序中的代码和组件

创建一个模块

var myApp=angular.module('exampleApp',[]);

参数说明：

name：新模块的名称（如上面代码中exampleApp）
requires：该模块所依赖的模块组合（即使你的模块并不存在依赖，该参数也必须被指定，一般会设置成[]）
config：该模块的配置，等效于调用Module.config方法

module方法支持三个参数，但是通常我们只使用前两个

模块创建好之后，还必须通过ng-app指令应用到HTML页面中，当angularJS是页面中唯一被使用的框架时，惯例是将ng-app属性应用到html元素上，如下：

<html ng-app='exampleApp'>

使用模块定义angularJS组件

定义控制器

控制器是模型和视图之间的渠道，大多数AngularJS项目拥有多个控制器，每一个向应用程序的一部分提供所需的数据和逻辑，后面会详细介绍控制器。

定义一个控制器：

var myApp=angular.module('exampleApp',[]);myApp.controller('dayCtrl',function($scope){//code})

该方法接收两个参数，控制器名称和工厂函数，控制器名称一般用Ctrl作为后缀

说明：在创建控制器的时候，指定给参数的$scope组件是用于向视图提供数据的，而且只有通过$sope配置的数据才能用于表达式和数据绑定中

控制器定义好了之后，还需要通过ng-controllera指令应用到HTML元素，这样才能让angularJS知道页面的那一部分构成了给定的控制器的视图，下面就是一个将$scope组件所提供的day属性的值运用到视图中的例子：

<!DOCTYPE html><html ng-app='exampleApp'><head><meta charset="UTF-8"><title></title><script src="js/angular.min.js" type="text/javascript"></script><script type="text/javascript">var myApp=angular.module('exampleApp',[]);myApp.controller('dayCtrl',function($scope){var dayNames=['Sunday','Monday ','Tuesday','Wednesday','Thursday','Friday','Saturday'];$scope.day=dayNames[new Date().getDay()];})</script></head><body><div class='panel' ng-controller='dayCtrl'><div class="page-header"><h3>AngularJS App</h3></div><h4>今天是{{day}}</h4></div></body></html>

创建多个控制器：

除了最简单的程序之外，所有的程序几乎都包含多个控制器，每个控制器负责程序功能中的不同方面，如下实例：

<!DOCTYPE html><html ng-app='exampleApp'><head><meta charset="UTF-8"><title></title><script src="js/angular.min.js" type="text/javascript"></script><script type="text/javascript">var myApp=angular.module('exampleApp',[]);myApp.controller('dayCtrl',function($scope){var dayNames=['Sunday','Monday ','Tuesday','Wednesday','Thursday','Friday','Saturday'];$scope.day=dayNames[new Date().getDay()];}).controller('tomorrowCtrl',function($scope){var dayNames=['Sunday','Monday ','Tuesday','Wednesday','Thursday','Friday','Saturday'];$scope.day=dayNames[(new Date().getDay()+1)%7];})</script></head><body><div class='panel'><div class="page-header"><h3>AngularJS App</h3></div><h4 ng-controller='dayCtrl'>今天是{{day}}</h4><h4 ng-controller='tomorrowCtrl'>明天是{{day}}</h4></div></body></html>

定义指令

指令主要用于扩展并增强HTML,从而创建丰富的web应用，angularJS中有很多内置指令，当内置指令无法满足你的需求的时候，也可以创建自定义指令，自定义指令就是通过Module.directive方法创建的，如下实例：

<!DOCTYPE html><html ng-app='exampleApp'><head><meta charset="UTF-8"><title></title><script src="js/angular.min.js" type="text/javascript"></script><script type="text/javascript">var myApp=angular.module('exampleApp',[]);myApp.controller('dayCtrl',function($scope){var dayNames=['Sunday','Monday ','Tuesday','Wednesday','Thursday','Friday','Saturday'];$scope.day=dayNames[new Date().getDay()];}).controller('tomorrowCtrl',function($scope){var dayNames=['Sunday','Monday ','Tuesday','Wednesday','Thursday','Friday','Saturday'];$scope.day=dayNames[(new Date().getDay()+1)%7];})myApp.directive('highlight',function(){return function(scope,element,attrs){if(scope.day==attrs['highlight']){element.css('color','red')}}})</script></head><body><div class='panel'><div class="page-header"><h3>AngularJS App</h3></div><h4 ng-controller='dayCtrl' highlight='Wednesday'>今天是{{day}}</h4><h4 ng-controller='tomorrowCtrl'>明天是{{day}}</h4></div></body></html>

在本实例中，自定义指令的名字是highlight，并被当做一个属性使用，将highlight的值设置成星期三，这自定义指令的用途是如果模型属性day的值与被应用到的元素的属性值相等，就将元素设置成红色

定义过滤器

过滤器用在视图中，用来格式化展示给用户的数据，一旦定义过滤器后，就可以在整个模块中全面应用，也就意味着可以用来保证跨多个控制器和视图之间的数据展示的一致性

下面是一个简单应用实例：

<!DOCTYPE html><html ng-app='exampleApp'><head><meta charset="UTF-8"><title></title><script src="js/angular.min.js" type="text/javascript"></script><script type="text/javascript">var myApp=angular.module('exampleApp',[]);myApp.controller('dayCtrl',function($scope){$scope.day=new Date().getDay();})myApp.controller('tomorrowCtrl',function($scope){$scope.day=new Date().getDay()+1;})myApp.directive('highlight',function(){return function(scope,element,attrs){if(scope.day==attrs['highlight']){element.css('color','red')}}})myApp.filter('dayName',function(){var dayNames=['Sunday','Monday ','Tuesday','Wednesday','Thursday','Friday','Saturday'];return function(input){return angular.isNumber(input)?dayNames[input]:input;}})</script></head><body><div class='panel'><div class="page-header"><h3>AngularJS App</h3></div><h4 ng-controller='dayCtrl' highlight='Wednesday'>Today is {{day||'(unknown)'|dayName}}</h4><h4 ng-controller='tomorrowCtrl'>tomorrow is {{day||'(unknown)'|dayName}}</h4></div></body></html>

这个过滤器的功能是统一对日期进行转换，这里从一个Date对象获取到时一周的第几天，然后转换为星期几

修复指令

当添加过滤器的时候，在设法破坏之前指令所创建的功能，因为控制器里现在向作用域里添加了一个数值型的变量来代表当天，而不是经过格式化的字符串名称，指令里检查的是Wednesday，但是找到的确实类似于1,2这样的值，所以日期不能高亮显示，下面是修复的代码：

myApp.directive('highlight',function($filter){var dayFilter=$filter('dayName')return function(scope,element,attrs){if(dayFilter(scope.day)==attrs['highlight']){element.css('color','red')}}})

在本例中，像指令的工厂函数里添加了一个$filter参数，这告诉AngularJS当我的函数被调用的时候要接收过滤器服务对象，$filter允许访问所有已定义的过滤器

定义服务

服务是提供在整个应用程序中所使用的任何功能的单例对象，AngularJS中自带一些有用的内置服务，您也可以创建自己的服务。

Module对象所定义的方法中有三个是用来以不同方式创建服务的：service,factory和provider。接下来我们将使用service创建一个基本的服务

var myApp=angular.module('exampleApp',[]);myApp.controller('dayCtrl',function($scope,days){$scope.day=days.today;})myApp.controller('tomorrowCtrl',function($scope,days){$scope.day=days.tomorrow;})myApp.directive('highlight',function($filter){var dayFilter=$filter('dayName')return function(scope,element,attrs){if(dayFilter(scope.day)==attrs['highlight']){element.css('color','red')}}})myApp.filter('dayName',function(){var dayNames=['Sunday','Monday ','Tuesday','Wednesday','Thursday','Friday','Saturday'];return function(input){return angular.isNumber(input)?dayNames[input]:input;}});myApp.service('days',function(){this.today=new Date().getDay();this.tomorrow=this.today+1;})

service方法具有两个参数：服务名和调用后用来创建服务对象的工厂函数，当AngularJS调用工厂函数时，会分配一个可通过this关键字访问的新的对象

使用模块组织代码

<!DOCTYPE html><html ng-app='exampleApp'><head><meta charset="UTF-8"><title></title><script src="js/angular.min.js" type="text/javascript"></script><script src="js/controller.js" type="text/javascript"></script><script src="js/filters.js" type="text/javascript"></script><script type="text/javascript">var myApp=angular.module('exampleApp',['exampleApp.controllers','exampleApp.filters','exampleApp.Services','exampleApp.Directives']);angular.module('exampleApp.Directives',[]).directive('highlight',function($filter){var dayFilter=$filter('dayName');return function(scope,element,attrs){if(dayFilter(scope.day)==attrs['highlight']){element.css('color','red')}}});var now=new Date();myApp.value('nowValue',now);angular.module('exampleApp.Services',[]).service('days',function(nowValue){this.today=nowValue.getDay();this.tomorrow=this.today+1;});</script></head><body><div class='panel'><div class="page-header"><h3>AngularJS App</h3></div><h4 ng-controller='dayCtrl' highlight='Wednesday'>Today is {{day||'(unknown)'|dayName}}</h4><h4 ng-controller='tomorrowCtrl'>tomorrow is {{day||'(unknown)'|dayName}}</h4></div></body></html>

controller.js的内容：

var controllerModule=angular.module('exampleApp.controllers',[]);controllerModule.controller('dayCtrl',function($scope,days){$scope.day=days.today;});controllerModule.controller('tomorrowCtrl',function($scope,days){$scope.day=days.tomorrow;});

filters.js的内容：

angular.module('exampleApp.filters',[]).filter('dayName',function(){var dayNames=['Sunday','Monday ','Tuesday','Wednesday','Thursday','Friday','Saturday'];return function(input){return angular.isNumber(input)?dayNames[input]:input;}})

0 0