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 ...
随机推荐
- 将子域名请求路由到MVC区域
写了个扩展,分享给需要的朋友. 0x01 使用方法 在mvc区域中的{xxxx}AreaRegistration.cs文件中,如ProjectsAreaRegistration.cs <pre& ...
- 蓝桥杯-密码发生器-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- 【Python灰帽子--黑客与逆向工程师的Python编程之道】我的学习笔记，过程.（持续更新HOT）
我的学习笔记---python灰帽子 世界让我遍体鳞伤,但伤口长出的却是翅膀. -------------------------------------------- 前言 本书是由知名安全机构Im ...
- Jdk1.6 JUC源码解析(12)-ArrayBlockingQueue
功能简介: ArrayBlockingQueue是一种基于数组实现的有界的阻塞队列.队列中的元素遵循先入先出(FIFO)的规则.新元素插入到队列的尾部,从队列头部取出元素. 和普通队列有所不同,该队列 ...
- jquery之属性操作
jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...
- Python—课时ONE
说实话第一次接触Python还是在我刚上班的时候,听说很多人这个开发语言很吊,应用的领域很多.but这些东西还不能够吸引我,真正的原因是因为这个开发语言很是简单,比较适合我这种2B学的.但是越往后越觉 ...
- 来自一位工作一年多的猿的分享 ------- ioc
这是我第一次写东西记录吧:还记得小学老师教的写文章要有"开篇 起伏 高潮...高潮 结束",反正我不会用上: 最近在研究IOC这玩意:百度了很多关于这方面的帖子:关于IOC和DI的 ...
- OBS实现直播解决方案【html实现直播】
项目的需要,要整一个视频直播,但又不想在其他平台那种直播室盗链展示,那我就直接用播放器来实现rtmp流媒体服务器推流吧!没废话,走起 1.你要有一个媒体服务器,暂时用[盘古云],这个还好,算是不错的平 ...
- sublime text3 支持终端打开文件
sudo ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl
- 0Raspi开启root权限并登录使用
sudo passwd root sudo passwd --unlock root su root 切换回用 su pi 开始登陆选择root preferences>raspberry ...