还记得我们刚开始学习html时使用的锚节点实现跳转吗?

<a href="#target">我想跳转至目标位置</a>

<p>第一条</p>

....  
<p id="#target">我是目标位置</p> ...

在js中实现跳转也是利用了这一点,下面直接在代码中解释吧:

  <body>
<ul>
<li><a href="#/music">音乐</a></li>
<li><a href="#/friend">朋友</a></li>
</ul>
<div id="view">
<!--页面上需要修改的内容-->
</div>
</body>
<script>
window.addEventListener('hashchange', function(){ //hashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 。
console.log(location.hash); //输出结果见下图:
var view=document.getElementById('view'); //获取页面中想要插入元素的id
switch(location.hash){
case '#/music': //利用switch case来判断当前点击的锚节点是什么 ,同时设置相应的内容
view.innerHTML='音乐';
break;
case '#/friend':
view.innerHTML="朋友";
break;
}
})
</script>

接下来是在angulajs框架里如何使用路由切换实现单页面跳转:

直接代码中解释好了:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="myApp">
<ul>
<li><a href="#/first">第一种方式</a></li>
<li><a href="#/second">第二种方式</a></li>
<li><a href="#/third">第三种方式</a></li>
<li><a href="#/fourth">第四种方式</a></li>
</ul>
<div ng-view>
<!--页面上需要修改的内容-->
</div>
</body>
<script src="../../angular-1.5.8/angular.js"></script>
<script src="../../angular-1.5.8/angular-route.js"></script>
<script>
// 创建模块
var app=angular.module('myApp',['ngRoute']); //写路由表
app.config(function($routeProvider){
$routeProvider
.when('/first',{
template:'<h1>第一种方式:直接写入进来</h1>'
})
.when('/second',{
template:'<h1>{{secondWay}}</h1>',
controller:function($scope){ //这里是匿名的控制器
$scope.secondWay='第二种方式:使用匿名的controller的方式'
}
})
.when('/third',{
template:'<h1>{{thirdWay}}</h1>',
controller:'myCtrl' //第三种方式:使用命名的myCtrl的控制器写入
})
.when('/fourth',{
templateUrl:'mytemplate.html',
controller:'myCtrl2'
// 第四种方式:angularjs跳转到模板所在路径实现方法
})
//以下为当我们在地址栏输入错误的路径时处理的结果
// .otherwise({
// template:'<h1>{{extraError}}</h1>',
// controller:function($scope){
// $scope.extraError='这里是路径错误时产生的文字';
// }
// })
//
//不过一般我们会默认的让它跳转到一个页面
.otherwise({
redirectTo:'/first' //默认第一个单页面
});
}) //对应上面的第三种方式:有控制器名称的用法
app.controller('myCtrl',function($scope){
$scope.thirdWay='第三种方式:这是使用有名字的控制器的方法';
});
//对应上面的第四种写法:有控制器名称并链入模板页面
app.controller('myCtrl2',function($scope){
$scope.fourthWay='第四种方式:这是从外部html模板中获取的数据';
});
</script>
</html>

重要补充说明:

1.第四种方式需要在额外创建一个名为"mytemplate.html"的页面

(因为templateUrl属性值是一个url路径,路径指向一个html模板,html模板会填充(或替换)指令内容):

页面内容为:

2.在设置ng-app(angualar作用范围)时注意是放在body里面,我一开始放在了ul里,结果导致报错.

3.其次注意需要使用当有服务的代码编辑器打开,(webStorm可以)即地址栏是http://localhost:63342/...

如果直接打开,或者在(sublime)中运行,即以:file:///D:/ ...  就不是在服务器上运行那么它就会出错:显示:mytemplate.html那个页面无法加载:

个人理解,如有不足,希望各位大神留言补充~

关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转的更多相关文章

  1. [angularjs] 前端路由实现单页跳转

    代码: <div ng-app="Home"> <div ui-view></div> <div ng-controller=" ...

  2. 表单提交学习笔记(一)—利用jquery.form提交表单(后台.net MVC)

    起因:一开始想用MVC本身的Form提交方法,但是提交完之后想进行一些提示,MVC就稍显不足了,最后用jquery插件---jquery.form.js,完美解决了问题~~ 使用方法 一.下载jque ...

  3. 利用angularjs完成注册表单

    ng-init="username = 'first'"设置初始显示first字段 ng-class="{'error':signUpForm.username.$inv ...

  4. UI设计实战篇——利用Bootstrap框架制作查询页面的界面

    Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...

  5. 利用Bootstrap框架制作查询页面的界面

    UI设计实战篇——利用Bootstrap框架制作查询页面的界面   Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...

  6. (转)UI设计实战篇——利用Bootstrap框架制作查询页面的界面

    原文地址:http://www.cnblogs.com/grenet/p/3413085.html Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺 ...

  7. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  8. vue单页应用中,使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据。

    使用VUE开发单页项目时遇到这样的问题,mounted中使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据.我以为是因为我路由用的push导致的,改成repla ...

  9. JS高级学习笔记(9) 之 转:前端路由跳转基本原理

    原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...

随机推荐

  1. SRM 146 DIV1 800

    Problem Statement      The purpose of a roundabout is to control the flow of traffic at a busy inter ...

  2. Linux C 开发环境配置

    换了新电脑,重装了Fedora10,所有开发环境都要重新配置啦,开个随笔记录下过程,说不定以后还要用~ 首先Fedora10装好之后是不带 VIM 的,果断安装之: 打开终端,首先 su 命令切换到r ...

  3. inotifywait命令

    [命令格式]: inotifywait [ options ] file1 [ file2 ] [ file3 ] [ ... ][命令原意]: inote file system wait[命令路径 ...

  4. javascript照片墙效果

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 关于OPC的研究1]c# opc client源码调试和学习笔记

    c# opc client是一个在网上下载的示例程序,调试的时候还是费了一番周折,服务器端程序来自king view6.55,另文介绍. 1.注册dll 程序中有一个名叫OPCDAAuto.dll的文 ...

  6. JQuery Mobile入门——设置后退按钮文字(转)

    http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28  CSDN博客原文  h ...

  7. 从红米手机经常发生UIM没有服务的一些猜想

    缘起:买了测试用的红米手机,安装电信卡,经常生UIM没有服务,大约两天1次. 我的解决办法:飞行模式切换一下就恢复正常. 之前这张卡用三星的信号是满格,红米断开挺经常的 上网搜索: 同样的现象,还好官 ...

  8. 未能加载文件或程序集EntityFramework, Version=6.0.0.0解决办法

    其他信息: 未能加载文件或程序集"EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934 ...

  9. WdatePicker日期控件的用法

    前台 <td height="25" width="*" align="left"> <asp:TextBox ID=&q ...

  10. linux之find命令详解

    linux之find命令详解 查找文件find ./ -type f查找目录find ./ -type d查找名字为test的文件或目录find ./ -name test查找名字符合正则表达式的文件 ...