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

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

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

<p>第一条p>

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

...

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

 1  <body>
 2     <ul>
 3         <li><a href="#/music">音乐a>li>
 4         <li><a href="#/friend">朋友a>li>
 5     ul>
 6     <div id="view">
 7         
 8     div>
 9     body>
10     <script>
11  window.addEventListener('hashchange', function(){   //hashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 。
12        console.log(location.hash);  //输出结果见下图:
13        var view=document.getElementById('view');  //获取页面中想要插入元素的id
14        switch(location.hash){
15          case '#/music':            //利用switch case来判断当前点击的锚节点是什么 ,同时设置相应的内容
16          view.innerHTML='音乐';
17          break;
18          case '#/friend':
19          view.innerHTML="朋友";
20          break;
21        }
22  })
23     script>

关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转_第1张图片

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

直接代码中解释好了:

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Titletitle>
 6 head>
 7 <body ng-app="myApp">
 8     <ul>
 9         <li><a href="#/first">第一种方式a>li>
10         <li><a href="#/second">第二种方式a>li>
11         <li><a href="#/third">第三种方式a>li>
12         <li><a href="#/fourth">第四种方式a>li>
13     ul>
14     <div ng-view>
15         
16     div>
17 body>
18 <script src="../../angular-1.5.8/angular.js">script>
19 <script src="../../angular-1.5.8/angular-route.js">script>
20 <script>
21    // 创建模块
22    var app=angular.module('myApp',['ngRoute']);
23 
24    //写路由表
25    app.config(function($routeProvider){
26        $routeProvider
27         .when('/first',{
28            template:'

第一种方式:直接写入进来

' 29 }) 30 .when('/second',{ 31 template:'

{{secondWay}}

', 32 controller:function($scope){ //这里是匿名的控制器 33 $scope.secondWay='第二种方式:使用匿名的controller的方式' 34 } 35 }) 36 .when('/third',{ 37 template:'

{{thirdWay}}

', 38 controller:'myCtrl' //第三种方式:使用命名的myCtrl的控制器写入 39 }) 40 .when('/fourth',{ 41 templateUrl:'mytemplate.html', 42 controller:'myCtrl2' 43 // 第四种方式:angularjs跳转到模板所在路径实现方法 44 }) 45 //以下为当我们在地址栏输入错误的路径时处理的结果 46 // .otherwise({ 47 // template:'

{{extraError}}

',
48 // controller:function($scope){ 49 // $scope.extraError='这里是路径错误时产生的文字'; 50 // } 51 // }) 52 // 53 //不过一般我们会默认的让它跳转到一个页面 54 .otherwise({ 55 redirectTo:'/first' //默认第一个单页面 56 }); 57 }) 58 59 //对应上面的第三种方式:有控制器名称的用法 60 app.controller('myCtrl',function($scope){ 61 $scope.thirdWay='第三种方式:这是使用有名字的控制器的方法'; 62 }); 63 //对应上面的第四种写法:有控制器名称并链入模板页面 64 app.controller('myCtrl2',function($scope){ 65 $scope.fourthWay='第四种方式:这是从外部html模板中获取的数据'; 66 }); 67 script> 68 html>
View Code

重要补充说明:

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框架路由实现单页面跳转_第2张图片

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

 

转载于:https://www.cnblogs.com/xinjianheyi/p/6014316.html

你可能感兴趣的:(关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转)