Angular——单页面与路由的使用
單頁(yè)面
SPA（Single Page Application）指的是通單一頁(yè)面展示所有功能，通過Ajax動(dòng)態(tài)獲取數(shù)據(jù)然后進(jìn)行實(shí)時(shí)渲染，結(jié)合CSS3動(dòng)畫模仿原生App交互，然后再進(jìn)行打包（使用工具把Web應(yīng)用包一個(gè)殼，這個(gè)殼本質(zhì)上是瀏覽器）變成一個(gè)“原生”應(yīng)用。
在PC端也有廣泛的應(yīng)用，通常情況下使用Ajax異步請(qǐng)求數(shù)據(jù)，然后實(shí)現(xiàn)內(nèi)容局部刷新，局部刷新的本質(zhì)是動(dòng)態(tài)生成DOM，新生成的DOM元素并沒有真實(shí)存在于文檔中，所以當(dāng)再次刷新頁(yè)面時(shí)新添加的DOM元素會(huì)“丟失”，通過單頁(yè)面應(yīng)可以很好的解決這個(gè)問題。
路由
在后端開發(fā)中通過URL地址可以實(shí)現(xiàn)頁(yè)面（視圖）的切換，但是AngularJS是一個(gè)純前端MVC框架，在開發(fā)單頁(yè)面應(yīng)用時(shí)，所有功能都在同一頁(yè)面完成，所以無(wú)需切換URL地址（即不允許產(chǎn)生跳轉(zhuǎn)），但Web應(yīng)用中又經(jīng)常通過鏈接（a標(biāo)簽）來(lái)更新頁(yè)面（視圖），當(dāng)點(diǎn)擊鏈接時(shí)還要阻止其向服務(wù)器發(fā)起請(qǐng)求，通過錨點(diǎn)（頁(yè)內(nèi)跳轉(zhuǎn)）可以實(shí)現(xiàn)這一點(diǎn)。
實(shí)現(xiàn)單頁(yè)面應(yīng)用需要具備：
a、只有一頁(yè)面
b、鏈接使用錨點(diǎn)
基本原理
<!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有一個(gè)監(jiān)聽錨點(diǎn)變化的事件 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>通過上面的例子發(fā)現(xiàn)在單一頁(yè)面中可以能過hashchange事件監(jiān)聽到錨點(diǎn)的變化，進(jìn)而可以實(shí)現(xiàn)為不同的錨點(diǎn)準(zhǔn)不同的視圖，單頁(yè)面應(yīng)用就是基于這一原理實(shí)現(xiàn)的。AngularJS對(duì)這一實(shí)現(xiàn)原理進(jìn)行了封裝，將錨點(diǎn)的變化封裝成路由（Route）,這是與后端路由的根本區(qū)別。
具體使用
在angular的路由模塊中，也實(shí)現(xiàn)了此功能，其原理如上。route模塊之前是包括在angular核心代碼中，后來(lái)分離出來(lái)，需要單獨(dú)去引用才能使用
1、引入angular-route.js
2、實(shí)例化模塊（App）時(shí)，當(dāng)成依賴傳進(jìn)去（模塊名稱叫ngRoute）
3、配置路由模塊
4、布局模板，通過ng-view指令布局模板，路由匹配的視圖會(huì)被加載渲染到些區(qū)域。
路由參數(shù)：
when只需要兩個(gè)參數(shù)，otherwise需要一個(gè)參數(shù)
1、when的第1個(gè)參數(shù)是一個(gè)字符串，代表當(dāng)前URL中的hash值。
2、when的第2個(gè)參數(shù)是一個(gè)對(duì)象，配置當(dāng)前路由的參數(shù)，如視圖、控制器等。
a、template 字符串形式的視圖模板
b、templateUrl 引入外部視圖模板
c、controller 視圖模板所屬的控制器
d、redirectTo跳轉(zhuǎn)到其它路由
<!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>//之前路由模塊也是處于核心模塊之中,后來(lái)獨(dú)立出去了//對(duì)路由模塊的使用主要是進(jìn)行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>?
轉(zhuǎn)載于:https://www.cnblogs.com/wuqiuxue/p/8432088.html
總結(jié)
以上是生活随笔為你收集整理的Angular——单页面与路由的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于Android的HAL的一些理解
- 下一篇： CODEVS.5037.线段树练习4加强