angular路由最基本的实例---简单易懂
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/angularjs.js"></script>
<script src="../js/angular-route.min.js"></script>
<style type="text/css">
body{
font-size: 32px;
}
.show{
background: #eeeeee;
padding: 8px;
width: 500px;
margin:8px 0px;
}
</style>
</head>
<body>
<div>
<div>
<a href="#/">首页</a>
<a href="#/book">图书</a>
<a href="#/game">游戏</a>
</div>
<div ng-view></div>
</div>
</body>
<script>
var app=angular.module('myapp',['ngRoute']);
app.controller('sub1',function($scope){
$scope.title="老王1";
});
app.controller('sub2',function($scope){
$scope.title="老王2";
});
app.controller('sub3',function($scope){
$scope.title="老王3";
});
app.config(function($routeProvider) {
$routeProvider.when('/',{
controller:"sub1",
template:"<div class='show'>{{title}}</div>"
})
.when('/book',{
controller:"sub2",
template:"<div class='show'>{{title}}</div>"
})
.when('/game',{
controller:"sub3",
template:"<div class='show'>{{title}}</div>"
})
.otherwise({ redirectTo: '/' });
})
</script>
</html>
angular-route.min.js是路由的插件
angular路由最基本的实例---简单易懂的更多相关文章
- hive基本的操作语句（实例简单易懂，create table XX as select XX）
hive建表语句DML:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+DDL#LanguageManualDDL-Cr ...
- 【转】JS回调函数--简单易懂有实例
JS回调函数--简单易懂有实例 初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数. 我们先来看看回调的英文定义:A callback is a function that is ...
- vue,react,angular三大web前端流行框架简单对比
常用的到的网站 vue学习库: https://github.com/vuejs/awesome-vue#carousel (json数据的格式化,提高本地测试的效率) json在线编辑: http: ...
- Angular路由——路由基础
一.路由相关对象 Router和RouterLink作用一样,都是导航.Router是在Controller中用的,RouterLink是在模版中用到. 二.路由对象的位置 1.Routes对象 配置 ...
- 路由其实也可以很简单-------Asp.net WebAPI学习笔记（一） ASP.NET WebApi技术从入门到实战演练 C#面向服务WebService从入门到精通 DataTable与List<T>相互转换
路由其实也可以很简单-------Asp.net WebAPI学习笔记(一) MVC也好,WebAPI也好,据我所知,有部分人是因为复杂的路由,而不想去学的.曾经见过一位程序猿,在他MVC程序中, ...
- angularjs中使用锚点，angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
- HashSet的实现原理，简单易懂
HashSet的实现原理,简单易懂 答: HashSet实际上是一个HashMap实例,都是一个存放链表的数组.它不保证存储元素的迭代顺序:此类允许使用null元素.HashSet中不允许有重复元 ...
- angular路由配置以及使用
一.生成路由文件 按照惯例,有一个独立模块来配置相关路由,这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中. 使用CLI生成 ...
- 用于实现tab页签切换页面的angular路由复用策略
使用场景 打开菜单页面的时候,出现对应页面的页签.切换页签,原来的页面信息状态保留,关闭页签则保留的信息删除.使用路由复用策略,保存路由快照.实现效果如图所示 实现过程 概述: 1.在app.modu ...
随机推荐
- Javascript中Array（数组）对象常用的几个方法
Javascript中Array数组的几个常用方法 pop() --获取数组中末尾的元素 shift() --获取数组中首位元素 push() --在数组中末尾增加元素 slice() --按照下 ...
- python自动化开发-[第一章]-练习题
1.使用while循环输入 1 2 3 4 5 6 8 9 10 i = 1 while i < 11: if i == 7: i += 1 continue print (i) i += 1 ...
- DFB系列 之 Clear清空surface缓存
1. 函数原型解析 函数声明: DFBResult Clear ( IDirectFBSurface * thiz, u8 r, u8 g, ...
- PHP count() 函数
count() 函数计算数组中的单元数目或对象中的属性个数. 对于数组,返回其元素的个数,对于其他值,返回 1.如果参数是变量而变量没有定义,则返回 0.如果 mode 被设置为 COUNT_RECU ...
- 权限管理系统 mysql 数据脚本
# SQL-Front 5.1 (Build 4.16) /*!40101 SET @OLD_SQL_MODE=@@SQL_MODE */; /*!40101 SET SQL_MODE='STRICT ...
- JavaEE开发之SpringBoot整合MyBatis以及Thymeleaf模板引擎
上篇博客我们聊了<JavaEE开发之SpringBoot工程的创建.运行与配置>,从上篇博客的内容我们不难看出SpringBoot的便捷.本篇博客我们继续在上篇博客的基础上来看一下Spri ...
- OC语言中如何在便利构造器中利用便利初始化进行初始化
因为利用便利初始化在便利构造器中进行初始化,所以要利用便利初始化的声明及实现部分,可与前篇做比较: 1. 主函数部分: 2. 接口部分: 3. 实现部分: 4. 打印结果: 感兴趣的朋友们可自己与前面 ...
- Ubuntu server搭建Java web服务器
1. 在Ubuntu server中安装ssh,如果是购买服务器的话,这已经是安装的了,包括vim 获取超级权限 先更新安装包 开始安装ssh ssh已经启动了 2. 安装Xshell并创建连接安装X ...
- cookie值的设置，获取及删除
<script> function setCookie( key, val, expire){ var dateTime = new Date(); dateTime.setTime( d ...
- Day2-列表、字符串、字典、集合
一.列表 定义列表:通过下标访问列表中的内容,从0开始 >>> name = ["zhang","wang","li",& ...