angularjs html5模式,Angularjs $location html5mode浅析
关于HTML5 history API
参考资料:http://diveintohtml5.info/history.html
参考资料为英文,内容较为简单,周末会做简单翻译,方便英语吃力的童鞋。
H5之前,一个URL对应一个页面,无论以何种方式修改地址栏地址,都会导致页面完全刷新,无论跳转页面之间是否有关联。简单来说,H5的history API提供接口,可以使用javascript修改地址栏路径,而不刷新页面。
使用场景
简化说明:未设置静态缓存。
假设后端数据输出模式为:获取数据---读取模板---渲染模板。不同页面之间共享模板,只是数据内容不同。在没有H5的新接口之前,不同页面之间的跳转,则相同的脚本,CSS文件会重新加载,不仅加剧服务器压力,在慢速网络下,用户体验也会变差。在有H5接口之后,不同路径跳转,可以拦截超链接默认行为,通过脚本控制地址栏,通过Ajax加载数据,在前端完成数据呈现,就能避免不必要的资源加载时间。
Demo浅析
数据源
/static/articles/index.json;
/static/articles/node.json;
/static/articles/javascript.json
json// index.json
{
"title": "Frontend develop language",
"content": "FE encounter lots of trouble"
}
// node.json
{
"title": "Node theme develop",
"content": "whether believe or not, node changes frontend develop way"
}
// javascript.json
{
"title": "Javascript theme develop",
"content": "maybe javascript just tools, it enhance programmer skill"
}
模板
/views/article.jade
(临时看的jade,所以简单为上)
jadedoctype html
html
head
title Shuffle History
script(src="/libs/superagent.js")
script(src="/js/initialize.js")
body
h3#title
| #{title}
p#content
| #{content}
p
a(href="/") Index entrance
p
a(href="/node/" id="node") Node entrance
p
a(href="/javascript/" id="javascript") Javascript entrance
总计三个页面,共享同一个jade模板。数据源对应关系为
/ ---------- index.json
/node/ --- node.json
/javascript --- javascript.json
若直接访问/,/node/, javascript页面,express读取对应数据源,渲染模板,然后直接输出html,代码如下:
javascript/**
* Created by jasonborn on 14/11/19.
*/
var jade = require('jade');
var path = require('path');
var express = require('express');
var app = express();
app.set('env', 'development');
app.engine('jade', jade.__express);
app.get('/', function(req, res) {
res.render('article.jade', require('./static/articles/index.json'), function(err, html) {
res.type('html');
res.send(html);
})
});
app.get('/node/', function(req, res) {
res.render('article.jade', require('./static/articles/node.json'), function(err, html) {
res.type('html');
res.send(html);
})
});
app.get('/javascript/', function(req, res) {
res.render('article.jade', require('./static/articles/javascript.json'), function(err, html) {
res.type('html');
res.send(html);
})
});
app.use(express.static(path.join(__dirname, 'static')));
app.listen(1336);
自此实现所谓的MVC模式,然后使用H5 history API,所有的页面都会加载initilize.js脚本文件:
javascript/**
* Created by jasonborn on 14/11/20.
*/
window.onload = function() {
var title = document.querySelector('#title');
var content = document.querySelector('#content');
var node = document.querySelector('#node');
var javascript = document.querySelector('#javascript');
var resolveContent = function(target) {
switch (true) {
case target === '/':
target = '/articles/index.json';
break;
case /node/.test(target):
target = '/articles/node.json';
break;
case /javascript/.test(target):
target = '/articles/javascript.json';
break;
}
superagent
.get(target)
.end(function(err, res) {
title.textContent = res.body.title;
content.textContent = res.body.content;
})
};
window.history.replaceState({
"target": window.location.pathname
}, null, './');
window.onpopstate = function(event) {
resolveContent(event.state.target);
};
node.addEventListener('click', function(event) {
event.preventDefault();
window.history.pushState({
"target": "/node/"
}, null, '/node/');
resolveContent('/node/');
window.onpopstate = function(event) {
resolveContent(event.state.target);
};
});
javascript.addEventListener('click', function(event) {
event.preventDefault();
window.history.pushState({
"target": "/javascript/"
}, null, '/javascript/');
resolveContent('/javascript/');
window.onpopstate = function(event) {
resolveContent(event.state.target);
};
});
};
pushState修改地址记录,onpopstate表示通过后退方式退回pushState后的路径时,执行何种操作。这里是通过Ajax请求拉取数据,然后呈现数据(较大型项目可能会使用前后端模板引擎来渲染,例如x-template)。
Angularjs $location html5mode
开启html5mode,通过config来配置即可。
javascriptangular.module('shuffleApp', ['ngRoute', 'ngSanitize'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/love', {
template:'To hate
controller: 'LoveCtrl'
})
.when('/hate', {
template: 'To love
controller: 'HateCtrl'
})
.otherwise('/love');
$locationProvider.html5Mode(true);
}]);
上述配置,在加载入口文件之后,地址栏会变为http://hostname/love,而不是http://hostname/#/love。但是存在一个问题,后者可以直接访问,前者也许能访问,也许不能,但不会出现预期的结果,典型结果就是NG中文API站,每次向在新页面打开某个链接,结果就是华丽丽的报错,例如:http://docs.angularjs.cn/api,所以需要做重定向:
javascriptapp.get('/love', function(req, res) {
res.sendFile(path.join(__dirname, 'static/index.html'));
});
具体的重定向上会导致路径设计上的一些问题,所以需要注意。
联系方式
angularjs html5模式,Angularjs $location html5mode浅析相关推荐
- angularjs html5模式,angularjs – 确定在控制器中启用了HTML5模式
在Angular Js的控制器中,我想知道是否启用了 html5Mode.我怎样才能做到这一点? 细节: 在配置阶段我可以设置$locationProvider.html5Mode(true)或者我可 ...
- 模板方法模式和策略模式的应用场景浅析
模板方法模式和策略模式的应用场景浅析 一.定义 二.举个例子 1.杀鱼 2.做鱼 三.伪代码实现 1.杀鱼 1.1分析 1.2实现 2.做鱼 2.1分析 2.2实现 四.总结 最近闲下来整理一下模板方 ...
- Hadoop SequnceFile.Writer 压缩模式及压缩库浅析
2019独角兽企业重金招聘Python工程师标准>>> 先说明SequnceFile的压缩类型(Compression Type)分为三种NONE,RECORD,BLOCK,通过配置 ...
- html实现websocket协议,HTML5实现WebSocket协议原理浅析
WebSocket协议的目的是为了工作于现有的网络基础设施.作为这一设计原则的一部分,WebSocket连接的协议规范定义了一个HTTP连接作为其开始生命周期,进而保证其与pre-WebSocket世 ...
- Fake_AP模式下的Easy-Creds浅析
Easy-Creds是一款欺骗嗅探为主的攻击脚本工具,他具备arp毒化,dns毒化等一些嗅探攻击模式.它最亮的地方就是它的fakeAP功能.它比一般自行搭建的fake AP要稳定的多.而且里面还包含了 ...
- AngularJS 构架模式
MVC (Model View Contraller) 解释 M (模板) V (试图) C (控制器) 用户先访问的是Contraller 控制器 (用户首先通过网站链接请求后台控制器 最后返回 ...
- 如何在 ASP.NET MVC 中集成 AngularJS
介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...
- 浅析设计模式3 —— 装饰者模式
推荐语:本文从装饰者模式的核心思想到与其他设计模式的横向对比,从代码示例到业务实战,向读者娓娓呈现装饰者模式的真貌.深入浅出的JDK源码透析,使用场景的利弊权衡,真的值得一阅! --大淘宝技术开发工程 ...
- 在AngularJS中读取查询参数的最简洁方法是什么?
本文翻译自:What's the most concise way to read query parameters in AngularJS? I'd like to read the values ...
最新文章
- 互掐了半辈子的两个数学巨头,到最后连单身问题都没解决
- logic回归是一种线性回归
- #region 常量和静态变量静态类readonly
- 数字图像处理应用matlab,数字图像处理与应用(MATLAB版)
- C#跨平台开源项目实战(WPF/Android/IOS/Blazor)
- 使用计算机自带字体怎么用_在家办公不会扫描文件怎么办?用 iPhone 自带软件就搞定啦...
- 特斯拉股价周一大跌8.55% 市值缩水640亿美元
- 【报告分享】腾讯-2021智慧零售私域增长指南.pdf(附226页文档下载链接)
- 用c语言编写小游戏:贪吃蛇
- 地震设计反应谱、时程分析法和地震动选取与调整
- Building and Securing RESTful APIs in ASP.NET Core 在ASP.NET Core中构建安全的RESTful API Lynda课程中文字幕
- Spring框架学习记录二:装配Bean
- 解决qt下VCI_OpenDevice一直返回0的问题
- 数字人民币真的来了 六年历程全回顾
- UWB定位的3种算法:TWR、TOA和TDOA算法
- String的空校验
- go 注册登录 mysql_golang实现用户登录注册的方法
- Android获取内置sdcard跟外置sdcard路径
- 计算机应用基础考试试题及答案 在word中,用户建立的文件默认,2009年10月全国自考计算机应用基础历年真题...
- 汽车轮速传感器智能测试系统ETest的设计