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 ...
随机推荐
- 使用Asp.Net MVC开发兼职文章系统
我已经开发好了,你拿去用就是了. 以下是README的内容,包含功能要求和开发过程的一些思考: 一.功能 1.学生兼职人员文章(任务.自由编写),审核(通过,退回修改,无效),并按每15天结算一次费用 ...
- focus、blur事件的事件委托处理(兼容各个流浏览器)
今天工作中遇到个问题,问题是这样的,一个form表单中有比较多的input标签,因为form中的input标签中的值都需要前端做客户端校验,由于本人比较懒而且特不喜欢用循环给 每个input元素添加b ...
- [Git]01 如何安装和配置
简单地说,Git 究竟是怎样的一个系统呢? 请注意,接下来的内容非常重要,若是理解了 Git 的思想和基本工作原理,用起来就会知其所以然,游刃有余.在开始学习 Git 的时候,请不要尝试把各种概 ...
- linux 下 启动oracle
[root@csyang ~]# su - oracle #首先su到oracle用户 [oracle@csyang ~]$ sqlplus sys/passwd as sysdba #使用sys用户 ...
- myeclipse离线安装PyDev
MyEclipse装好了,用来开发java web的,一直可以用,前几天用python写爬虫,也是在myeclipse下,离线安装的包.打开后配置了一下就可以了. 这里用的是PyDev2.8.2 ...
- Eclipse 如何添加Window Builder插件？
http://www.eclipse.org/windowbuilder/download.php 找到对应版本的window builder 如果不知道版本的话,可以在你的Eclipse-help- ...
- 纯css实现翻牌特效
大家有没有看到过网上很炫的翻牌效果,牌正面对着我们,然后点击一下,牌就被翻过来了,效果很酷炫,是不是很想知道是怎么实现的么,代码很简单,跟着小编往下走. 先给大家介绍一下翻牌的原理: 1.父容器设置设 ...
- 由于losf引起的pxc启动报错处理
PXC主节点启动完成后,再启动node1,error日志报错: 2017-05-02T15:23:42.830888Z 0 [ERROR] WSREP: Failed to read 'ready & ...
- zabbix监控docker
[toc] 1.下载模版 然后把模版放到/usr/local/lib/zabbix/agent下 github地址内含监控模版 2.修改 zabbix-agentd 配置文件 vim /usr/loc ...
- LeetCode4. Median of Two Sorted Arrays---vector实现O(log(m+n)--- findkth
这道题目和PAT上的1029是同一题.但是PAT1029用O(m+n)的时间复杂度(题解)就可以,这道题要求是O(log(m+n)). 这道题花费了我一个工作日的时间来思考.因为是log因而一直思考如 ...