一、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路由(自带路由篇)的更多相关文章

  1. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. angular路由详解:

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

  3. angular 路由的引用

    使用angular路由 遇到的坑. 使用cmd 安装好node.js 安装成功 输入node  -v 能查看版本说明安装成功 搭建angular项目输入命令 npm install  -g  angu ...

  4. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...

  5. Angular Material 教程之布局篇

    Angular Material 教程之布局篇 (一) : 布局简介https://segmentfault.com/a/1190000007215707 Angular Material 教程之布局 ...

  6. Angular路由参数传递

    一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...

  7. Angular路由守卫 canActivate

    作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...

  8. Angular路由守卫 canDeactivate

    目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...

  9. Angular 路由守卫

    1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...

随机推荐

  1. AOC 电视机T3212M 进入 工厂模式方法,修改开机启动方式

    原启动方式: 通电,再按遥控 器上  “开机” 希望改成:  通电直接打开电视 方法: 1. 按遥控器上的 menu  1147  进入 工厂模式 2.  选择   7  General Settin ...

  2. 一篇文章教会你理解Scrapy网络爬虫框架的工作原理和数据采集过程

    今天小编给大家详细的讲解一下Scrapy爬虫框架,希望对大家的学习有帮助. 1.Scrapy爬虫框架 Scrapy是一个使用Python编程语言编写的爬虫框架,任何人都可以根据自己的需求进行修改,并且 ...

  3. Rman备份及不完全恢复操作

    最后更新时间:2018/12/18 启用归档 --检查是否为归档 SQL> archive log list; Database log mode              No Archive ...

  4. 紫书 例题 10-20 UVa 10900(连续概率)

    分两类,当前第i题答或不答 如果不回答的话最大期望奖金为2的i次方 如果回答的话等于p* 下一道题的最大期望奖金 那么显然我们要取最大值 所以就要分类讨论 我们设答对i题后的最大期望奖金为d[i] 显 ...

  5. Object-C,循环语句for,while,do-while

    演示循环语句,for,while,do-while,和C系列的语言,语法基本一致1到10,求和 // // main.m // for-while // // Created by fansunion ...

  6. 题解 CF1000E 【We Need More Bosses】

    这道题绝不是紫题... 题目的意思其实是让你求一个无向无重边图的直径. 对于求直径的问题我们以前研究过树的直径,可以两遍dfs或者两边bfs解决. 对于图显然不能这样解决,因为图上两点之间的简单路径不 ...

  7. Spring Boot学习总结(2)——Spring Boot整合Jsp

    怎么使用jsp上面起了疑问,查阅了多方资料,找到过其他人的博客的描述,也找到了spring在github上的给出的例子,看完后稍微改动后成功 整合jsp,于是决定将整合过程记载下来. 无论使用的是那种 ...

  8. ArcGIS api for javascript——放大时切换图层

    描述 本例展示了如何在地图里指出显示的缓存或切片的细节等级(LODs).当打开示例地图,可以看到一些来自ArcGIS Online ESRI_Imagery_World_2D图层的影像.这个应用程序配 ...

  9. [Recompose] Stream Props to React Children with RxJS

    You can decouple the parent stream Component from the mapped React Component by using props.children ...

  10. PHP Apache shutdown unexpectedly启动错误解释及解决的方法

    在学PHP的时候,偶然发现XAMPP窗体Apache的启动出现错误,出现下面的错误提示: 9:52:41  [Apache] Attempting to start Apache app... 9:5 ...