代码:

<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] 前端路由实现单页跳转的更多相关文章

  1. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  2. 【前台】【单页跳转】整个项目实现单页面跳转,抛弃iframe

    即如下: [想做到点击nav侧边栏,仅替换右边div中的内容,而不是跳转到新的页面,这样的话,其实整个项目中就只有一个完整的页面,其他的页面均只写<body>内的部分即可,或者仅仅写要替换 ...

  3. vue-learning:38 - router - 前端路由的发展

    前端路由的发展 参考博客 前端路由是什么东西? 什么是路由 在jQuery时代,我们使用<a href="https://www.example.com/example/home.ht ...

  4. 使用 Flask 和 Vue.js 来构建全栈单页应用

    在这个教程中,我将向你展示如何将 Vue 的单页面应用和 Flask 后端连接起来. 简单的来说,如果想在 Flask 中使用 Vue 框架是没有什么问题的. 但在实际中存在一个明显的问题就是 Fla ...

  5. [vue]spa单页开发及vue-router基础

    - 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...

  6. 【转】移动Web单页应用开发实践——页面结构化

    1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...

  7. 移动Web单页应用开发实践——页面结构化

    1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...

  8. 单页应用动态设置页面title

    1.适用场景:所有通过router路由的单页应用. 2.示例代码:本文以vue-router为例. 在router.js中: let router = new Router({ routes: [ { ...

  9. Vue-router(前端路由)的两种路由模式

    Vue的两种路由模式: hash.history:默认是hash模式: 前端路由(改变视图的同时不会向后端发出请求) 一.什么是hash模式和history模式? hash模式:是指url尾巴后的#号 ...

随机推荐

  1. tomcat服务器怎样远程调试

    适合windows系统 1.首先tomcat/bin目录下startup.bat打开最前面添加以下代码: SET CATALINA_OPTS=-server -Xdebug -Xnoagent -Dj ...

  2. html快速编写

    1. 嵌套操作---------- 子操作: > div>ul>li <div> <ul> <li></li> </ul> ...

  3. 64位平台C/C++容易犯的错误

     64位平台的介绍 IA-64 is a 64-bit microprocessor architecture developed by Intel and Hewlett Packard compa ...

  4. linux创建用户并设置密码

    1.在root权限下,useradd只是创建了一个用户名,如(useradd+用户名),它并没有在/home目录下创建同名文件夹,也没有创建密码,因此利用这个用户登录系统,是登录不了的,为了避免这样的 ...

  5. 把ajax包装成promise的形式(3)

    概述 为了体验promise的原理,我打算自己把ajax包装成promise的形式.主要希望实现下列功能: // 1.使用success和error进行链式调用,并且可以在后面加上无限个 promis ...

  6. ubuntu双网卡配置,实现内网外网同时访问!

    我们假定内网IP为:10.35.0.58,内网网关为:10.35.0.254:外网IP为222.76.250.4,外网网关为:222.76.250.1.其中局域名网需要连接:10.35.0.X,10. ...

  7. Docker 镜像、容器、仓库的概念及基本操作

    Docker 包括三个基本概念: 镜像(Image)容器(Container)仓库(Repository) 这三部分组成了Docker的整个生命周期,如下图所示,容器是由镜像实例化而来的,这和我们学习 ...

  8. 【jQuery】(2)---Jquery过滤选择器

                         1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的 ...

  9. mysql 开发基础系列2 整型数据类型

    Mysql 的数据类型 1. 对整数类型, Mysql 还支持类型名称后面的小括号内指定的显示宽度,例如int(5) 表示宽度小于5位时填满宽度,如果不显示指定宽度默认是int(11),一般配合zer ...

  10. Android--Menus

    前言 本篇博客讲解一下菜单Menu的使用.菜单在windows应用中使用十分广泛,几乎所有的windows应用都有菜单,Android中也加入了菜单的支持.从官方文档了解到,从Android3.0(A ...