一、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. [JSOI2007]建筑抢修 优先队列 贪心

    Code: #include<cstdio> #include<algorithm> #include<cstring> #include<queue> ...

  2. python shutil 模块 的剪切文件函数 shutil.movemove(src, dst)，换用 os.rename(sourceFile, targetFile)

    Google 一搜python 剪切文件,出来shutil 这模块,网上很多人也跟疯说shutil.move(src, dst)就是用来剪切文件的,结果一试,剪切毛线,文件都复制到另一个文件夹了,源文 ...

  3. 我的PHP学习之路

    由于工作中,做微信小程序需要我自己写一些后台代码.并且公司后台用的是php.所以我决定在周末和下班后抽空学习php.一开始,我想找一些入门视频来学,然后发现好像效率不是很好.不如看书来得痛快.(主要是 ...

  4. WHU 1552 Seats 枚举

    题意: 有一个年级中7个班的n个学生. 一天,他们毫无顺序的站成一排.请计算最小的交换次数,使得 相同班的同学都站在一起. (只有站在一起的人才能交换) 思路: 如果知道班级的最终排列就能在很短的时间 ...

  5. 【习题 8-20 UVA-1620】Lazy Susan

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 会发现,如果把连续4个数字进行一次翻转的话. 假设这连续的4个数字的逆序数为x; 那么翻转过后,逆序数就会变成6-x; (最多6个逆 ...

  6. 【Codeforces Round #423 (Div. 2) A】Restaurant Tables

    [Link]:http://codeforces.com/contest/828/problem/A [Description] 有n个组按照时间顺序来餐馆; 每个组由一个人或两个人组成; 每当有一个 ...

  7. 洛谷 P3467 [POI2008]PLA-Postering

    P3467 [POI2008]PLA-Postering 题目描述 All the buildings in the east district of Byteburg were built in a ...

  8. SharePoint Search之(五)Query spelling correction— 查询拼写纠正

     Query spelling correction 在使用搜索引擎的时候.假设一不小心输入错误,或者对于某个词语记得不太清楚,搜索引擎会自己主动纠正: 这个功能可以缩短用户的时间,很好用.在Sh ...

  9. BZOJ 1146 二分+链剖+线段树+treap

    思路: 恶心的数据结构题-- 首先 我们 链剖 把树 变成序列 再 套一个 区间 第K大就好了-- 复杂度(n*log^4n) //By SiriusRen #include <cstdio&g ...

  10. 洛谷P2415 集合求和

    题目描述 给定一个集合s(集合元素数量<=30),求出此集合所有子集元素之和. 输入输出格式 输入格式: 集合中的元素(元素<=1000) 输出格式: 和 输入输出样例 输入样例#1: 2 ...