寫在前面
對單頁應用來講，視圖和路由的作用可以從一個視圖跳轉到另外一個視圖，可以合理管理用戶在使用過程中看到的界面。
將視圖分解成布局和模版視圖，並且根據用戶當前訪問的URL來展示對應的視圖，將會是一種更好的做法。
我們會將這些模版分解到視圖中，並在布局模版中進行組裝。Angularjs允許我們在$route服務的提供者$routeProvider中通過聲明路由實現該功能呢。
系列文章
[Angularjs]ng-select和ng-options
一個例子
在HTML中，需要引用AngularJS之后引用angular-route：
<script src="JS/angular.min.js"></script>
<script src="JS/angular-route.min.js"></script>
然后，要把ngRoute模塊在應用中當作依賴加載進來：
<script>
var app = angular.module('app',['ngRoute']);
</script>
布局模板
創建一個布局模版，就是告訴angularjs把模板渲染到何處。通過將ng-view指令和路由組合到一起，我們可以精確的指定當前路由所對應的模板在dom中的渲染位置。
例如，有這樣一段html
<body> <header>這是header</header> <div> <div ng-view></div> </div> <footer>這是footer</footer> </body>
在這個例子中，將所有需要渲染的內容都放到了<div>中，而<header>和<footer>中的內容在路由改變時不會發生變化。
ng-view是由ngRoute模塊提供的一個特殊指令，它的獨特作用是在HTML中給$route對應的視圖內容占位。ng-view是一個優先級為1000的終極指令。angularjs不會運行同一個元素上的低優先級指令（例如<div ng-view></div>元素上其他指令都是沒有意義的）
ngView指令遵循以下規則
1、每次觸發$routeChangeSuccess事件，視圖都會更新。
2、如果某個模版同當前的路由相關聯：
創建一個新的作用域。
移除上一個視圖，同時上一個作用域也會被清楚。
將新的作用域同當前摹本關聯在一起。
如果路由中有相關的定義，那么就把對應的控制器同當前作用域關聯起來。
觸發$viewContentLoaded事件。
如果提供了onload屬性，調用該屬性所指定的函數。
路由
angularjs提供了when和otherwise兩個方法來定義路由。用config函數在特定的模塊或應用中定義路由。
現在，我們使用when方法添加一個特定的路由。
when方法：path，route
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> <head> <title>路由</title> <script src="JS/angular.min.js"></script> <script src="JS/angular-route.min.js"></script> <script> var app = angular.module('app', ['ngRoute']); app.config(['$routeProvider', function ($routeProvider) { //這里指定路由 $routeProvider .when('/', { templateUrl: './views/Login.html', controller: 'LoginController' }) .when('/Login', { templateUrl: './views/Login.html', controller: 'LoginController' }) }]); //控制器 app.controller('LoginController', function ($scope) { }); </script> <style> ul { list-style-type: none; } </style> </head> <body> <header>這是header</header> <div> <div ng-view></div> </div> <footer>這是footer</footer> </body> </html>
Login視圖Login.html
<div> <ul> <li>用戶名：<input type="text" /></li> <li>密 碼：<input type="password" /></li> <li><button>登錄</button><button>取消</button></li> </ul> </div>
在瀏覽器中查看
當然訪問這樣的路由：http://localhost:18174/1_4_route.html#/Login也是可以的。
第一個參數：是路由路徑，這個路徑會與$location.path進行匹配，$location.path也就是當前的URL的路徑。如果路徑后面還有其他內容，或使用了雙斜線也可以正常匹配。我們也可以在url中存儲參數，參數需要以冒號開頭（例如:name），獲取url參數可以使用$routeParams獲取。
第二個參數是配置對象，決定了當第一個參數中的路由能夠匹配時具體做些什么。配置對象中可以進行設置的屬性包括controller、template、templateUrl、resolve、redirectTo和reloadOnSearch。
總結
這里介紹了路由與視圖的簡單知識點，也是由於在項目中用到的，也只能用到那兒，從哪兒學習，然后自己弄個demo學習了。這里舉了一個簡單的例子，先上手。當然，在實際的項目中，在項目中添加Controller，views等文件夾，使項目結構更清晰一些。
參考
angularjs權威教程