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 ...
随机推荐
- smarty的缓冲
首先在main文件夹里面建一个文件 huancun.php 然后在template文件夹里面建一个文件 huancun.html huancun.php中的内容为: require(" ...
- Roguelike元素对游戏设计的影响
Roguelike game自1980年以来,就占据着游戏市场中很大的份额,而现如今的很多游戏中,也加入了Roguelike元素来起到更好的效果.我们知道Roguelike game中有着一些看似任性 ...
- IO和socket编程
五一假期结束了,突然想到3周前去上班的路上看到槐花开的正好.放假也没能采些做槐花糕,到下周肯定就老了.一年就开一次的东西,比如牡丹,花期也就一周.而花开之时,玫瑰和月季无法与之相比.明日黄花蝶也愁.想 ...
- 568. Maximum Vacation Days
Problem statement: LeetCode wants to give one of its best employees the option to travel among N ci ...
- Jedis连接池使用
构建redis连接池,返还到连接池 private static JedisPool jedisPool = null; private static Jedis jedis; static { je ...
- vue1.0和vue2.0的区别(一)
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...
- C#基础知识-编程思想之封装（七）
既然是学习面向对象的编程那自然要了解面向对象中的三大基石,封装.继承和多态. 我觉得要解释这三大基本概念用一篇文档很难解释清楚,想要具体形象的去了解,还是需要每一个概念用一个篇幅来说明,将封装.继承和 ...
- shell群发邮件脚本
linux版本:CentOS 6.7 //可以使用lsb_release -a查看 一.修改/etc/mail.rc set from=123456@qq.com //你自己的真实邮箱 ...
- chrome的断点调试
DOM节点变化时触发断点具体触发条件可分3种情况:子节点有变化.节点的属性发生变化或这个节点被删除.可以快速找到对应的事件处理函数. 条件断点 写一个表达式,表达式为 true 时才触发该断点. 在D ...
- js 高级算法 - 动态规划
主要是看了<数据结构与算法>有所感悟,虽然这本书被挺多人诟病的,说这有漏洞那有漏洞,但并不妨碍我们从中学习知识. 其实像在我们前端的开发中,用到的高级算法并不多,大部分情况if语句,for ...