单页面应用的路由问题

一、概念

单页面引用 (SPA), 被定义成一个目的在于提供一种接近桌面应用程序的流畅用户体验单web页面应用程序.

一旦页面被第一次加载后,不再会发生整个页面的更新,而是只会发生页面的局部更新,这样前后端的数据交互量会很小,用户体验会更好。

   在一个SPA中, 所有必需的代码(HTML, JavaScript, 以及 CSS ), 要不全部在初始页面中写好,要不在用户操作页面的过程中被动态加载。

开发单页面程序,因为只有一个总的html文件,会带来如下几个负面的问题:

1)总html文件的内容可能会比较多,一个文件的内容多了,就比较容易造成混乱,可读性和可维护性较差,管理和修改起来比较麻烦

2)在进行局部更新的时候,用户习惯希望页面的url也能发生变化,这样用户可以利用浏览器的前进和后退功能进行操作。

本文主要介绍如何在单页面情况下实现多视图的路由功能。

二、实现例子

在Angulajs中,实现机制是通过设置页面的 hash发生变化(可以通过链接 或 js代码),触发一个路由,然后动态去更新局部页面内容。

    <div  ng-app="myApp" ng-controller="myCtrl">
        <ul>
            <li><a href="#/a">click a</a></li>
            <li><a href="javascript:;" onclick="window.location.hash=‘#/b‘">
                click b</a>
            </li>
        </ul>
        <ng-view></ng-view>
    </div>

上面的html代码,希望实现的是当用户点击链接时,能从服务器或本地获取新的内容更新到 <ng-view> 标签对应的区域下。

为了实现上述目的,需要编写如下的Js代码:

angular.module("myApp",["ngRoute"]);

angular.module("myApp").controller("myCtrl",function(){
    });

angular.module("myApp").config(function($routeProvider) {
        $routeProvider
        .when(‘/a‘, {
            templateUrl: ‘a.html‘,
            controller: ‘aController‘
          })
        .when(‘/b‘, {
            template: ‘<h1> i am b</h1>‘,
            controller: ‘bController‘
        })
        .otherwise({
            redirectTo: ‘/a‘
        });
    });

最关键的就是上面最后一段代码。它定义了当浏览器的url的hash部分发生变化后,会自动触发局部内容的加载(templateUrl表示从服务器加载,template表示从本地加载). 也可以根据需要为所加载的内容配置 controller。

三、存在的问题

利用angulajs,一个页面只能允许有一个 ng-view, 对于复杂的页面设计,可能有些问题。

一个可能的解决方案是,不设置模板内容,而是在该路由的 controller中,进行页面的复杂操作。

时间: 2024-10-07 06:33:19

单页面应用的路由问题的相关文章

AngularJS学习笔记(三) 单页面webApp和路由(ng-route)

就我现在的认识,路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了.因为angular目前最重要的作用就是做单页面webApp,而路由这个东西是能做到页面跳转的关键. 1.单页面webApp 为什么叫单页面webApp?因为它是单页面的....额...关键在于我们看到的不少webApp是多页面的啊,可以从一页跳到另一页.嗯,看起来是这样,不过实际上这几页实际还是一个页面,因为它们是一次性加载进来的,至于为啥会有跳转效果呢?嗯,有点儿像选项卡,嗯.其实现原理在

详解单页面路由的几种实现原理(附demo)

前言 路由是每个单页面网站必须要有的,所以,理解一下原理,我觉得还是比较重要的. 本篇,基本不会贴代码,只讲原理,代码在页底会有githup地址,主意,一定要放在服务本地服务器里跑(因为有ajax), 希望能帮到你. 众所周知单页面网站的路径跳转全是通过js来控制的,下面咱们来讲讲 第一种:url完全不动型 这一种的情况是url完全不动,即你的页面怎么改变,怎么跳转url都不会改变 这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素, 这种情况没什么好讲的,好的一言不和上代码    de

浅谈HTML5单页面架构(三)—— 回归本真:自定义路由 + requirejs + zepto + underscore

本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真,自己搞个简单的路由一样可以实现单页面. 这个对于刚做前端开发的新同学来说就最好不过了,如果一来到岗位就一大堆angular.backbone.requirejs,看资料都看一两周.其实大家最熟悉的东西还是那个美元$,用美元能解决的问题,就不要麻烦到angular.backbone大爷了. 事先说明,

AngularJS单页面路由配置恩,理解了就很简单啦

利用route实现单页面跳转功能 利用angularJS开发流程 1)配置好angularJS开发环境 2)利用 yo angular projectname创建项目目录 3)删除掉系统自动生成的一些自己工程不需要的页面和脚本 4)修改index.html,在 <!-- Add your site or application content here --> 以上注释下面写自己的样式内容,关键是 <div class="container-fluid" id=&qu

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

还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p> .... <p id="#target">我是目标位置</p> ... 在js中实现跳转也是利用了这一点,下面直接在代码中解释吧: 1 <body> 2 <ul> 3 <li><a href="#/mus

单页面应用路由的实现方式

什么是 SPA? SPA就是单页面应用,即single page application,通过看代码就可以发现,整个网站就只有一个Html文件. WHY SPA? 减小服务器压力. 如果不用SPA,那么我们每次切换页面的时候,就会向服务器发送一个请求,服务器返回一个html文件:但是如果使用了SPA,在切换时,不需要请求服务器,只要通过本地的js来切换即可.并且服务器端就不需要配置路由,完全做到了前后端分离,这对于分工合作的意义可想而知. 增强用户体验,增加app的使用流畅性. 做过spa的同学

详解单页面路由的几种实现原理

路由是每个单页面网站必须要有的,本篇基本不会天贴代码,只讲原理,代码在页面底会有github地址,注意,一定要放在本地服务器里跑(因为有AJAX) 众所周知,单页面网站的路径跳转全是通过JS来控制的,下面说说 第一种:URL完全不动型 这一种的情况是URL完全不动,即你的页面怎么改变,怎么跳转URL都不会改变,这种情况的原理就是纯AJAX拿到页面后替换原页面的元素,这种情况没什么好说的,demo在最底下 第二种:带hash(#)型 这种类型的优点就是刷新页面,页面也不会丢 实现原理: 小明说:如

Vue 子路由 与 单页面多路由 的区别

跟着学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂. 果然,基础课程的坑新手是体会不到的. 由于子路由仅嵌套了一层,多路由给了左右两个组件,而且两个都是在默认组件下进行的.于是,妥妥误会俩作用一样.我发现自己问题,并尝试网上找到区别时,发现并没有人写出来.只好去官网看了一下文档. 哇塞,真是一语惊醒梦中人啊!!! 上面就是官网对子路由的解释,人家说的很清楚了,嵌套路由!!!是一层层嵌套的!!! 再看看传说中的多路由是啥 嗯,也不叫多路由,而是叫命名

第4节:单页面多路由区域操作

这节课我们讲"单页面多路由区域操作",实际需求是这样的,在一个页面里我们有2个以上<router-view>区域,我们通过配置路由的js文件,来操作这些区域的内容.例如我们在src/App.vue里加上两个<router-view>标签.我们用vue-cli建立了新的项目,并打开了src目录下的App.vue文件,在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式. 1 2 3 <rout