文档章节

angularjs $route(路由) 的使用

p
 pf12345
发布于 2014/04/04 10:41
字数 267
阅读 35742
收藏 6

######$route被用于URLS到controller和view(HTML模板)之间的链接,它会监控$location.url()并试图对此路径及对应的路由配置进行映射,使用时需要安装ngroute模块:

在模板主页header上添加:

<pre><code> &lt;script src="../js/angular-route.min.js">&lt;/script></code></pre>

index.html:

<pre></code> &lt;!doctype html> &lt;html xmlns:ng="http://angularjs.org" ng-app='app' ng-csp="" scroll id="ng-app"> &lt;head> &lt;meta charset="UTF-8"> &lt;title>angularjs route&lt;/title> &lt;link rel="stylesheet" href="../css/bootstrap.css"/> &lt;script src="../js/angular.min.js">&lt;/script> &lt;script src="../js/angular-animate.min.js">&lt;/script> &lt;script src="../js/angular-route.min.js">&lt;/script> &lt;script src="../js/main.js">&lt;/script> &lt;/head> &lt;body> &lt;div class="header"> &lt;a href="#/">主页&lt;/a>&lt;a href="#/other">其他页&lt;/a> &lt;/div> &lt;div ng-view class="main">&lt;/div> &lt;/body> &lt;/html> </code></pre>

other.html:

<pre><cdoe>&lt;h1>{{title}}&lt;/h1></code></pre>

home.html:

<pre><cdoe>&lt;h1>{{title}}&lt;/h1></code></pre>

使用方式为,在main.js中添加:

<pre><code> var app = angular.module('app', [ 'ngRoute' ]) .config(function ($routeProvider){ $routeProvider .when('/other', { controller: 'otherCtrl', templateUrl: 'content/views/other.html', publicAccess: true }) .when('/', { controller: 'homeCtrl', templateUrl: 'content/views/home.html' }) .when('/other/:id', { controller: 'otherDetailCtrl', templateUrl: 'content/views/otherDetail.html', publicAccess: true }) .otherwise({ redirectTo: '/' }); } app.controller('homeCtrl',function($scope,$http){ console.log('i am home page'); $scope.title = 'i am home page'; }).controller('otherCtrl',function($scope){ console.log('i am other page'); $scope.title = 'i am other page'; }).controller('otherDetailCtrl',function($scope, $routeParams, $location){ var id = $routeParams.id; if(id == 0) { $location.path('/other'); } console.log('i am otherDetailCtrl page'); $scope.title = 'i am otherDetailCtrl page'; }); </code></pre>

当打开index.html时,会自动打开'/',当点击导航中“主页”、“其他页”时,会进行页面切换。

在$route(路由)中,提供了两个依赖性服务:$location、$routeParams; $location、$routeParams均可在controller中使用,如上otherDetailCtrl中,可通过$routeParams获取路由时所传参数,可通过$location进行路由跳转。

© 著作权归作者所有

p
粉丝 17
博文 12
码字总数 10328
作品 0
成都
私信 提问
加载中

评论(1)

咖喱云
咖喱云
代码看起来有点乱。
理解AngularJS ngRoute

一般来说,我们认为AngularJS是一套前端的MVC框架。那么,为了实现视图的中转,肯定会涉及到路由的概念。这里我们就来说说有关AngularJS的路由——ngRoute。 序 个人了解到AngularJS,是由于...

maweitao
2014/08/27
6K
0
通过路由管理视图间切换 - AngularJS路由解析

AngularJS中通过ngRoute来实现相关的路由功能,基本的安装和使用请看官网. 模板的视图刷新 ng-view这个指令和路由组合之后就可以将$route对应的视图放入指定的HTML中,这一过程中它会创建自己的...

顽Shi
2014/11/21
2.6K
5
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
使用 AngularJS 的路由和模板实现单页应用 (Single Page)

概述 单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。Angular可以帮助我们轻松创建此类应用 简单应用 我们打算创建一个简单的应用,涉及主页,...

oschina
2014/06/20
20.8K
1
从 Angular 中的 URL 获取查询参数

本文介绍了如何从 Angular 中的 URL 获取查询参数。 通过注入ActivatedRoute的实例,可以订阅各种可观察对象,包括queryParams和params observable。以下是范例: 参考引用 本文同步至: 完整...

waylau
09/03
10
0

没有更多内容

加载失败,请刷新页面

加载更多

Java 面试

https://www.bilibili.com/video/av51271222?from=search&seid=4920203212236751600 https://www.bilibili.com/video/av60309372/?spm_id_from=333.788.videocard.4......

MtrS
31分钟前
6
0
理想的数据分析平台

数据分析尤其是大数据分析这几年的热度依然不减,但面对眼花缭乱的数据分析产品很难去选择,那什么是理想的数据分析平台呢。下面是根据我的个人理解的理想数据分析平台,在次强调我理想的数据...

赛克蓝德
39分钟前
7
0
房贷计算器

题目要求 贷款有两种还款的方式:等额本金法和等额本息法,简单说明一下等额本息法与等额本金法的主要区别: 等额本息法的特点是:每月的还款额相同,在月供中“本金与利息”的分配比例中,前...

wzb88
50分钟前
10
0
springboot2 配置druid数据链接池,监控控制台

Druid是什么? Druid首先是Java语言中最好的数据库连接池,也是阿里巴巴的开源项目。Druid是阿里巴巴开发的号称为监控而生的数据库连接池,在功能、性能、扩展性方面,都超过其他数据库连接池...

万建宁
51分钟前
7
0
离线环境玩Docker-安装篇

如果你使用的是Mac之类的系统,推荐本地安装Docker,然后Docker运用运行CentOS(目标安装环境是CentOS)。如果你使用的是Windows,那么创建一个虚拟机可能是比较好的选择,Docker运行CentOS当然...

RippleChan
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部