`

AngularJS中使用路由和$location切换视图

阅读更多

        虽然从技术上来说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应用》

  • 大小: 16.4 KB
  • 大小: 27 KB
  • 大小: 29.8 KB
分享到:
评论

相关推荐

    angular中使用路由和$location切换视图

    `$route`服务是AngularJS中的一个核心服务,它与`$location`服务协同工作,实现了视图的动态切换。本文将深入探讨如何在Angular中使用这两个服务。 首先,让我们来理解`$route`服务。`$route`的主要职责是根据当前...

    angularjs路由

    AngularJS,是由Google维护...通过`ngRoute`模块,我们可以配置路由、指定模板和控制器,以及在应用中使用`$location`服务进行导航。这个简单的AngularJS路由器的Demo是一个很好的起点,帮助开发者理解并掌握这一功能。

    AngularJS之页面跳转Route实例代码

    页面跳转是构建此类应用程序的重要组成部分,AngularJS的路由管理功能通过路由($routeProvider)和服务($locationProvider)允许开发者创建和维护多视图应用的导航。 在AngularJS中,路由的实现依赖于ngRoute模块...

    AngularJS入门教程之多视图切换用法示例

    最后,注意在示例中提到了需要引入的外部资源,其中包括了AngularJS核心库的文件、AngularJS路由模块的文件和CSS样式表。这些文件的引入是实现多视图切换的基础,没有这些资源的支持,AngularJS框架无法正常工作。 ...

    老生常谈angularjs中的$state.go

    通过$stateProvider定义的路由状态,配合使用$state.go可以实现视图的动态切换和参数的传递。ng-href和ui-sref则提供了一种在HTML中声明式地控制路由跳转的方式。这些机制共同支持了AngularJS构建复杂的单页应用的...

    AngularJS路由实现页面跳转实例

    在AngularJS中,路由的概念是实现单页面应用的关键组件之一,它允许用户在不同的视图间切换,而无需重新加载整个页面,从而提高了应用的响应速度和用户体验。 在单页面应用中,当用户点击链接或者执行某些操作需要...

    angularJs权威和精通angularjs

    AngularJS的路由功能使得在单页面应用中导航变得简单,通过uirouter或ngRoute模块,可以定义多个视图和状态,实现页面间的平滑切换。 **8. Testing:** AngularJS提供了内置的测试工具,如ngMock,方便进行单元测试...

    angular-url:在 AngularJS 中使用 Url 的基本类

    这篇内容将深入探讨如何在AngularJS应用中使用 `$location` 服务以及相关类来处理URL。 一、$location服务 `$location` 是AngularJS中的一个核心服务,它允许我们监视和改变当前URL。这个服务是基于浏览器的`...

    angular-phonecat-snapshots增加浏览历史功能

    1. AngularJS路由($routeProvider):浏览历史的核心在于正确配置路由,确保每次导航时,浏览器的历史记录都能正确更新。$routeProvider允许我们定义每个路由的配置,包括控制器、模板和解析器等。 2. $location...

    Simple Change View Using AngularJS.zip

    总的来说,这个项目提供了一个学习和实践AngularJS视图切换的实例,涵盖了基础的MVC概念、路由配置、数据绑定以及服务的使用。通过深入研究和实现这个项目,开发者可以更深入地理解AngularJS的特性和工作原理,提升...

    AngularJS监听路由变化的方法

    此外,文章还涉及到如何在AngularJS中使用`ng-template`指令来定义可复用的模板,以及如何通过`$location`服务获取当前的URL路径。这在监听路由事件并执行特定操作时非常有用。 了解如何监听AngularJS中的路由变化...

    AngularJS入门教程之路由机制ngRoute实例分析

    当用户访问不同的URL时,根据定义的路由规则,AngularJS会加载对应的视图模板到ng-view指令指定的区域,并执行对应的控制器,从而实现视图的切换。 除了路由规则的设置,路由机制还涉及到路由的参数传递。在定义...

    AngularJS 路由和模板实例及路由地址简化方法(必看)

    我们还将通过实例代码来具体说明如何配置和实现AngularJS路由。 一、AngularJS路由介绍 AngularJS中的路由是通过模块ngRoute提供的。ngRoute模块为AngularJS应用提供视图间的路由和导航功能。开发者可以定义不同的...

    简单讲解AngularJS的Routing路由的定义与使用

    在AngularJS中,路由是通过 `$routeProvider` 配置的,这个服务提供了定义和管理URL到视图映射的能力。视图通常是由HTML模板组成的,而这些模板会根据路由的改变动态插入到页面中的某个特定位置,这个位置通常由 `ng...

    详解AngularJs ui-router 路由的简单介绍

    AngularJs ui-router是AngularJs的一个第三方路由模块,它提供了更为强大和灵活的状态管理能力,相较于AngularJs自带的ngRoute模块,ui-router支持复杂的路由需求,例如多视图的场景。 ngRoute是AngularJs原生的...

    AngularJS实现单一页面内设置跳转路由的方法

    AngularJS的路由机制是实现这一功能的关键,它允许开发者定义和管理应用程序中的不同路径,并且根据路径来加载相应的视图和控制器。下面将详细阐述如何在AngularJS中实现单一页面内的跳转路由。 首先,我们需要创建...

    精通AngularJS part1

    在手风琴组件中使用指令控制器262 实现accordion指令263 实现accordion—group指令263 94控制编译过程265 创建一个?eld指令265 在指令中使用terminal属性267 使用$interpolate服务268 绑定验证信息269 动态...

    angularjs-master

    7. **路由**:AngularJS的 `$routeProvider` 或 `$stateProvider`(在AngularJS 1.x中使用uirouter库)负责处理页面导航和状态管理。它们允许定义基于URL的路由,实现页面间的动态切换。 8. **过滤器**:过滤器用于...

    AngularJS实现分页显示数据库信息

    - AngularJS路由技术的掌握,实现基于URL变化的视图切换。 - 数据绑定和作用域继承,保证数据在不同控制器间共享。 - http通信,与后端进行数据交互。 - 使用$location服务来处理分页时的URL变化,提升用户体验。 ...

Global site tag (gtag.js) - Google Analytics