[angularjs] 前端路由实现单页跳转
代码:
<div ng-app="Home">
<div ui-view></div>
<div ng-controller="Index">
<a href="#/one">第一页</a>
<a href="#/two">第二页</a>
<a href="#/three">第三页</a>
</div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script type="text/javascript">
var app=angular.module("Home",["ui.router"]);
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state("one",{
url:"/one",
templateUrl:'page1.html',
controller: function($scope){
$scope.title = '第一页';
}
});
$stateProvider.state("two",{
url:"/two",
templateUrl:'page2.html',
controller: function($scope){
$scope.title = '第二页';
}
});
$stateProvider.state("three",{
url:"/three",
templateUrl:'page3.html',
controller: function($scope){
$scope.title = '第三页';
}
});
});
app.controller("Index",function($scope){});
</script>
效果图:

[angularjs] 前端路由实现单页跳转的更多相关文章
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
- 【前台】【单页跳转】整个项目实现单页面跳转,抛弃iframe
即如下: [想做到点击nav侧边栏,仅替换右边div中的内容,而不是跳转到新的页面,这样的话,其实整个项目中就只有一个完整的页面,其他的页面均只写<body>内的部分即可,或者仅仅写要替换 ...
- vue-learning:38 - router - 前端路由的发展
前端路由的发展 参考博客 前端路由是什么东西? 什么是路由 在jQuery时代,我们使用<a href="https://www.example.com/example/home.ht ...
- 使用 Flask 和 Vue.js 来构建全栈单页应用
在这个教程中,我将向你展示如何将 Vue 的单页面应用和 Flask 后端连接起来. 简单的来说,如果想在 Flask 中使用 Vue 框架是没有什么问题的. 但在实际中存在一个明显的问题就是 Fla ...
- [vue]spa单页开发及vue-router基础
- 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...
- 【转】移动Web单页应用开发实践——页面结构化
1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...
- 移动Web单页应用开发实践——页面结构化
1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...
- 单页应用动态设置页面title
1.适用场景:所有通过router路由的单页应用. 2.示例代码:本文以vue-router为例. 在router.js中: let router = new Router({ routes: [ { ...
- Vue-router(前端路由)的两种路由模式
Vue的两种路由模式: hash.history:默认是hash模式: 前端路由(改变视图的同时不会向后端发出请求) 一.什么是hash模式和history模式? hash模式:是指url尾巴后的#号 ...
随机推荐
- kubernets基础
1.定义和功能. 1.1定义:kubernets解释为舵手或者飞行员,以Borg为主衍生出. 1.2功能:自动装箱,自我修复,水平扩展,服务发现和负载均衡,自动发布和回滚. 密钥和配置管理,存储编排, ...
- 执行一个内容为SQL语句的字符串
两种方式:exec (sqlStr);或exec sp_executesql @sqlStr;绝大多数情况下,应使用第二种方式来执行动态sql.因为这种方式能重用执行计划,并且更安全. 参考例子:ht ...
- QEMU KVM Libvirt手册(5) – snapshots
前面讲了QEMU的qcow2格式的internal snapshot和external snapshot,这都是虚拟机文件格式的功能. 这是文件级别的. 还可以是文件系统级别的,比如很多文件系统支持s ...
- Email发展历史
据我所知:1987年9月20日,有“中国互联网第一人”之称的钱天白从北京经意大利向前联邦德国卡尔斯鲁厄大学发出了中国第一封电子邮件,内容是“ 穿越长城,走向世界”.这是中国人在网络上的第一步,他开创了 ...
- 初探系列 — Pharbers用于单点登录的权限架构
一. 前言 就职公司 法伯科技是一家以数据科技为驱动, 专注于医药健康领域的循证咨询公司. 以数据科学家身份, 赋能医药行业. 让每位客户都能享受数据带来的价值, 洞察业务, 不止于数据, 让决策更精 ...
- 站在JAVA数据结构的视角看待简单表结构
1.前言: 我们提到程序中的集合的时候,往往脑海中会浮现出, 如ArrayList和LinkedList以及和HashMap.当然在提到ArrayList和LinkedList的时候,我们大多数的人都 ...
- Kali学习笔记13:操作系统识别
为什么要扫描操作系统呢? 其实和上一篇博客:<服务扫描>类似,都是为了能够发现漏洞 发现什么漏洞? 不同的操作系统.相同操作系统不同版本,都存在着一些可以利用的漏洞 而且,不同的系统会默认 ...
- 使用ajax的post方式下载excel
项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token验证信息,参考了很多文章,最终实现如下: PHP后端使用base64: $filename = 'd ...
- List,泛型和Datatable 的相互转换
public static DataTable ToDataTableTow(IList list) { DataTable result = new DataTable(); ) { Propert ...
- 课程五(Sequence Models),第二 周(Natural Language Processing & Word Embeddings) —— 2.Programming assignments:Emojify
Emojify! Welcome to the second assignment of Week 2. You are going to use word vector representation ...