单页面

SPA（Single Page Application）指的是通单一页面展示所有功能，通过Ajax动态获取数据然后进行实时渲染，结合CSS3动画模仿原生App交互，然后再进行打包（使用工具把Web应用包一个壳，这个壳本质上是浏览器）变成一个“原生”应用。

在PC端也有广泛的应用，通常情况下使用Ajax异步请求数据，然后实现内容局部刷新，局部刷新的本质是动态生成DOM，新生成的DOM元素并没有真实存在于文档中，所以当再次刷新页面时新添加的DOM元素会“丢失”，通过单页面应可以很好的解决这个问题。

路由

在后端开发中通过URL地址可以实现页面（视图）的切换，但是AngularJS是一个纯前端MVC框架，在开发单页面应用时，所有功能都在同一页面完成，所以无需切换URL地址（即不允许产生跳转），但Web应用中又经常通过链接（a标签）来更新页面（视图），当点击链接时还要阻止其向服务器发起请求，通过锚点（页内跳转）可以实现这一点。

实现单页面应用需要具备：

a、只有一页面

b、链接使用锚点

基本原理

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .clearfix:after {

            content: '';

            display: block;

            visibility: hidden;

            clear: both;

        }

        .wrap {

            width: 600px;

            margin: 30px auto;

        }

        ul {

            list-style: none;

            border: 1px solid black;

            border-bottom: none;

        }

        li {

            width: 199px;

            height: 30px;

            line-height: 30px;

            float: left;

            /*margin-left: -2px;*/

            text-align: center;

            position: relative;

        }

        li a {

            text-decoration: none;

            color: black;

        }

        li:after {

            content: '';

            display: block;

            position: absolute;

            width: 1px;

            height: 16px;

            border-right: 1px solid black;

            top: 7px;

            right: 0px;

        }

        li:last-child:after {

            border: none;

        }

        .wrap .main {

            height: 400px;

            border: 1px solid #000;

            text-align: center;

            line-height: 400px;

        }

    </style>

</head>

<body>

<div class="wrap">

    <ul class="clearfix">

        <li><a href="#index1">index1</a></li>

        <li><a href="#index2">index2</a></li>

        <li><a href="#index3">index3</a></li>

    </ul>

    <div class="main">

    </div>

</div>

<script>

    //js有一个监听锚点变化的事件 hashchange

    window.addEventListener('hashchange', function (ev) {

        var hash = location.hash;

        hash = hash.slice(1);

        console.log(hash);

        var xhr = new XMLHttpRequest();

        xhr.open('get', '01.php?hash=' + hash);

        xhr.send(null);

        xhr.onreadystatechange = function (ev2) {

            if (xhr.readyState == 4 && xhr.status == 200) {

                document.querySelector('.main').innerHTML = xhr.responseText;

            }

        }

    })

</script>

</body>

</html>

通过上面的例子发现在单一页面中可以能过hashchange事件监听到锚点的变化，进而可以实现为不同的锚点准不同的视图，单页面应用就是基于这一原理实现的。AngularJS对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。

具体使用

在angular的路由模块中，也实现了此功能，其原理如上。route模块之前是包括在angular核心代码中，后来分离出来，需要单独去引用才能使用

1、引入angular-route.js

2、实例化模块（App）时，当成依赖传进去（模块名称叫ngRoute）

3、配置路由模块

4、布局模板，通过ng-view指令布局模板，路由匹配的视图会被加载渲染到些区域。

路由参数：

when只需要两个参数，otherwise需要一个参数

1、when的第1个参数是一个字符串，代表当前URL中的hash值。

2、when的第2个参数是一个对象，配置当前路由的参数，如视图、控制器等。

a、template 字符串形式的视图模板

b、templateUrl 引入外部视图模板

c、controller 视图模板所属的控制器

d、redirectTo跳转到其它路由

<!DOCTYPE html>

<html lang="en" ng-app="App">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .clearfix:after {

            content: '';

            display: block;

            visibility: hidden;

            clear: both;

        }

        .wrap {

            width: 600px;

            margin: 30px auto;

        }

        ul {

            list-style: none;

            border: 1px solid black;

            border-bottom: none;

        }

        li {

            width: 199px;

            height: 30px;

            line-height: 30px;

            float: left;

            /*margin-left: -2px;*/

            text-align: center;

            position: relative;

        }

        li a {

            text-decoration: none;

            color: black;

        }

        li:after {

            content: '';

            display: block;

            position: absolute;

            width: 1px;

            height: 16px;

            border-right: 1px solid black;

            top: 7px;

            right: 0px;

        }

        li:last-child:after {

            border: none;

        }

        .wrap .main {

            height: 400px;

            border: 1px solid #000;

            text-align: center;

            line-height: 400px;

        }

    </style>

</head>

<body>

<div class="wrap">

    <ul class="clearfix">

        <li><a href="#/index1">index1</a></li>

        <li><a href="#/index2">index2</a></li>

        <li><a href="#/index3">index3</a></li>

    </ul>

    <div class="main">

        <div ng-view=""></div>

    </div>

</div>

<script src="../libs/angular.min.js"></script>

<script src="../libs/angular-route.js"></script>

<script>

    //之前路由模块也是处于核心模块之中,后来独立出去了

    //对路由模块的使用主要是进行config配置，配置完成之后即可使用

    var App = angular.module('App', ['ngRoute']);

    App.config(['$routeProvider', function ($routeProvider) {

        $routeProvider.when('/index1', {

            template: '<h1>index1</h1>'

        }).when('/index2', {

            template: '<h1>index2</h1>'

        }).when('/index3', {

            template: '<h1>index3</h1>'

        }).otherwise({

            redirectTo: '/index1'

        })

    }]);

</script>

</body>

</html>

Angular——单页面与路由的使用的更多相关文章

  1. 使用react-router实现单页面应用路由

    这是Webpack+React系列配置过程记录的第二篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  2. vue-router(配置子路由--单页面多路由区域操作)

    1.配置子路由: import Post from "@components/Post" export default new Router({ routers:[ { path: ...

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

    本文地址:http://www.cnblogs.com/veinyin/p/7911292.html 最近学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂 ...

  4. nignx部署Vue单页面刷新路由404问题解决

    官网说明: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E8%AD%A6%E5%91%8A 在linux下搭建ngi ...

  5. Angular——单页面实例

    基本介绍 1.引入的route模块可以对路由的变化做出响应 2.创建的控制器中依然需要$http向后台请求数据 3.php中二维数据的遍历用的是foreach 4.php中$arr=array(),$ ...

  6. 解决angular单页面页面底部跳转到新页面滚动条不在顶部的问题

    以上jquery,下面js this.router.events.subscribe((event) => { document.body.scrollTop=0; }); 另一种写法 impo ...

  7. phantomjs和angular-seo-server实现angular单页面seo

    1.下载phantomjs,并配置环境变量为   eg:E:\phantomjs-2.1.1-windows\bin 2.下载angular-seo-server 3.windows下:cmd eg: ...

  8. angular（一）路由的配置（1）

    本篇文章是最近在公司里做项目的时候,尝试配置路由的过程.由于头尾,和路由主体,包括控制器组长都已配置好,我这里只是单纯的写一些配置单个副页面的过程.大家肯定会有看不懂的地方,后续会陆续更新完整的配置全 ...

  9. 优化单页面开发环境：webpack与react的运行时打包与热更新

    前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...

随机推荐

  1. #!/usr/bin/env 脚本解释程序的作用

    the Zimbu programming language http://www.zimbu.org/getting-started -------------------------------- ...

  2. Linux学习系列之memcached

    memcached简介 一.memcached是什么 memcached是一个开源的.支持高性能.高并发的分布式内存缓存系统 mem+cache+daemon:分布式内存缓存守护进程 memcache ...

  3. Mariadb 主从

    一 mariadb主从多用于网站架构,因为该主从的同步机制是异步的,数据的同步有一定延迟,也就是说有可能会造成数据的丢失,但是性能比较好,因此网站大多数用的是主从架构的数据库,读写分离必须基于主从架构 ...

  4. Creo二次开发—内存处理

    #include <ProDisplist.h> ProError ProDisplistInvalidate(ProMdl model) Invalidates the two- or ...

  5. windows7 配置 python开发环境

    1.安装python2.7     官网下载,安装,配置环境变量 path,命令行 执行python 2.easy_install 安装 win7 64位必须使用ez_setup.py进行安装. 方法 ...

  6. openwrt-安装-驱动-应用-lcd2004a实验

    1. 板子f403tech的RT5350的板子和 (1)openWRT系统的定义和特点         OpenWrt是一个高度模块化.高度自己主动化的嵌入式Linux系统.拥有强大的网络组件.经常被 ...

  7. Iteye已经沦陷

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZHl5YXJpZXM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  8. swift 笔记 (二十一) —— 高级运算符

    高级运算符 位运算符 按位取反: ~ 按位与运算:  & 按位或运算:  | 按位异或运算:  ^ 按位左移运算: << 按位右移动算: >> 溢出运算符 自从swif ...

  9. [译]IOS中AutoLayout布局与Transform的冲突问题

    http://m.blog.csdn.net/blog/a345017062/43565279 原文链接见这里: http://stackoverflow.com/questions/12943107 ...

  10. redis 的部分配置

    linux 安装: yum install redis 修改redis配置: 配置文件位于/etc/redis.conf. 作为守护进程运行(默认no) # 默认情况下 redis 不是作为守护进程运 ...