& AngularJS路由和模板
AngularJS路由和模板
，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。
张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
转载请注明出处：
如果想开发一款类似gmail的web应用，我们怎么做呢？
以jQuery的思路，做响应式的架构设计时，我们要监听所有点击事件，通过事件函数触发我们加载数据，提交，弹框，验证等的功能；以 AngularJS的思路，做声明式的架构设计时，我们通过指令和路由先设定好，什么样的操作干什么事情，等事件发生时，程序就会知道该干什么了。
今天说一下，AngularJS是如何实现前端路由功能的！
AngularJS路由介绍
路由的代码实现
实现效果截图
1. AngularJS路由介绍
AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的URL会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS的前端路由，需求提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。
AngularJS的前端路由，虽然URL输入不一样，页面展示不一样，其实完成的单页(ng-app)视图(ng-view)的局部刷新。这样来看，AngularJS做单页应用就有点标配的感觉了。
从这个角度想想，要实现一个gmail的应用，真的就不难了。
2. 路由的代码实现
理论不多说了，直接上代码！！ 还是基于我们之前用。
业务场景：论坛功能，帖子列表页(list.html) 和 帖子内容页(detail.html)。
代码文件：
1. 增加：app/demo-route.html
2. 增加：app/views/route/list.html
3. 增加：app/views/route/detail.html
4. 修改: app/scripts/app.js
5. 修改: app/scripts/controllers/main.js
1). 增加：app/demo-route.html
这个文件是主页面(ng-app)，包含视图(ng-view)
&!doctype html&
&meta charset="utf-8"&
&title&route&/title&
&body ng-app="routeApp"&
&h1&Route Demo index&/h1&
&div ng-view&&/div&
&script src="bower_components/angular/angular.js"&&/script&
&script src="scripts/app.js"&&/script&
&script src="scripts/controllers/main.js"&&/script&
2). 增加：app/views/route/list.html
这个页面是布局模板，是HTML的代码片段。包括了一组ID的列表，通过ID列表的链接，可以进入到ID的详细页面。
&h3&Route : List.html&/h3&
&li ng-repeat="id in [1, 2, 3 ]"&
&a href="#/list/{{ id }}"& ID{{ id }}&/a&
3). 增加：app/views/route/detail.html
这个页面是布局模板，是HTML的代码片段。通过ID访问，包含ID号, (ID的文章内容)
&h3&Route &span style="color:"&{{id}}&/span&: detail.html &/h3&
4). 修改: app/scripts/app.js
这个是ng-app文件的定义，我们在demo-route.html中定义了routeApp，在这里需要声明。
var routeApp = angular.module('routeApp',[]);
routeApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'views/route/list.html',
controller: 'RouteListCtl'
.when('/list/:id', {
templateUrl: 'views/route/detail.html',
controller: 'RouteDetailCtl'
.otherwise({
redirectTo: '/list'
在routeApp模块中，我们定义了路由和布局模板。routeApp的默认URL是/list，即http://localhost:9000/demo-route.html#/list。 跳转详细页的路由是/list/:id，id为参数。
同时，/list的布局模板是views/route/list.html，属于RouteListCtl的控制器管理空间。
5). 修改: app/scripts/controllers/main.js
这个文件定义控制器controller。
routeApp.controller('RouteListCtl',function($scope) {
routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
$scope.id = $routeParams.
分别对应该路由中的两个控制器声明。
程序写好，我们打开浏览器看效果。
3. 实现效果截图
别忘了用下面命令，启动程序。
grunt server
浏览器被自动打开，默认出的是http://localhost:9000/demo-route.html#/list, “#/list”是被redirectTo转向的结果。
点击ID2的链接。
页面被刷新了，出了detil的页面。同时，我们注意观察，页面没有整个刷新，而在视图中(ng-view)做的局部刷新。因为，chrome的开发工具的监控中，只是看到detail.html被加载。
我们再浏览地址栏中，输入212
http://localhost:9000/demo-route.html#/list/212
观察chrome的开发工具的监控中，没有任何的networking操作。
在浏览地址栏中，再输入原来list的地址
http://localhost:9000/demo-route.html#/list
观察chrome的开发工具的监控，确认没有任何变化！！
从这个实验，我们看到AngularJS纯前端路由的实现思路，配合视图的局部刷新，把业务功能切片后分散到HTML的模板页面中。非常容易地实现了widget。并且，这种widget可重用性会非常高，能大大减少前端代码量。
后端组件化开发思路，流畅的嵌入前端。爽死啦！！！
转载请注明出处：
This entry was posted in ,
Designed by深入理解AngularJs-Ui-router
Angularjs ui-router - 组件：
$stateProvider：管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数，异步解决目标状态的任何依赖项，更新$location到当前状态。由于状态包含关
Angularjs ui-router - 组件：
$state / $stateProvider：管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数，异步解决目标状态的任何依赖项，更新$location到当前状态。由于状态包含关联的 url，通过$urlRouterProvider生成一个路由规则来执行转换的状态。 ui-view指示器：渲染状态中定义的视图，是状态中定义的视图的一个占位符。 $urlRouter / $urlRouterProvider：管理了一套路由规则列表来处理当$location发生变化时如何跳转。最低级的方式是，规则可以是任意函数，来检查$location，并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的 url 占位符规则。 $urlMatcherFactory：将 url和占位符编译为UrlMatcher对象。除了$routeProvider支持的占位符语法之外，它还支持扩展语法，允许一个正则表达式指定占位符，并且能够提取命名参数和查询url的一部分。 $templateFactory - 通过$http / $templateCache来加载模板，供状态配置中使用。
AngularJS不需要任何第三方库，利用自身集成的各个模块便可开发出功能齐全的web应用，不过活跃的AngularJS社区也开发了很多能够最大限度强化web应用的库。本文带读者了解专业开发使用的模块AngularUI中的ui-路由(ui-router)。AngularUI库已经被分成了几个模块，用户可以只选择载入自己感兴趣的模块，而不用载入整个库。
UI-Router被认为是AngularUI为开发者提供的最实用的一个模块，它是一个让开发者能够根据URL状态或者说是&机器状态&来组织和控制界面UI的渲染，而不是仅仅只改变路由（传统AngularJS应用实用的方式）。该模块为开发者提供了很多最视图（view）额外的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭。
安装方式可以选择下载发行版本或者使用Bower（前端包管理器）：
$ bower install angular-ui-router --save
同时也需要将源文件包含到页面中：
&script type=text/javascript src=app/bower_components/angular-ui-router/release/angular-ui-router.js&&/script&
接下来，将UI-Router作为web应用的依赖，注入到主程序：
angular.module('myApp', ['ui.router']);
与集成的ngRoute服务不同的是，UI-Router可以将视图嵌套，因为它基于的是操作状态而仅非URL。与传统做法使用ng-view不同的是，在ngRoute里需要使用ui-view服务。当在ui-router中处理路由和状态时，开发者的重心是当前的状态是什么以及在哪一个页面里。
和ngRoute一样，为特定状态指定的模板将会放在
元素中。在这些模板中也可以包含自己的ui-view,这就是在同一个路由下实现嵌套视图的方法。要定义一个路由，与传统的方法相同：使用.config方式，但使用的不是$routeProvider而是$stateProvider。
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('start', {
url: '/start',
templateUrl: 'partials/start.html'
上述代码在设置对象上定义了一个叫start的状态。设置对象stateConfig和路由设置对象的选项是非常相似的。
模板，模板路径，模板Provider
开发者可以在每个视图下使用如下方式来设置模板 - template - HTML字符串，或者是返回HTML字符串的函数 - templateUrl - HTML模板的路径，或者是返回HTML模板路径的函数 - templateProvider - 返回HTML字符串的函数 例如：
$stateProvider.state('home', {
template: '
Hello {{ name }}
和ngRoute相似，开发者可以指定任何已经被注册的控制器，或者在路由里面创建一个作为控制器的函数。但如果没有定义模板，控制器将无效。
预载入Resolve
使用预载入功能，开发者可以预先载入一系列依赖或者数据，然后注入到控制器中。在ngRoute中resolve选项可以允许开发者在路由到达前载入数据保证（promises）。在使用这个选项时比使用angular-route有更大的自由度。
预载入选项需要一个对象，这个对象的key即要注入到控制器的依赖，这个对象的value为需要被载入的factory服务。
如果传入的时字符串，angular-route会试图匹配已经注册的服务。如果传入的是函数，该函数将会被注入，并且该函数返回的值便是控制器的依赖之一。如果该函数返回一个数据保证（promise），这个数据保证将在控制器被实例化前被预先载入并且数据会被注入到控制器中。
$stateProvider.state('home', {
resolve: {
//这个函数的值会被直接返回，因为它不是数据保证
person: function() {
name: Ari,
email: ari@fullstack.io
//这个函数为数据保证, 因此它将在控制器被实例化之前载入。
currentDetails: function($http) {
return $http({
method: 'JSONP',
url: '/current_details'
//前一个数据保证也可作为依赖注入到其他数据保证中！（这个非常实用）
facebookId: function($http, currentDetails) {
method: 'GET',
url: '/api/current_user',
email: currentDetails.data.emails[0]
//定义控制器
controller: function($scope, person,
currentDetails, facebookId) {
$scope.person =
url选项将会为该应用的状态指定一个URL基于用户浏览该应用所在的状态。这样当在浏览该应用的时候便能实现深度链接的效果。 该选项与ngRoute的URL相似，但可以被视为对ngRoute主要的升级，在接下来的文章里你便会认可这一点。开发者可以这样指定一个基本的路由。
$stateProvider
.state('inbox', {
url: '/inbox',
template: '
Welcome to your inbox
当用户浏览到/inbox时，该应用将状态改为inbox同时向主ui-view元素中插入模板中的内容(&Welcome to your inbox&)。URL参数有多个选项，因此它非常强大。开发者可以像设置ngRoute一样设置最基本的参数：
$stateProvider
.state('inbox', {
url: '/inbox/:inboxId',
template: '
Welcome to your inbox
', controller: function($scope, $stateParams) { $scope.inboxId = $stateParams.inboxId; } });
现在将:inboxId最为URL的第二个部分，例如：访问/inbox/1,那么$stateParams.inboxId就为1（$stateParams为{inboxId:1}）。同时也可使用不同的语法：
url: '/inbox/{inboxId}'
路径必须匹配URL，与ngRoute不同的是，当用户访问到/inbox/时，上面的的路径会被激活，然而当访问到/inbox时不会被激活。路径同时也使开发者可以使用正则表达式来匹配，例如：
// 限定id为6位16进制数字
url: '/inbox/{inboxId:[0-9a-fA-F]{6}}',
// 匹配任何在 `/inbox`后面的url（慎用）并匹配值到indexId
url: '/inbox/{inboxId:.*}'
注意，在路由中目前还无法使用路由组，路由数据预载入器无法预载入。
在路径里也可以指定查询参数：
// /inbox?sort=ascending 将会被匹配
url: '/inbox?sort'
使用url参数可以实现嵌套的路由，有了嵌套路由便可在同一个模板同一个路由实现多层次的ui-view，例如在/inbox中嵌入更多路由：
$stateProvider
.state('inbox', {
url: '/inbox/:inboxId',
template: '
Welcome to your inbox
', controller: function($scope, $stateParams) { $scope.inboxId = $stateParams.inboxId; } }) .state('inbox.priority', { url: '/priority', template: '
Your priority inbox
第一个路由是传统的，注意第二个，它是/inbox下的一个子路由：state( . )语法指定了它使子路由。/inbox/1将匹配第一个路由，而/index/1/priority会匹配第二个路由。使用这种语法，在父视图中的ui-view元素将会由第二个路由控制。
Params 路由参数
params选项是一个包含路径中的参数和正则表达式匹配结果的数组。该选项不能和url选项混用！当某状态被激活时，应用将这个数组赋值给$stateParams服务。
Views 视图
开发者可以在一个状态中设置多个有名称的视图。该功能在ui-router中很强大，开发者可以在同一个模板中改变和切换不同的视图。
&如果设置了视图选项，则该状态的&template&，&templateUrl&及&templateProvider&将被忽略。如果想在路由里包含父级模板，就需要创建一个包含模板的抽象模板。
例如有这样的视图：
接下来就可以创建将被分别被插入到上述ui-view的有命名的视图了，每个子视图可以包含自己的模板、控制器和预载入数据。
$stateProvider
.state('inbox', {
'filters': {
template: '
Filter inbox
', controller: function($scope) {} }, 'mailbox': { templateUrl: 'partials/mailbox.html' }, 'priority': { template: '
Priority inbox
', resolve: { facebook: function() { return FB.messages(); } } } } });
abstract 抽象模板
抽象模板不能被激活，但是它的子模板可以被激活。抽象模板可以提供一个包括了多个有名的视图的模板，或者它可以传递作用域变量$scope给子模板。使用它可以在同一个url下传递自定义数据或者预载入的依赖。除了需要添加abstract属性外，其他设置和设定一个常规状态是相同的：
$stateProvider
.state('admin', {
abstract: true,
url: '/admin',
template: '
' }) .state('admin.index', { url: '/index', template: '
Admin index
' }) .state('admin.users', { url: '/users', template: '
onEnter,onExit 回调函数
当应用进入或者离开当前状态的视图时会调用这两个函数。这两个函数可以访问预载入的数据。这两个回调函数使开发者可以根据状态改变来采取某些动作，例如在用户要离开时可以弹出对话框&你确定吗？&以及防止意外操作等。
自定义数据也可以被附加到状态控制对象state configObject.该数据和预载入数据resolve属性相似，但是该数据不会被注入到控制器中，promise也不会被预载入，它的用途是从父状态传递数据到子状态。
和ngRoute相同的是，angular-route服务会在不同的状态生命周期lifecycle里启动某些事件events。监听$scope对象便可以捕获这些事件然后采取不同的响应或者操作。如下的事件将会在$rootScope上触发，因此在任何$scope对象上都可以监听到这些事件。
状态改变事件
$scope.$on('$stateChangeStart',
function(evt, toState, toParams, fromState, fromParams), {
// 如果需要阻止事件的完成
evt.preventDefault();
可以触发的事件包括：
stateChangeStart
当状态改变开始的时候被触发
$stateChangeSuccess
当状态改变成功后被触发
$stateChangeError
当状态改变遇到错误时被触发，错误通常是目标无法载入，需要预载入的数据无法被载入等。
视图载入事件
视图载入阶段ui-router也提供了一些事件
$viewContentLoading
当视图正在被载入且在DOM被渲染之前触发。
$scope.$on('$viewContentLoading',
function(event, viewConfig){
// 获取任何视图设置的参数，以及一个特殊的属性：viewConfig.targetView
$viewContentLoaded
当视图被载入且DOM已经渲染完成后被触发。
$stateParams 状态参数
在上面提及使用$stateparams来提取在url中的不同参数。该服务的作用是处理url的不同部分。例如，当上述的inbox状态是这样时：
url: '/inbox/:inboxId/messages/{sorted}?from&to'
//当用户访问者链接时：
'/inbox/123/messages/ascending?from=10&to=20'
$stateParams对象的值为：
{inboxId: '123', sorted: 'ascending', from: 10, to: 20}
$urlRouterProvider
和ngRoute一样，开发者可以在该对象上设定特定的URL被激活时做什么的规则。由于设定好的状态在特定的url被访问是会自动激活，所以$urlRouterProvider没有必要用来管理激活和载入状态。但当需要管理哪些被发生在当前状态之外的作用域scope时它会非常有用，例如在重定向或者安全验证的时候。在模块的设置函数里便可使用$urlRouterProvider。
该函数需要两个参数：1.当前的路径，2.需要重定向到的路径（或者是需要在路径被访问是运行的函数）。设置重定向前需要为$urlRouterProvider设置when函数来接受一个字符串。例如，当希望重定向一个空的路由到/inbox：
.config(function($urlRouterProvider) {
$urlRouterProvider.when('', '/inbox');
如果传递的是函数，在路径被匹配时该函数会被执行，处理器返回如下3个值中的一个： - falsy，该回应告诉$urlRouter没有匹配到当前url规则，应该尝试匹配新的路径，这样能保证用户访问了正常的路径。 - 字符串，$urlRouter将该字符串当做重定向的路径。 - TRUE 或者 undefined，该回应告诉$urlRouter，url已被处理
otherwise()
和ngRoute的otherwise()函数相似，在用户提交的路径没有被定义的时候它将重定向到指定的页面。这是个创建&默认&路径的好方法。 otherwise()只接受一个参数，要么函数要么字符串，字符串必须为合法的url路由地址，函数则会在没有任何路径被匹配的时候被运行。
.config(function($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$urlRouterProvider.otherwise(
function($injector, $location) {
$location.path('/');
如果想越过任何URL的匹配或者在其他路由前做路由修改，则可以使用rule()函数。在使用它的时候必须返回一个合法的代表路径的字符串。
app.config(function($urlRouterProvider){
$urlRouterProvider.rule(
function($injector, $location) {
return '/index';使用 AngularJS 的路由和模板实现单页应用 (Single Page) - 推酷
使用 AngularJS 的路由和模板实现单页应用 (Single Page)
单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。Angular可以帮助我们轻松创建此类应用
我们打算创建一个简单的应用，涉及主页，关于和联系我们页面。虽然Angular是为创建比这更复杂的应用而生的，但是本教程展示了许多我们在大型项目中需要的概念。
无刷新式页面变化
每个页面包含不同数据
虽然使用Javascript和Ajax可以实现上述功能，但是在我们的应用中，Angular可以使我们处理更容易。
- script.js
&!-- stores all our angular code --&
- index.html
&!-- main layout --&
&!-- the pages that will be injected into the main layout --&
----- home.html
----- about.html
----- contact.html
这一部分比较简单。我们使用
。打开你的index.html文件，然后我们利用导航栏，添加一个简单布局。
&!-- index.html --&
&!DOCTYPE html&
&!-- SCROLLS --&
&!-- load bootstrap and fontawesome via CDN --&
&link rel=&stylesheet& href=&///bootstrap/3.0.0/css/bootstrap.min.css& /&
&link rel=&stylesheet& href=&///font-awesome/4.0.0/css/font-awesome.css& /&
&!-- SPELLS --&
&!-- load angular via CDN --&
&script src=&/ajax/libs/angularjs/1.0.8/angular.min.js&&&/script&
&script src=&script.js&&&/script&
&!-- HEADER AND NAVBAR --&
&nav class=&navbar navbar-default&&
&div class=&container&&
&div class=&navbar-header&&
&a class=&navbar-brand& href=&/&&Angular Routing Example&/a&
&ul class=&nav navbar-nav navbar-right&&
&li&&a href=&#&&&i class=&fa fa-home&&&/i& Home&/a&&/li&
&li&&a href=&#about&&&i class=&fa fa-shield&&&/i& About&/a&&/li&
&li&&a href=&#contact&&&i class=&fa fa-comment&&&/i& Contact&/a&&/li&
&!-- MAIN CONTENT AND INJECTED VIEWS --&
&div id=&main&&
&!-- angular templating --&
&!-- this is where content will be injected --&
&!-- FOOTER --&
&footer class=&text-center&&
View the tutorial on &a href=&http://scotch.io/tutorials/angular-routing-and-templating-tutorial&&Scotch.io&/a&
在页面超链接中，我们使用&#&。我们不希望浏览器认为我们实际上是链接到about.html和contact.html。
Angular应用
模型和控制器
此时我们准备设置我们的应用。让我们先来创建angular
。关于模型和控制器，请查阅文档已获得更多内容。
首先，我们需要用javascript来创建我们的模型和控制器，我们将此操作放到script.js中：
// script.js
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', []);
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
接下来让我们把模型和控制器添加到我们的HTML页面中，这样Angular可以知道如何引导我们的应用。为了测试功能有效，我们也会展示一个我们创建的变量$scope.message的值。
&!-- index.html --&
&!DOCTYPE html&
&!-- define angular app --&
&html ng-app=&scotchApp&&
&!-- SCROLLS --&
&!-- load bootstrap and fontawesome via CDN --&
&link rel=&stylesheet& href=&///bootstrap/3.0.0/css/bootstrap.min.css& /&
&link rel=&stylesheet& href=&///font-awesome/4.0.0/css/font-awesome.css& /&
&!-- SPELLS --&
&!-- load angular via CDN --&
&script src=&/ajax/libs/angularjs/1.2.10/angular.min.js&&&/script&
&script src=&///ajax/libs/angularjs/1.2.10/angular-route.js&&&/script&
&script src=&script.js&&&/script&
&!-- define angular controller --&
&body ng-controller=&mainController&&
&!-- MAIN CONTENT AND INJECTED VIEWS --&
&div id=&main&&
{{ message }}
&!-- angular templating --&
&!-- this is where content will be injected --&
在main这个div层中，我们现在可以看到我们创建的消息。知道了我们的模型和控制器设置完毕并且Angular可以正常运行，那么我们将要开始使用这一层来展示不同的页面。
将页面注入到主布局中
ng-view 是一个用来包含当前路由(/home, /about, or /contact)的模板的angular指令, 它会获得基于特定路由的文件并将其诸如到主布局中(index.html).
我们将会想div#main中的站点加入ng-view代码来告诉Angular将我们渲染的页面放在哪里.
&!-- index.html --&
&!-- MAIN CONTENT AND INJECTED VIEWS --&
&div id=&main&&
&!-- angular templating --&
&!-- this is where content will be injected --&
&div ng-view&&/div&
配置路由和视图
由于我们在创建一个单页应用，并且不希望页面刷新，那么我们会用到Angular路由的能力。
让我们看一下我们的Angular文件，并添加到我们的应用中。我们将会在Angular中使用
来处理我们的路由。通过这种方式，Angular将会处理所有神奇的请求，通过取得一个新文件并将其注入到我们的布局中。
AngularJS 1.2 和路由
在1.1.6版本之后，ngRoute模型不在包含在Angular当中。你需要通过在文档开头声明该模型来使用它。该教程已经为AngularJS1.2更新：
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller
: 'mainController'
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller
: 'aboutController'
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller
: 'contactController'
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
现在，我们已经通过$routeProvider定义好了我们的路由。通过配置你会发现，你可以使用指定路由、模板文件甚至是控制器。通过这种方法，我们应用的每一部分都会使用Angular控制器和它自己的视图。
: angular默认会将一个井号放入URL中。为了避免这种事情，我们需要使用$locationProvider来启用 HTML History API. 它将会移除掉hash并创建出漂亮的URL。更多的信息将:&
我们的主页将会拉取 home.html 文件. About 和 contact 页面将会拉取它们关联的文件. 现在如果我们查看我们的应用，并点击导航，我们的内容将会照我们的意思进行改变.
要完成这个教程，我们只需要定义好将会被注入的页面就行了. 我们也将会让它们每一个都展示来自与他们相关的控制器的消息.
&!-- home.html --&
&div class=&jumbotron text-center&&
&h1&Home Page&/h1&
&p&{{ message }}&/p&
&!-- about.html --&
&div class=&jumbotron text-center&&
&h1&About Page&/h1&
&p&{{ message }}&/p&
&!-- contact.html --&
&div class=&jumbotron text-center&&
&h1&Contact Page&/h1&
&p&{{ message }}&/p&
: Angular路由只会在你为其设置的环境后才会起效。你要确保是使用的 http://localhost 或者是某种类型的环境. 否则angular会说
跨域请求支持HTTP
Angular应用的动画
一旦你把所有的路由都完成之后，你就能开始把玩你的站点并向其加入动画了. 为此，你需要使用angular提供的
&模块. 后面你就可以用CSS动画来用动画的方式切换视图了.
关于如何让你的站点拥有动画的教程，请看看:
单页面App上的SEO
理想情况下，此技术可能会被用在有用户登录后的应用程序中。你当然不会真的想要特定用户私人性质的页面被搜索引擎索引. 例如，你不会想要你的读者账户，Facebook登录的页面或者博客CMS页面被索引到.
如果你确实像针对你的应用进行SEO，那么如何让SEO在使用js构建页面的应用/站点上起效呢? 搜索引擎难于处理这些应用程序因为内容是由浏览器动态构建的，而且对爬虫是不可见的.
让你的应用对SEO友好
使得js单页面应用对SEO友好的技术需要定期做维护. 根据官方的
, 你需要创建HTML快照. 其如何运作的概述如下:
爬虫会发现一个友好的URL(http://scotch.io/seofriendly#key=value)
然后爬虫会想服务器请求对应这个URL的内容(用一种特殊的修改过的方式)
Web服务器会使用一个HTML快照返回内容
HTML快照会被爬虫处理
然后搜索结果会显示原来的URL
更多关于这个过程的信息，可以去看看Google的
&和他们有关
: 我们写过一篇如何让Angular对SEO友好的教程. 如果你感兴趣的话可以读一下: 使用
这是一个非常简单的关于如何使用Angular来在一层中展示不同的视图。现在，你可以继续前进创建更大的单页应用。当然，关于Angular依然有很多需要学习的地方，我会在我学习Angular的过程中不断记录下不同的特性。
如果有任何人有任何建议，关于我将来的Angular文章或者不同的方式来展示我们目前做的东西（写同样的东西有太多的方式，这可以让人疯掉的），请在评论中指出。
如果你正在寻找更多的路由的灵活性，如嵌套视图和基于状态模板而不是基于路由，你绝对会有兴趣看一下
这里推荐一篇关于UI Rooter的文章：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}