单页面

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. Mysql中错误日志、binlog日志、查询日志、慢查询日志简单介绍

    前言 数据库的日志是帮助数据库管理员,追踪分析数据库以前发生的各种事件的有力根据.mysql中提供了错误日志.binlog日志(二进制日志).查处日志.慢查询日志.在此,我力求解决下面问题:各个日志的 ...

  2. iPhone 3gs 5.0.1降級到4.3.3 昨晚搞定(有shsh備份)

    經過昨天白天一天的學習和準備,終於一次降級成功. 手機未降級時狀態: 無鎖港版   3GS 16G  固件:5.0.1  基帶:05.16.05 記錄且分享降級完整步驟: 準備以下軟件.工具 官網固件 ...

  3. Linux下,PHP的SESSION不起作用的问题

    改动SESSION目录的权限就能够了. 先找到SESSION目录, 然后 chmod -R 777 /var/lib/php/session 假设没有此目录,则新建此目录 mkdir -R 777 / ...

  4. js中的封装、继承、多态

    Javascript是一门解释型的语言,是基于对象的,并不是真正的面向对象的语言,对变量类型的应用也是宽松的,其实它同样可以模拟面向对象的功能:  1 function myfun1(){  2    ...

  5. Mali GPU OpenGL ES 应用性能优化--基本方法

    1. 经常使用优化工具 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTXlBcnJvdw==/font/5a6L5L2T/fontsize/400/fil ...

  6. JAVA实现N皇后问题(回溯法)

    package com.leetCode; /** * Follow up for N-Queens problem. Now, instead outputting board configurat ...

  7. iOS开发——高级篇——线程同步、线程依赖、线程组

    前言 对于iOS开发中的网络请求模块,AFNet的使用应该是最熟悉不过了,但你是否把握了网络请求正确的完成时机?本篇文章涉及线程同步.线程依赖.线程组等专用名词的含义,若对上述名词认识模糊,可先进行查 ...

  8. 关于clojurescript+phantomjs+react的一些探索

    这两天需要使用phantomjs+react生成些图片 React->Clojurescript: 最开始发现clojurescript中包裹react的还挺多: https://github. ...

  9. presentModalViewController和dismissModalViewControllerAnimated的使用总结

    在实际开发中,如果要弹出视图: 我们常用到presentModalViewController方法和dismissModalViewControllerAnimated方法. presentModal ...

  10. 【Codevs 2630】宝库通道

    http://codevs.cn/problem/2630/ Solution 预处理f[i][j],代表第j列前i行的代价 枚举上下界,然后做最大子段和,g[i]代表选到第i列的代价, g[k]=( ...