Angular - - ngRoute Angular自带的路由
ngRoute
$routeProvider
配置路由的时候使用。
方法:
when(path,route);
在$route服务里添加一个新的路由。
path:该路由的路径。
route:路由映射信息。
controller:字符串或函数,指定控制器。
controllerAs:一个用于控制器的标识符名称。。
template:字符串或函数,html模板。
templateUrl:字符串或函数,html模板的地址。
resolve:对象,一个应该注入控制器的可选的映射依赖关系。如果任何一个依赖关系是承诺,则路由将等该承诺被解决/拒绝后才实例化控制器。
redirecTo:字符串或者函数,URL重定向。
otherwise(params);
设置在没有其他路由定义被匹配时,将使用的默认路由。
ngView
路由配置的页面在HTML的view里的显示的视图区域。
$route
用于在js里对路由的操作。
依赖:$location $routeProvider
方法:
reload();
使路由服务重新加载当前路由,即使路由没有改变。
updateParams(newParams);
操作路由服务更新当前的URL,使用newParams里指定的路由参数指定当前路由参数。
newParams:将URL参数名称映射到value。
事件:
$routeChangeStart
URL路由开始变化(未跳转成功)的时候触发的事件。
event:合成的事件对象。
next:将跳转的route信息。
current:当前route信息。
$routeChangeSuccess
URL路由变化成功的时候触发的事件。
event:合成的事件对象。
current:当前route信息。
previous:上一个route信息。
$routeChangeError
URL路由变化失败的时候触发的事件。
event:合成的事件对象。
current:当前route信息。
previous:上一个route信息。
rejection:拒绝承诺,通常是失败承诺的错误。
$routeUpdate
当承诺被拒绝时广播。
event:合成的事件对象。
current:当前route信息。
$routeParams
$routeParams服务运行检索当前路由的参数集。
ngRoute使用代码:

<div ng-app="Demo" ng-controller="testCtrl as ctrl">
<a href="#/index/page1">page1</a> - <a href="#/index/page2">page2</a> - <a href="lavascript:void(0)" ng-click="ctrl.reload()">reload</a> - <a href="lavascript:void(0)" ng-click="ctrl.update()">update</a>
<div ng-view></div>
<script type="text/ng-template" id="page1.tpl">
this is page1.{{fisrtCtrl.value}}
</script>
<script type="text/ng-template" id="page2.tpl">
this is page2.{{secondCtrl.value}}
</script>
</div>


(function () {
angular.module("Demo", ["ngRoute"])
.config(["$routeProvider",routeConfig])
.controller("testCtrl", ["$route","$scope",testCtrl])
.controller("firstPageCtrl",firstPageCtrl)
.controller("secondPageCtrl",secondPageCtrl);
function routeConfig($routeProvider){
$routeProvider.otherwise("/index/page1");
$routeProvider
.when("/index/page1",{
templateUrl:"page1.tpl",
controller:"firstPageCtrl",
controllerAs:"fisrtCtrl"
})
.when("/index/page2",{
templateUrl:"page2.tpl",
controller:"secondPageCtrl",
controllerAs:"secondCtrl"
});
};
function testCtrl($route,$scope) {
var vm = this;
vm.reload = function(){
$route.reload();
};
vm.update = function(){
$route.updateParams({name:"beast"});
};
$scope.$on("$routeChangeStart",function(event,nextRoute,currentRoute){
//event.preventDefault(); //可控制不跳转页面,主要在路由权限控制的时候用的多
console.log(nextRoute,currentRoute);// 下一个路由信息和上一个路由信息
});
};
function firstPageCtrl(){
var vm = this;
vm.value = "hello world";
console.log("this is page1");//用于证明reload
}
function secondPageCtrl(){
var vm = this;
vm.value = "Hello World";
console.log("this is page2");//用于证明reload
}
}());

这里直接使用了ng-template把两个模板写在一个页面,在实际使用中,可以把两个模板分开分别放到两个不同的html文件中,并且放到一个规定的文件中,这样可方便于管理。
Angular - - ngRoute Angular自带的路由的更多相关文章
- ngRoute AngularJs自带的路由
ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信 ...
- Angular 从入坑到挖坑 - 路由守卫连连看
一.Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实 ...
- ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频
视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...
- react-router-dom v^4路由、带参路由的配置
首先安装路由 npm install --save react-router-dom 新建一个router.js文件 然后我们的router.js代码如下↓ import React from 're ...
- angular 2 angular quick start Could not find HammerJS
Angular2 的material中 引用了 hammerjs,遇到Could not find HammerJS错误,正确的步骤如下: 需要在如下位置增加 对material 和 hammerjs ...
- django-drf框架自带的路由以及最简化的视图
0910自我总结 django-drf框架自带的路由以及最简化的视图 路由 一.导入模块 from rest_framework.routers import SimpleRouter 二.初始化路由 ...
- Angular实现多标签页效果(路由重用)
1.需求 做了几年的MES系统,从ASP.NET WebForm至MVC,系统决定了用户界面必须为标签页方式实现,因为用户在进行一项操作的时候很有可能会进行其它的操作,比如查询之类的.如果按MVC的方 ...
- 带你了解 Angular 与 Angular JS
Angular 是一个基于 TypeScript 的开源客户端框架,专为构建 Web 应用程序而设计. 另一方面,AngularJS 是 Angular 的第一个版本,用纯 JavaScript 编写 ...
- angular学习笔记(5)- 路由
angular1学习笔记(5)- 路由 需要前端路由的原因: 1.ajax请求不会留下History记录 2.用户无法通过URL进入应用中的指定页面(保存书签.链接分享给朋友) 3.ajax对SEO是 ...
随机推荐
- tabBarItem动画
1.有时,我们需要为tabBarItem设置一些动画.在网上查了半天,没有结果.自己写了一个简单的动画 代码如下: - (void)tabBarController:(UITabBarControll ...
- 【转】SSL/TLS/WTLS协议原理
1 SSL(Secure Socket Layer)是netscape公司设计的主要用于web的安全传输协议.这种协议在WEB上获得了广泛的应用.2 IETF(www.ietf.org )将SSL作了 ...
- python+mysql抓取百度新闻的标题存到数据库
#!usr/bin/python# -*- coding:utf-8 -*-import urllib2 import re import MySQLdb class BaiDuNews: def _ ...
- mkconfig文件解析
#!/bin/sh -e #mkconfig 100ask24x0 arm arm920t 100ask24x0 Null s3c24x0#s0 s1 ...
- BodyContent揭秘及定制复杂的JSP标签
BodyContent揭秘及定制复杂的JSP标签 标签: jspintegerwrapperclass设计模式 2010-08-30 11:30 4555人阅读 评论(0) 收藏 举报 分类: HT ...
- 解决cookie 跨iframe
document.cookie = "name=caoyc;path=/"document.cookie = "age=13;path=/"//时间可以不要,但 ...
- 转 如何使用JEE6快速开发简单的webservice
转自:http://www.iteye.com/topic/1135747,作者:红尘默岩 前言:朋友们开始以下教程前,请先看第五大点的注意事项,以避免不必要的重复操作. 一.准备工作(以下为本实例使 ...
- 获取一个gridcontrol的数据行数
((DataTable)gc_excel.DataSource).Rows.Count;
- 子序列和问题 acm
题目描述 给定一个序列 {a1,a2,…,an},定义从a[l]到a[r]的连续子序列的和为sum[l,r],即sum[l,r]=sigma{ai},l<=i<=r.(1<=l< ...
- CentOS 5.8 x64 安装TomCat
简单记录一下...虽然安装很简单... 首先下载配置安装 jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk-6u25-do ...