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