ngRoute
ngRoute 模块中包含以下内容，
| 名称 | 所属 | 作用 |
|---|---|---|
ngView |
DIRECTIVE | 提供不同路由模板插入的视图层 |
$routeProvider |
PROVIDER | 提供路由配置 |
$route |
SERVICE | 用于构建各个路由的url、view、controller这三者的关系 |
$routeParams |
SERVICE | 解析返回路由中带有的参数 |
- 在主模板中使用
ngView定义一个路由模板的视图层。不同路由对应的模板将会插入到这个ngView所在的dom元素下。 - 使用
$routeProvider进行路由配置，包括每一个路由对应的url，template以及controller。除了这些基本的配置之外，还会有一些额外的配置，比如resolve配置等。 - 在每个路由的controller中完成对应的业务逻辑。
- 可以通过注入
$routeParams服务来获取路由url上的参数；还可以通过$rootScope来监控$routeChangeStart和$routeChangeSuccess事件。
<body ng-app="demo001" ng-controller="Demo">
<h1>Angular Route Demo</h1>
<hr>
<div>
<a href="#/home">home</a>
<a href="#/post">post</a>
<a href="#/about">about</a>
</div>
<hr>
<div ng-view></div>
</body>
angular.module('demo001', ['ngRoute'])
.config([
'$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.when('/post', {
templateUrl: 'post.html',
controller: 'PostController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
})
.otherwise('/home')
}
])
调用 $routeProvider.when 来配置不同路由的具体信息。 $routeProvider.when 方法接受2个参数，第一个是路由的url。第二个路由的具体配置，包括对应的模板地址，控制器名称等.$routeProvider.otherwise 可以用于设置默认路由地址。简单来说就是将未设置的url自动重定向到此url。
路由参数
angular.module('Module.Post', ['ngRoute'])
.config([
'$routeProvider',
function ($routerProvider) {
$routerProvider
.when('/post', {
templateUrl: 'post.html',
controller: 'PostController'
})
.when('/post/:postId', {
templateUrl: 'post-id.html',
controller: 'PostIdController'
})
}
])
.controller('PostController', [
'$scope',
function ($scope) {
$scope.posts = [
{
name: 'post1',
id: 'post-001'
}, {
name: 'post2',
id: 'post-002'
}
]
}
])
.controller('PostIdController', [
'$scope',
'$routeParams',
function ($scope, $routeParams) {
$scope.msg = 'post id: ' + $routeParams.postId;
}
]);
路由中的 /:postId 其实是一个参数，它将匹配类似 /post/001 这种url，其中001 就是这个 :postId 的值。
我们在路由对应的控制器中，可以通过 $routeParams 参数来获取这个url参数。依次类推，我们可以为路由的url设置多个参数，比如 /post/:year/:month/:day/:postName 这样的路由，它将匹配 /post/2015/12/15/angular-router-demo 这样的路径。控制器中注入的 $routeParams 服务将会得到类似下面的对象，
{
"year": 2015,
"month": 12,
"day": 15,
"postName": "angular-router-demo"
}
http://www.tuicool.com/articles/jqMveaB
ngRoute的更多相关文章
- AngularJs ng-route路由详解
本篇基于ng-route来讲下路由的使用...其实主要是 $routeProvider 搭配 ng-view 实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 更多内容 ...
- ngRoute插件
angular中可以使用插件,例如ngRoute插件就是用与路由控制. 首先要在模块中引入即可: var m1 = angular.module('myApp',['ngRoute']); 然后我们进 ...
- angularjs之插件ngRoute和ngAnimate
使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html l ...
- ngRoute AngularJs自带的路由
ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信 ...
- AngularJS Best Practices: ngRoute
app/----- components/---------- users/--------------- controllers/-------------------- users.control ...
- angularjs中ng-route和ui-router简单用法的代码比较
1.使用ng-route: app.js中的写法: var app=angular.module('birthdayApp',['ngRoute']); app.config(function($ro ...
- angularjs ngRoute demo
<!doctype html> <html lang="en" ng-app="AMail"> <head> <met ...
- ngRoute 路由
做单页面应用多是通过不同的url来识别出不同的页面展现的. angularjs 为我们提供一个封装好的ngRoute工具 简单介绍用法 : <div ng-view></div> ...
- AngularJs练习Demo17 ngRoute
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- AngularJs练习Demo16 ngRoute
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- Leetcode598.Range Addition II范围求和2
给定一个初始元素全部为 0,大小为 m*n 的矩阵 M 以及在 M 上的一系列更新操作. 操作用二维数组表示,其中的每个操作用一个含有两个正整数 a 和 b 的数组表示,含义是将所有符合 0 < ...
- pycharm使用gitlab输错密码解决办法
在pycharm中使用http方式连接gitlab,在测试连接的时候提示输入用户名,密码.密码输错后,以后的每次test都是使用错误的密码,在删除pycharm后也是一样,解决方法是在控制面板\用户帐 ...
- 官网svn提交到代码库，但是不能同步到web目录
现象:数据库名字存在,但是数据库中表为空:svn提交代码能到svn库中,但不能同步到web目录. 原因:磁盘分区满了,导致内测服务器中数据库先删掉但没能从线上拉取回来,显示数据库中表为空: 磁盘满,导 ...
- Django 用 userena 做用户注册验证登陆
django-admin startproject userena2 cd userena2python manage.py startapp accounts vim userena2/settin ...
- oracle-Oradim
输入以下命令之一: 通过指定以下选项创建实例: -NEW -SID sid | -SRVC srvc | -ASMSID sid | -ASMSRVC srvc [-SYSPWD pass] [-ST ...
- TCP keepalive的机理及使用
TCP 是面向连接的 , 在实际应用中通常都需要检测对端是否还处于连接中.如果已断开连接,主要分为以下几种情况: 1.连接的对端正常关闭,即使用 closesocket 关闭连接. 2.连接的对端非正 ...
- shops
#!/usr/bin/env python #coding:utf- import urllib2,sys,re,os,string reload(sys); sys.setdefaultencodi ...
- JS原生实现五角星评价详情demo
<style> *{margin: 0;padding: 0;} .pingfen{ width: 195px; margin:10px auto; height:20px; positi ...
- java memory allocation（转）
Java的运行时数据存储机制 Java程序在运行时需要为一系列的值或者对象分配内存,这些值都存在什么地方?用什么样的数据结构存储?这些数据结构有什么特点?本文试图说明此命题的皮毛之皮毛. 概念 对 ...
- MySQL数据库简单使用
一．入门语句: 1.连接服务器: 命令:cd 安装目录\bin mysql -uroot -p 接着输入密码 ( 具体的是:mysql -u username-p password ) 远程连接MyS ...