掌握Angular路由机制：ngRoute详解与实战示例

184 浏览量更新于2024-08-28 收藏 81KB PDF 举报

在AngularJS中，ngRoute是一个重要的组成部分，它提供了路由和深层链接的功能，使得应用程序能够有效地组织和管理页面结构。ngRoute模块是一个自包含的AngularJS服务，其核心组件包括ngView指令、$routeProvider提供程序和$route、$routeParams服务。 ngView指令是ngRoute的核心，它允许你在HTML中定义一个区域，用于动态地切换和显示不同的视图模板。当用户导航到不同的URL时，ngView会替换这个元素的内容，从而实现页面的切换。 $routeProvider则是配置路由的工具，允许开发者定义应用程序的URL结构、视图模板以及与之关联的控制器。通过使用`when()`方法，你可以指定一个URL模式，以及与该模式关联的模板URL、控制器名以及可能的参数解析规则。这有助于管理不同状态之间的跳转，并在跳转前执行必要的数据准备（通过`resolve`选项）。 $route服务则提供了获取当前路由信息的方法，如URL、视图和控制器，这对于在运行时动态操作路由非常有用。而$routeParams服务允许你在控制器中访问URL中的参数，这对于处理带有查询参数的路由尤其关键。学习ngRoute的基本步骤如下： 1. 在HTML结构中，将ngView指令添加到需要显示不同视图的区域。 2. 在Angular模块中，通过`angular.module('yourApp', ['ngRoute'])`引入ngRoute模块。 3. 在app的配置阶段，使用`$routeProvider.when()`方法设置路由规则。 4. 创建控制器，通常与视图模板一起定义，负责处理特定页面的业务逻辑。 5. 在需要的地方，注入$routeParams服务来获取和处理URL参数。例如，当你有一个简单的应用，有主页面（默认路由`/`）和红色页面（`/#/red`），你可以创建以下代码： - color.html: ```html <head> ... <script src="script/color.controller.js"></script>  </head> <body ng-app="color"> <div ng-view></div> ... <a href="#/" ...>Main</a> <a href="#/red" ...>Red</a> </body> ``` 在color.controller.js中，你可以这样写： ```javascript angular.module('color').controller('ColorController', function($scope, $routeParams) { if ($routeParams.color === 'red') { // 在这里处理红页的逻辑 } }); ``` ngRoute让Angular应用有了清晰的结构，方便用户导航和内容管理，是构建单页应用程序（SPA）的重要基石。通过理解并熟练运用ngRoute，开发者可以构建出功能丰富的动态Web应用。

angular学习之学习之ngRoute路由机制路由机制

ngRoute简介简介

路由是AngularJS很重要的一环，它可以把你项目的页面串联起来，构成一个项目，常用的路由有ngRoute和ui-route，我这里

先讲ngRoute。ngRoute是一个Module，提供路由和深层链接所需的服务和指令。

注意一点，和之前的文章不一样，使用ngRoute之前你需要引入另外一个js文件angular-route.js：

ngRoute包含内容如下：

名称名称类型类型作用作用

ngView Directive 路由的不同模板其实都是插入这个元素里

$routeProvider Provider 路由配置

$route Service 各个路由的url，view，controller

$routeParams Service 路由参数

使用ngRoute的基本流程如下：

在需要路由的地方使用ngView来定义视图模板。

在module中注入ngRoute模块

在config中用$routeProvider来对路由进行配置templateUrl，controller，resolve。

在每个controller中写业务逻辑

在controller中可以通过注入$routeParams来获得url上的参数

可以看下下面这个例子

color.html

<!DOCTYPE html>

<html>

<head>

</head>

<a href="#green" rel="external nofollow" rel="external nofollow" >Green</a>

</body>

var app = angular.module("color", ["ngRoute"]);

app.config(function ($routeProvider) {

$routeProvider

.when("/", {

templateUrl: "main.html",

controller: 'mainController'

})

.when("/red", {

templateUrl: "red.html",

controller: 'redController'

})

.when("/green", {

templateUrl: "green.html",

controller: 'greenController'

})

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38724333

粉丝: 5
资源: 955

掌握Angular路由机制：ngRoute详解与实战示例

angular-route.js

Angular ngRoute路由例子

AngularJS ngRoute 路由详解及基本使用

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

angular 路由理解

angular学习指南

angular.js 路由及页面传参示例

Learning-Angular:学习 Angular.js

angular.js学习

详解Angular路由 ng-route和ui-router的区别

最新资源