代码：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. gym101532 2017 JUST Programming Contest 4.0

    台州学院ICPC赛前训练5 人生第一次ak,而且ak得还蛮快的,感谢队友带我飞 A 直接用claris的模板啊,他模板确实比较强大,其实就是因为更新的很快 #include<bits/stdc+ ...

  2. WebService常用公共接口

    Web Service 一些对外公开的网络服务接口   商业和贸易: 1.股票行情数据 WEB 服务(支持香港.深圳.上海基金.债券和股票:支持多股票同时查询) Endpoint: http://we ...

  3. RUBY 模拟rtsp消息

    require 'rtsp/client' require 'log_switch' require 'socket' RTSP::Client.log? # => false RTSP::Cl ...

  4. BZOJ 1975 魔法猪学院（A*+手写堆）

    1975: [Sdoi2010]魔法猪学院 Time Limit: 10 Sec  Memory Limit: 64 MB Submit: 1941  Solved: 595 [Submit][Sta ...

  5. 一个html5视频播放器

    具有播放视频,拖拽,自定义右键菜单,上传头像的功能 <!DOCTYPE html><html lang="en"> <head> <met ...

  6. js setInterval 启用&停止

    以下面例子为说明: <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type= ...

  7. [AGC016B] Colorful Hats （结论）

    Description 有n个人,每个人都戴着一顶帽子.当然,帽子有不同的颜色. 现在,每个人都告诉你,他看到的所有其他人的帽子共有多少种颜色,请问你有没有符合所有人的描述的情况. Input 第一行 ...

  8. C#设计模式视频教程（不知道讲的好不好，刚刚看到）

    原文发布时间为:2008-12-08 -- 来源于本人的百度文章 [由搬家工具导入] http://u.youku.com/user_video/uid_happyboy27.html 优酷网。。

  9. XmlRootElement

    作用是 java对象 <---> xml文件   之间的转换 JAXB Annotation @XmlRootElement   // xml 文件的根元素 @XmlElement @Xm ...

  10. 理解printk函数【转】

    转自:http://blog.csdn.net/Tommy_wxie/article/details/17026391 理解printk函数 Printk函数是在开发驱动过程中经常用到的一个函数,作用 ...