虽然从技术上来说Ajax应用确实是单页面应用(即在第一个请求时加载一个HTML页面,后面只刷新DOM中的局部区域),但是很多时候,出于各种原因,我们需要为用户展示或者隐藏一些子页面的视图。
我们可以利用Angular的$route服务来管理这种场景。可以使用路由服务这样定义:对于浏览器所指向的特定URL,Angular将会加载并显示一个模板,并实例化一个控制器来为模板提供内容。
在应用中,可以通过调用$routeProvider服务上的函数来创建路由,把需要创建的路由当成一个配置块传给这些函数即可。
下面我们将这一技术投入应用,构建一款email应用,会有一个首页视图,里面将会展示邮件列表,其中带有日期、标题和发件人。当点击一份邮件时,将会打开一个新视图来展示邮件内容。
在主模板中,我们不会把所有东西都放在第一个加载的页面中,而是仅仅创建一个布局模板,然后再用这个模板来容纳各种视图。在主视图中,我们将会把多个视图共有的东西都放在里面,例如菜单。在这个例子中,我们仅仅把应用的标题放在里面,然后再用ng-view指令来告诉Angular把视图显示在哪。
index.html
<html ng-app="AMail"> <head> <script src="lib/angular/angular.js"></script> <script src="controller/controllers.js"></script> </head> <body> <h1>A-Mail</h1> <div ng-view></div> </body> </html>
list.html
注意这里,我们想实现用户点击一个主题就能被导航到相应的邮件中。我们已经在URL和message.id之间进行了数据绑定,所以用户点击id=1的邮件就会被导航到/#/view/1。这种根据URL导航的方式也叫做深度连接,我们将会在邮件详细视图控制器中使用,以实现把一份可用的邮件链接到对应的说细视图上。
<table> <tr> <td><strong>Sender</strong></td> <td><strong>Subject</strong></td> <td><strong>Date</strong></td> </tr> <tr ng-repeat='message in messages'> <td>{{message.sender}}</td> <td><a href='#/view/{{message.id}}'>{{message.subject}}</td> <td>{{message.date}}</td> </tr> </table>
detail.html
<div><strong>Subject:</strong>{{message.subject}}</div> <div><strong>Sender:</strong>{{message.sender}}</div> <div><strong>Date:</strong>{{message.date}}</div> <div> <strong>To:</strong> <span ng-repeat='recipient in message.recipients'>{{recipient}}</span> <div>{{message.message}}</div> </div> <a href='#/'>Back to message list</a>
controllers.js
为了把这些模板关联到对应控制器上,我们将给$routeProvider配置一个URL,$routeProvider将会负责调用控制器和模板。
//为核心的AMail服务创建模块 var aMailServices = angular.module('AMail', []); //在URL、模板和控制器之间建立映射关系 function emailRouteConfig($routeProvider) { $routeProvider.when('/', {controller: ListController,templateUrl:'list.html'}) //注意,为了创建详情视图,我们在id前面加了一个冒号,从而指定了一个参数化的URL组件 .when('/view/:id', {controller: DetailController, templateUrl:'detail.html'}) .otherwise({redirectTo: '/'}); } //配置我们的路由,以便AMail服务能够找到它 aMailServices.config(emailRouteConfig); //一些虚拟的邮件 messages = [{id:0,sender:'jean@somecompany.com',subject:'Hi there,old firend',date:'Dec 7,2013 12:32:00',recipients:['greg@somecompany.com'], message:'Hey,we should get together fo lunch sometime and catch up.There are many things we should collaborate on this year.'}, {id:1,sender:'maria@somecompany.com',subject:'Where did you leavemy laptop?',date:'Dec 7,2013 8:15:12',recipients:['greg@somecompany.com'], message:'I thought you were going to put it in my desk drawer.But it does not seem to be there.'}, {id:2,sender:'bill@somecompany.com',subject:'Lost python',date:'Dec 6,2013 20:35:02',recipients:['greg@somecompany.com'], message:'She doesn\'t move too fast,so just call me if you see her.'}]; //把我们的邮件发布给邮件列表模板 function ListController($scope) { $scope.messages = messages; } //从路由信息(从URL中解析出来的)中获取邮件id,然后用它找到正确的邮件对象 function DetailController($scope, $routeParams) { $scope.message = messages[$routeParams.id]; }
工程结构如下图所示:
运行结果:
点击邮件的Subject超链接,即进入相应的邮件详细信息页面,如下所示:
资料来源:《用AngularJS开发下一代Web应用》
相关推荐
`$route`服务是AngularJS中的一个核心服务,它与`$location`服务协同工作,实现了视图的动态切换。本文将深入探讨如何在Angular中使用这两个服务。 首先,让我们来理解`$route`服务。`$route`的主要职责是根据当前...
AngularJS,是由Google维护...通过`ngRoute`模块,我们可以配置路由、指定模板和控制器,以及在应用中使用`$location`服务进行导航。这个简单的AngularJS路由器的Demo是一个很好的起点,帮助开发者理解并掌握这一功能。
页面跳转是构建此类应用程序的重要组成部分,AngularJS的路由管理功能通过路由($routeProvider)和服务($locationProvider)允许开发者创建和维护多视图应用的导航。 在AngularJS中,路由的实现依赖于ngRoute模块...
最后,注意在示例中提到了需要引入的外部资源,其中包括了AngularJS核心库的文件、AngularJS路由模块的文件和CSS样式表。这些文件的引入是实现多视图切换的基础,没有这些资源的支持,AngularJS框架无法正常工作。 ...
通过$stateProvider定义的路由状态,配合使用$state.go可以实现视图的动态切换和参数的传递。ng-href和ui-sref则提供了一种在HTML中声明式地控制路由跳转的方式。这些机制共同支持了AngularJS构建复杂的单页应用的...
在AngularJS中,路由的概念是实现单页面应用的关键组件之一,它允许用户在不同的视图间切换,而无需重新加载整个页面,从而提高了应用的响应速度和用户体验。 在单页面应用中,当用户点击链接或者执行某些操作需要...
AngularJS的路由功能使得在单页面应用中导航变得简单,通过uirouter或ngRoute模块,可以定义多个视图和状态,实现页面间的平滑切换。 **8. Testing:** AngularJS提供了内置的测试工具,如ngMock,方便进行单元测试...
这篇内容将深入探讨如何在AngularJS应用中使用 `$location` 服务以及相关类来处理URL。 一、$location服务 `$location` 是AngularJS中的一个核心服务,它允许我们监视和改变当前URL。这个服务是基于浏览器的`...
1. AngularJS路由($routeProvider):浏览历史的核心在于正确配置路由,确保每次导航时,浏览器的历史记录都能正确更新。$routeProvider允许我们定义每个路由的配置,包括控制器、模板和解析器等。 2. $location...
总的来说,这个项目提供了一个学习和实践AngularJS视图切换的实例,涵盖了基础的MVC概念、路由配置、数据绑定以及服务的使用。通过深入研究和实现这个项目,开发者可以更深入地理解AngularJS的特性和工作原理,提升...
此外,文章还涉及到如何在AngularJS中使用`ng-template`指令来定义可复用的模板,以及如何通过`$location`服务获取当前的URL路径。这在监听路由事件并执行特定操作时非常有用。 了解如何监听AngularJS中的路由变化...
当用户访问不同的URL时,根据定义的路由规则,AngularJS会加载对应的视图模板到ng-view指令指定的区域,并执行对应的控制器,从而实现视图的切换。 除了路由规则的设置,路由机制还涉及到路由的参数传递。在定义...
我们还将通过实例代码来具体说明如何配置和实现AngularJS路由。 一、AngularJS路由介绍 AngularJS中的路由是通过模块ngRoute提供的。ngRoute模块为AngularJS应用提供视图间的路由和导航功能。开发者可以定义不同的...
在AngularJS中,路由是通过 `$routeProvider` 配置的,这个服务提供了定义和管理URL到视图映射的能力。视图通常是由HTML模板组成的,而这些模板会根据路由的改变动态插入到页面中的某个特定位置,这个位置通常由 `ng...
AngularJs ui-router是AngularJs的一个第三方路由模块,它提供了更为强大和灵活的状态管理能力,相较于AngularJs自带的ngRoute模块,ui-router支持复杂的路由需求,例如多视图的场景。 ngRoute是AngularJs原生的...
AngularJS的路由机制是实现这一功能的关键,它允许开发者定义和管理应用程序中的不同路径,并且根据路径来加载相应的视图和控制器。下面将详细阐述如何在AngularJS中实现单一页面内的跳转路由。 首先,我们需要创建...
在手风琴组件中使用指令控制器262 实现accordion指令263 实现accordion—group指令263 94控制编译过程265 创建一个?eld指令265 在指令中使用terminal属性267 使用$interpolate服务268 绑定验证信息269 动态...
7. **路由**:AngularJS的 `$routeProvider` 或 `$stateProvider`(在AngularJS 1.x中使用uirouter库)负责处理页面导航和状态管理。它们允许定义基于URL的路由,实现页面间的动态切换。 8. **过滤器**:过滤器用于...
- AngularJS路由技术的掌握,实现基于URL变化的视图切换。 - 数据绑定和作用域继承,保证数据在不同控制器间共享。 - http通信,与后端进行数据交互。 - 使用$location服务来处理分页时的URL变化,提升用户体验。 ...