还记得我们刚开始学习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. 1.1. 如何使用XproerUI库

    项目类型:MFC   XproerUI结构: 3rd                    第三方库目录   cximage     dll                编译的DLL目录   pug ...

  2. html5 canvas画不出图像的原因

    很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受.6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题. 做一个图像查看器(基于Chrom ...

  3. vc++ mfc中拖动效果的实现 借助于CImageList

    拖动是界面编程频繁使用的一个效果,在windows系统下可谓大行其道.纵观时下的应用软件几乎各个都支持各种各样拖动的效果,windows7更是把拖动做到了极致.其实说起来拖动的实现也很简单,对于有句柄 ...

  4. jquery实现幻灯片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Android菜鸟成长记7 -- Android的五大布局

    Android五大布局,相信android的都了解过,今天我根据自己的学习整理一下五大布局,主要介绍的是线性布局(LiearLayout),因为,其他的布局使用率不是很高. Android的五大布局 ...

  6. CSS 多浏览器兼容性问题及解决方案

    兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...

  7. SHOPNC占用CPU过高

    今天一个SHOPNC商城突然变慢,查看服务器情况,发现MYSQL占用181%CPU,然后查看PHP慢查询,发现这样的内容 [22-Nov-2016 20:55:41] [pool www] pid 5 ...

  8. HUST 1017 - Exact cover （Dancing Links 模板题）

    1017 - Exact cover 时间限制:15秒 内存限制:128兆 自定评测 5584 次提交 2975 次通过 题目描述 There is an N*M matrix with only 0 ...

  9. iOS 上架被拒原因保存

    一.后台一直在获取用户的定位,需要给用户电池消耗提示 Your app uses the Location Background mode but does not include the requi ...

  10. Window下Qt Creator启动错误解决方法

    很多电脑现在都是用的是双显卡,高性能的独显和性能比较差但耗电少的集显,在Window10系统下右键点击软件,在"图形处理器"里面可以选择使用什么显卡操作此软件.下面是我在运行Qt ...