代码：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. [转]Linux 技巧：让进程在后台可靠运行的几种方法

    转自: https://www.ibm.com/developerworks/cn/linux/l-cn-nohup/index.html 我们经常会碰到这样的问题,用 telnet/ssh 登录了远 ...

  2. C#中的is和as的转型区别

    摘自CLR via C#第三版第四章 在c#中is可以用来判断一个对象是否兼容给定的类型,如果是返回true,否则返回false. 同时is是永不会抛出异常的.如果对象引用是null,is操作符总是返 ...

  3. webService的wsdl和restful的wadl的区别

    WebService之WADL和WSDL区别 两者都是基于自然语言描述的Web Application接口 . WADL主要用于Rest基础. Java开发WebService最重要的两个规范: JS ...

  4. 【04】react 之 复合组件

    1.1.  什么是组件? 前端开发中组件也称为UI组件,组件即将一段或几段完成各自功能的代码段封装为一个或几个独立的部分.UI组件包含了这样一个或几个具有各自功能的代码段,最终完成了用户界面的表示.R ...

  5. .net web api ioc unity usage

    1.use nuget to install unity.webapi 2.add configurations in application_start folder using Microsoft ...

  6. android基本控件学习-----TextView

    一.TextView的讲解 <实例一> <?xml version="1.0" encoding="utf-8"?> <Linea ...

  7. linux下不是很完美的提高android虚拟机的启动速度

    去年双十一换的新电脑,华硕vivo4000的,配置的不算很好,4k的屏幕:3840×2160, 940M的显卡, core i7的CPU, 8G的内存,硬盘是1T的机械硬盘,除了硬盘基本感觉还可以吧. ...

  8. linux下编译安装gcc5.1

    一.下载源代码:ftp://ftp.mirrorservice.org/sites/sourceware.org/pub/gcc/releases/gcc-5.1.0/gcc-5.1.0.tar.bz ...

  9. LeetCode OJ-- Add Binary

    https://oj.leetcode.com/problems/add-binary/ 对两个二进制字符串求和. 对于字符串 ans_str,求它的翻转. reverse(ans_str.begin ...

  10. 【转载】Outlook2010 移动数据文件到其它地方

            您可以将数据文件移到计算机的其他文件夹中.移动文件的一个原因在于可使备份更容易并且可以让默认的outlook邮件文件不在存在C盘,导致装系统不见或者文件过大而撑死了C盘.例如,如果数据 ...