代码：https://files.cnblogs.com/files/xiandedanteng/angularJSRouteSample.rar

点击‘首页’后：

点击‘电脑’后：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS 路由实例 - 菜鸟教程</title>
    </head>
    <body ng-app='routingDemoApp'>

        <h2>AngularJS 路由应用</h2>
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/computers">电脑</a></li>
            <li><a href="#/printers">打印机</a></li>
            <li><a href="#/blabla">其他</a></li>
        </ul>

        <div ng-view></div>
    </body>
</html>

<script src="angular1.4.6.min.js"></script>
<script src="angular-route_1.3.13.js"></script>
<script>
    angular.module('routingDemoApp',['ngRoute'])
    .config(['$routeProvider', function($routeProvider){
        $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/computers',{template:'这是电脑页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
    }]);
</script>

AngularJS中Route例子的更多相关文章

  1. angularJS中-$route路由-$http(ajax)的使用

    后台请求使用的是nodeJS驱动(后面帖代码),很简单的RESTFUL, 页面使用的是bottstarp3.0(懒人神器); 第一个例子: 在本地架设NODEJS, angular的所有请求都是请求本 ...

  2. AngularJS中的身份验证

    欢迎大家指导与讨论 : )  一.  身份验证的意义  首先呢,网络应用的身份验证的意图在于:保护网站中的重要资源.基于某些原因这些资源并不能公开,比如付费资源(交过钱的用户才能上的网络课程),或者一 ...

  3. AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法

    简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的 ...

  4. Angularjs中的缓存以及缓存清理

    写在最前面:这篇博文是2篇文章组成,详细介绍了Angularjs中的缓存以及缓存清理,文章由上海尚学堂转载过来,欢迎大家阅读和评论.转载请注明出处,谢谢! 一个缓存就是一个组件,它可以透明地储存数据, ...

  5. AngularJS中使用Directive、Controller、Service

    AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...

  6. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  7. 关于angularjs中的jQuery

    关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...

  8. 初次使用AngularJS中的ng-view,路由控制

    AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面 第一步:引入必要的js: <script src="js/lib/angular.js"> ...

  9. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

随机推荐

  1. 浅谈JavaScript中的函数问题

    前面的话:JavaScript可运行在所有主要平台的主流浏览器上,也可运行在每一个主流操作系统的服务器端上.所以呢,要想成为一名优秀的全栈工程师,必须懂得JavaScript语言.这是我整理的JS的部 ...

  2. Hadoop入门第五篇:Hive简介以及部署

    标签(空格分隔): Hadoop Hive hwi 1.Hive简介   之前我一直在Maxcompute上进行大数据开发,所以对数仓这块还算比较了解,在接受Hive的时候基本上没什么大的障碍.所以, ...

  3. 【bzoj4810】[Ynoi2017]由乃的玉米田 莫队算法+STL-bitset

    题目描述 由乃在自己的农田边散步,她突然发现田里的一排玉米非常的不美.这排玉米一共有N株,它们的高度参差不齐. 由乃认为玉米田不美,所以她决定出个数据结构题 这个题是这样的: 给你一个序列a,长度为n ...

  4. 【Luogu】P4067储能表（数位DP）

    题目链接 好的 看到这题之后我一直在想反演,然后想不出来,一度以为自己脑子有问题 然后我脑子真的有问题,这题tm根本就不是反演 设f[i][j][k][l]表示现在已经DP到从高位往低数的第i位,有没 ...

  5. js处理浮点数计算误差

    众所周知,浮点计算会产生舍入误差的问题,比如,0.1+0.2,结果应该是0.3,但是计算的结果并不是如此,而是0.30000000000000004,这是使用基于IEEE754数值的浮点计算的通病,j ...

  6. app自动测试-微信(iOS)-web-1

    appium 是一个用于app自动测试的工具.目前支持测试iOS, Android, Windows上的app.(github: https://github.com/appium/appium) 其 ...

  7. sqlmap post注入两种方式

    1. 使用抓包工具抓取数据包,sqlmap加载数据包 POST /SME/static/orderFind/orderIntfaceph HTTP/1.1 Host: abc.com User-Age ...

  8. 解决当打开Unity时 提示项目已经打开，而自己之前并没有打开过（可能之前异常关闭）的问题

    当打开Unity时 提示项目已经打开,而自己之前并没有打开过(可能之前异常关闭) 发生这种情况时 打开项目目录中的 Temp文件夹,可以找到 一个 UnityLockfile 文件 将这个文件删除就可 ...

  9. CODEVS【1380】没有上司的舞会

    题目描述 Description Ural大学有N个职员,编号为1~N.他们有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.每个职员有一个快乐指数.现在有个周年庆宴会 ...

  10. Repeater用ul li，一行显示多条数据

    原文发布时间为:2009-08-26 -- 来源于本人的百度文章 [由搬家工具导入] .rep {         width:680px;         float:left;         l ...