代码:

<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. java.exe

    进程:是一个正在执行中的程序.每一个进程执行都有一个执行顺序.该顺序是一个执行路径,或者叫一个控制单元. 线程(例:FlashGet):就是进程中一个独立的控制单元.线程在控制着进程的执行.一个进程中 ...

  2. AFNetWorking使用自签证书验证

    In order to validate a domain name for self signed certificates, you MUST use pinning 上述问题的解决方法: sec ...

  3. 利用Swashbuckle生成Web API Help Pages

    利用Swashbuckle生成Web API Help Pages 本文将通过Swagger的.NET Core的实现封装工具Swashbuckle来生成上一篇-<创建ASP.NET Core ...

  4. 全栈开发工程师微信小程序-上(中)

    全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...

  5. dubbo实用知识点总结(二)

    1. 参数验证 2. 结果缓存 3. 泛化引用 客户端没有对应接口类的情况,可以直接调用 4. 泛化实现 5. 回声测试 用于检测服务是否可用 6. 上下文信息 7. 隐式传参(不常用) 8. 异步调 ...

  6. Maven相关命令

    mvn comile  编译(main - >java) mvn test 测试 mvn package  打成 jar / war 包 mvn install 将模块放入本地仓库 mvn cl ...

  7. Xamarin.Android 制作搜索框

    前段时间仿QQ做了一个搜索框样式,个人认为还不错,留在这里给大家做个参考,希望能帮助到有需要的人. 首先上截图(图1:项目中的样式,图2:demo样式): 不多说直接上代码: Main.axml &l ...

  8. Intellij IDEA神器居然还有这些小技巧

    概述 Intellij IDEA真是越用越觉得它强大,它总是在我们写代码的时候,不时给我们来个小惊喜.出于对Intellij IDEA的喜爱,我决定写一个与其相关的专栏或者系列,把一些好用的Intel ...

  9. ASP .NET CORE 根据环境变量支持多个 appsettings.json

    0.背景 在开发项目的过程当中,生产环境与调试环境的配置肯定是不一样的.拿个最简单的例子来说,比如连接字符串这种东西,调试环境肯定是不能连接生产数据库的.在之前的话,这种情况只能说是你 COPY 两个 ...

  10. 2019年2月备战春招最新大数据+Java岗位+人工智能岗位资料免费送【限时领取】

    不多说,直接上干货! 欢迎大家,关注微信扫码并加入我的3个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑        每天都有大量的学习视频资料和精彩 ...