angular路由（自带路由篇）
一、angular路由是什么？
为了实现SPA多视图的切换的效果，其原理可简述为每个 URL 都有对应的视图和控制器。所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换。
二、文件总览
1.新建文件
一级目录新建ngRoute.html（为主页面，里面进行路由配置）
一级目录新建view文件夹，里面再新建三个子页面aboutus.html,home.html,order.html
一级目录存放angular.js和angular-route.js文件，文件存放位置依自己喜好即可
2.ngRoute.html代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="angular-route.js"></script>
</head>
<body ng-app='myApp'>
<a href="#/home">HOME</a>
<a href="#/aboutus">AHOUTUS</a>
<a href="#/order">ORDER</a>
<!--ng-view相当于之前的div#container，用来展示子视图-->
<ng-view></ng-view>
<!--ng-view和下面的代码等价-->
<!--<div id="container" ng-view></div>-->
</body>
<script>
var app=angular.module("myApp",['ngRoute']);
//配置路由
app.config(function($routeProvider){
//如果是home 让ng-view里面的视图是home.html
$routeProvider
.when('/home',{
templateUrl:'view/home.html',
controller:'homeVC'
})
.when('/aboutus',{
templateUrl:'view/aboutus.html',
controller:'aboutusVC'
})
.when('/order',{
templateUrl:'view/order.html',
controller:'orderVC'
})
.otherwise({
redirectTo:'/home' //重定向到home页面
})
});
//配置Controller
app.controller('homeVC',function($scope,$routeParams){
console.log($routeParams);
$scope.title='我是homeVC'
});
app.controller('aboutusVC',function($scope){
$scope.title='我是aboutusVC'
});
app.controller('orderVC',function($scope){
$scope.title='我是orderVC'
}); </script>
</html>
页面定义了三个路由，并默认重定向到了home页面，三个页面分别配置控制器controller，里面都定义了变量title的值。结构层的a标签通过#/参数的形式给url添加参数，然后根据定义的路由找到相应的参数，将相应的子页面放入ng-view容器中。
3.子页面代码展示
<h1>{{title}}</h1>
为了简化操作，三个子页面都只存放了一条相同的代码。title变量因为控制器赋值不同而展示不同的信息。
三、效果展示
打开页面，默认展示home子页面信息，如下：
点击AHOUTUS,子页面进行切换，如下：
点击ORDER,如下：
这样就实现了angular一级路由的切换效果，用来实现移动端导航还是很使用的，但若是需要二级路由，三级路由，这时我们就需要用到第三方路由，由于是采用的第三方插件，所以写法和用法有些差异，angular路由（第三方路由篇）做详细介绍。
angular路由（自带路由篇）的更多相关文章
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- angular路由详解：
1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...
- angular 路由的引用
使用angular路由 遇到的坑. 使用cmd 安装好node.js 安装成功 输入node -v 能查看版本说明安装成功 搭建angular项目输入命令 npm install -g angu ...
- angular 路由项目例子
angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...
- Angular Material 教程之布局篇
Angular Material 教程之布局篇 (一) : 布局简介https://segmentfault.com/a/1190000007215707 Angular Material 教程之布局 ...
- Angular路由参数传递
一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...
- Angular路由守卫 canActivate
作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...
- Angular路由守卫 canDeactivate
目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...
- Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...
随机推荐
- WIFI 概览
概览 Android 提供默认 Android 框架实现,其中包括对各种 WLAN 协议和模式的支持,这些协议和模式包括: WLAN 基础架构 (STA) 网络共享模式或仅限本地模式下的 WLAN ...
- 消除textarea的空格de长度值
在项目中因为用到文本域textarea输入textarea的长度总是显示 25 那是还怀疑textarea自带有value长度? placeholder属性的长度? 那时候想到类似:ul无序列表li元 ...
- man帮助
man命令是Linux下的帮助指令,通过man指令可以查看Linux中的指令帮助.配置文件帮助和编程帮助等信息.
- Python组织文件 实践：拷贝某种类型的所有文件
#! python3 #chapter09-test01- 遍历目录树,查找特定扩展名的文件不论这些文件的位置在哪里,都将他们 #拷贝到一个新的文件夹中 import os,shutil,pprint ...
- 洛谷 P1096 Hanoi双塔问题
P1096 Hanoi双塔问题 题目描述 给定A.B.C三根足够长的细柱,在A柱上放有2n个中间有孔的圆盘,共有n个不同的尺寸,每个尺寸都有两个相同的圆盘,注意这两个圆盘是不加区分的(下图为n=3的情 ...
- 七 HBase表结构设计
表结构设计之 高表 与 宽表 选择 HBase 中的表可以设计为高表(tall-narrow table) 和 宽表(flat-wide table). 高表 : ...
- 杭电 HDU ACM 2795 Billboard（线段树伪装版）
Billboard Time Limit: 20000/8000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- 【SICP练习】152 练习4.8
练习4-8 原文 Exercise 4.8. "Named let" is a variant of let that has the form (let <var> ...
- orm 通用方法——DeleteModel 主键删除
定义代码: /** * 描述:删除对象 * 作者:Tianqi * 日期:2014-09-17 * param:model 对象实例,包含主键 * return:int 受影响行数 * return: ...
- 开源3D游戏引擎Irrlicht简介
Irrlicht简介 Irrlicht在国内也被叫做"鬼火"引擎,是一款用C++编写的开放源代码的高性能游戏引擎.而且是跨平台的,具有很好的移植性,Irrlicht支持OpenGl ...