AngularJS路由使用案例:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS路由使用案例</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/angular-route.min.js"></script>
</head>
<body ng-app="myapp">
<div>
<h1>在你我他学习吧,你可以学习到如下技术:</h1>
<a href="#/JAVAEE"></a>
<a href="#/AngularJS"></a>
<a href="#/EasyUI"></a>
<a href="#/MySQL"></a>
</div>
<!--路由加载后,更新变化的内容-->
<div ng-view></div>
<div>
<h1>footer</h1>
</div>
</body>
<script type="text/javascript">
//定义myapp模块
var myapp = angular.module("myapp",["ngRoute"]);
//配置模块的路由
myapp.config(["$routeProvider",function($routeProvider){
$routeProvider.when('/JAVAEE',{
templateUrl:'javaee.html'
}).when('/AngularJS',{
templateUrl:'angularjs.html'
}).when('/EasyUI',{
templateUrl:'easyui.html'
}).when('/MySQL',{
templateUrl:'mysql.html'
}).otherwise({
redirectTo:'JAVAEE'
});
}]);
</script>
</html>

javaee.html代码:

<h1>javaee</h1>

angularjs.html代码:

<h1>angular</h1>

easyui.html代码:

<h1>easyui</h1>

mysql.html代码:

<h1>mysql</h1>

AngularJS路由使用案例的更多相关文章

  1. AngularJS 路由

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...

  2. Angularjs路由需要了解的那点事

    Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...

  3. 【转】AngularJS路由和模板

    1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...

  4. AngularJS路由和模板

    前言 如果想开发一款类似gmail的web应用,我们怎么做呢? 以jQuery的思路,做响应式的架构设计时,我们要监听所有点击事件,通过事件函数触发我们加载数据,提交,弹框,验证等的功能:以 Angu ...

  5. AngularJS路由跳转

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是 ...

  6. AngularJS 路由精分

    AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...

  7. AngularJS进阶(二)AngularJS路由问题解决

    AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...

  8. angularjs路由path方式实现原理探究

    angularjs路由 https://angular.io/guide/router 通过URL解释, 来定位客户端生成的浏览器端视图. 你可绑定路由到页面的链接上, 当用户点击链接, 可以浏览到相 ...

  9. AngularJS路由系列(6)-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

随机推荐

  1. RSA简介

    RSA概述 首先看这个加密算法的命名.很有意思,它其实是三个人的名字.早在1977年由麻省理工学院的三位数学家Rivest.Shamir 和 Adleman一起提出了这个加密算法,并且用他们三个人姓氏 ...

  2. .net core 2.1 Razor 超快速入门

    以下过程如有不明白的,可参考:https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/razor-pages/?view=aspnetcore-2 ...

  3. sql 查询所有子节点示例

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code <!-- 查询机构的所有子机构 --> <select id=&qu ...

  4. 1、原生jdbc连接oracle数据库简单介绍

    一.jbdc的常用API1.Connection:数据库的链接对象2.statement:数据库sql执行对象3.preparedStatment:sql的预编译处理对象,是statement子接口4 ...

  5. CONTRO4 系列

    软件下载 https://getcomposer.org/download/ 0技术手册 https://wenku.baidu.com/view/4b511ead376baf1ffd4fad36.h ...

  6. (二 -3-3) 天猫精灵接入Home Assistant-自动发现Mqtt设备-自动生成配置信息

    http://www.hassmart.com/products/switches/#tab=config switch: - platform: mqtt name: keting state_to ...

  7. Visual Studio 2013 编译 64 位 Python 的 C 扩展 (使用 PyObject 包装)

    对于 32 位 Python 的 C 扩展,以前用过 mingW32 编译, 但是 mingW32 不支持 64 位 Python 的 C 扩展编译,详情可见 stackoverflow,这位前辈的大 ...

  8. PAT A1052 Linked List Sorting (25 分)——链表,排序

    A linked list consists of a series of structures, which are not necessarily adjacent in memory. We a ...

  9. Vue学习-基本指令

    一.关于vue介绍:https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485737&idx=1&sn=14fe ...

  10. mysql 实现树形的遍历

    前言:关于多级别菜单栏或者权限系统中部门上下级的树形遍历,oracle中有connect by来实现,mysql没有这样的便捷途径,所以MySQL遍历数据表是我们经常会遇到的头痛问题,下面通过存储过程 ...