Angular 路由route实例
iSun
Design & Code
AngularJS - 路由 routing 基础示例
AngularJS 路由 routing
能够从页面的一个视图跳转到另外一个视图,对单页面应用来讲是至关重要的。当应用变得越来越复杂时,我们需要一个合理的方式来管理用户在使用过程中看到的界面。AngularJS的做法是将视图分解成布局和模板视图,并且根据用户当前访问的URL来展示对应的视图。
本文对 AngularJS routing 做一简单示例,并提及其涉及的一些概念。
一、布局页面
引用scripts:
1 <script src="../Scripts/jquery-1.9.1.min.js"></script>
2 <script src="../Scripts/angular.min.js"></script>
3 <script src="../Scripts/angular-route.min.js"></script>
页面的布局比较简单:
1 <div>
2 <ul>
3 <li><a href="#page1">go page 1</a></li>
4 <li><a href="#page2">go page 2</a></li>
5 <li><a href="#other">to other page</a></li>
6 </ul>
7 </div>
8 <div ng-view></div>
ng-view是由ngRoute模块提供的一个特殊指令,其告诉AngularJS把模板渲染到何处。这个例子中,我们将需要渲染的内容放到 下面的 div 中。上面的三个 a 链接分别指向了三个视图view。
二、模板页面
创建两模板页面,分别叫 Subpage_1.html 和 Subpage_2.html。
3、路由规则 routing config
1 angular.module("myRouteApp", ["ngRoute"])
2 .config(['$routeProvider', function ($routeProvider) {
3 $routeProvider
4 .when("/page1", {
5 templateUrl: "Subpage_1.html"
6 })
7 .when("/page2", {
8 templateUrl: "Subpage_2.html"
9 })
10 .otherwise({
11 redirectTo: "/"
12 });
13 }]);
把 ngRoute 模块在我们的应用中当作依赖加载进来。用 config 函数在模块或应用中定义路由,使用AngularJS提供的when和otherwise两个方法来定义应用的路由。
templateUrl:
应用会根据 templateUrl 属性所指定的路径通过XHR读取视图(或者从$templateCache中读取)。如果能够找到并读取这个模板,AngularJS将模板的内容渲染到具有ng-view指令的DOM元素中。
redirectTo:
如果redirectTo属性的值是一个字符串,那么路径会被替换成这个值,并根据这个目标路径触发路由变化。如果redirectTo属性的值是一个函数,那么路径会被替换成函数的返回值,并根据这个目标路径触发路由变化。
运行结果
点击 go page 1
点击 go page 2
本文转自
iSun博客
Angular 路由route实例的更多相关文章
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 基于angular的route实现单页面cnodejs
Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...
- Angular系列文章之angular路由
路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它自然也有内置的路由模块:叫做ngRoute. ...
- angular路由配置以及使用
一.生成路由文件 按照惯例,有一个独立模块来配置相关路由,这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中. 使用CLI生成 ...
- angular路由详解:
1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...
- AngularJS实现单页应用的原理——路由(Route)
AngularJS实现单页应用的原理——路由(Route) 路由:告诉你一个通往某个特定页面的途径 http://127.0.0.1/index.html#/start http://127.0.0. ...
- Asp.Net MVC part3 路由Route
路由Route路由规则Route:可以查看源代码了解一下构造方法,需要指定路由格式.默认值.处理器三个值路由数据RouteData:当前请求上下文匹配路由规则而得到的一个对象,可以在Action中通过 ...
- Angular路由守卫 canActivate
作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...
- Angular路由守卫 canDeactivate
目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...
随机推荐
- P1417烹调方案——背包问题中的排序
题目:https://www.luogu.org/problemnew/show/P1417 与普通的01背包不同的一点是加入物品的顺序对结果有影响,这里可以考虑贪心的想法,把对全局影响最小的物品排在 ...
- linux历史及基本知识
1. Linux的历史: 1973年,Ken Thompson以C语言写出第一个正式版的UNIX内核, 1977年:重要的UNIX分支——BSD(Berkeley Sofeware Distribut ...
- Redis多个数据库
注意:Redis支持多个数据库,并且每个数据库的数据是隔离的不能共享,并且基于单机才有,如果是集群就没有数据库的概念. Redis是一个字典结构的存储服务器,而实际上一个Redis实例提供了多个用来存 ...
- MFC中界面自适应
void CMyDlg::OnSize(UINT nType, int cx, int cy){ CDialogEx::OnSize(nType, cx, cy); CRect rt; GetClie ...
- [提高班] 2017 Summer Training Day1补题
题目地址:https://vjudge.net/contest/175939#overview A.数据范围是10^9,所以需要一个巧思路.对于一个数n,如何去判定比它的所有数是否是二进制形式.比n小 ...
- 关于SetTimer间隔小于OmTimer执行时间的问题
如果SetTimer的时间间隔为t,其响应事件OnTimer代码执行一遍的时间为T,且T>t.这样,一次未执行完毕,下一次定时到,这时候程序会如何执行? 可能的情况:1.丢弃还未执行的代码,开始 ...
- 利用msfvenom制作木马程序(你可以得到她的一切)
实验环境: 虚拟机:kali (攻击机) 192.168.1.2 虚拟机:windwos 2003 (靶机) 192.168.1.100 1. 制作木马 说明: -p payl ...
- Laravel框架接入短信平台进行用户注册短信验证
今天刚接触了一个短信接口平台,云通讯第三方短信提供服务商.http://www.yuntongxun.com/ 然后介绍一下怎么使用该短信平台来接入到自己的项目中. 首先你的去注册一个账号,然后根据提 ...
- SQL Server 截取两个固定字符之间的字符串(案例)
网上的问题: 参考这篇<函数PARSENAME使用和截取字符串>https://www.cnblogs.com/insus/p/10958452.html 的方法: )='||MO21|T ...
- 笔记-迎难而上之Java基础进阶3
统计字符串中每一个不同的字符 import java.util.*; //统计字符串每一个字符出现的字数 public class StringDemo{ public static void mai ...