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浅析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： u净app怎么破解
- 下一篇： html 对话框 flatballoon