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自带的路由的更多相关文章

  1. ngRoute AngularJs自带的路由

    ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信 ...

  2. Angular 从入坑到挖坑 - 路由守卫连连看

    一.Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实 ...

  3. ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频

    视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...

  4. react-router-dom v^4路由、带参路由的配置

    首先安装路由 npm install --save react-router-dom 新建一个router.js文件 然后我们的router.js代码如下↓ import React from 're ...

  5. angular 2 angular quick start Could not find HammerJS

    Angular2 的material中 引用了 hammerjs,遇到Could not find HammerJS错误,正确的步骤如下: 需要在如下位置增加 对material 和 hammerjs ...

  6. django-drf框架自带的路由以及最简化的视图

    0910自我总结 django-drf框架自带的路由以及最简化的视图 路由 一.导入模块 from rest_framework.routers import SimpleRouter 二.初始化路由 ...

  7. Angular实现多标签页效果(路由重用)

    1.需求 做了几年的MES系统,从ASP.NET WebForm至MVC,系统决定了用户界面必须为标签页方式实现,因为用户在进行一项操作的时候很有可能会进行其它的操作,比如查询之类的.如果按MVC的方 ...

  8. 带你了解 Angular 与 Angular JS

    Angular 是一个基于 TypeScript 的开源客户端框架,专为构建 Web 应用程序而设计. 另一方面,AngularJS 是 Angular 的第一个版本,用纯 JavaScript 编写 ...

  9. angular学习笔记(5)- 路由

    angular1学习笔记(5)- 路由 需要前端路由的原因: 1.ajax请求不会留下History记录 2.用户无法通过URL进入应用中的指定页面(保存书签.链接分享给朋友) 3.ajax对SEO是 ...

随机推荐

  1. tabBarItem动画

    1.有时,我们需要为tabBarItem设置一些动画.在网上查了半天,没有结果.自己写了一个简单的动画 代码如下: - (void)tabBarController:(UITabBarControll ...

  2. 【转】SSL/TLS/WTLS协议原理

    1 SSL(Secure Socket Layer)是netscape公司设计的主要用于web的安全传输协议.这种协议在WEB上获得了广泛的应用.2 IETF(www.ietf.org )将SSL作了 ...

  3. python+mysql抓取百度新闻的标题存到数据库

    #!usr/bin/python# -*- coding:utf-8 -*-import urllib2 import re import MySQLdb class BaiDuNews: def _ ...

  4. mkconfig文件解析

    #!/bin/sh -e #mkconfig 100ask24x0 arm arm920t 100ask24x0 Null s3c24x0#s0                     s1      ...

  5. BodyContent揭秘及定制复杂的JSP标签

    BodyContent揭秘及定制复杂的JSP标签 标签: jspintegerwrapperclass设计模式 2010-08-30 11:30 4555人阅读 评论(0) 收藏 举报  分类: HT ...

  6. 解决cookie 跨iframe

    document.cookie = "name=caoyc;path=/"document.cookie = "age=13;path=/"//时间可以不要,但 ...

  7. 转 如何使用JEE6快速开发简单的webservice

    转自:http://www.iteye.com/topic/1135747,作者:红尘默岩 前言:朋友们开始以下教程前,请先看第五大点的注意事项,以避免不必要的重复操作. 一.准备工作(以下为本实例使 ...

  8. 获取一个gridcontrol的数据行数

    ((DataTable)gc_excel.DataSource).Rows.Count;

  9. 子序列和问题 acm

    题目描述 给定一个序列 {a1,a2,…,an},定义从a[l]到a[r]的连续子序列的和为sum[l,r],即sum[l,r]=sigma{ai},l<=i<=r.(1<=l< ...

  10. CentOS 5.8 x64 安装TomCat

    简单记录一下...虽然安装很简单... 首先下载配置安装 jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk-6u25-do ...