使用AngularJS创建单页应用的编程指引
概述
单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。angular可以帮助我们轻松创建此类应用
简单应用
我们打算创建一个简单的应用，涉及主页，关于和联系我们页面。虽然angular是为创建比这更复杂的应用而生的，但是本教程展示了许多我们在大型项目中需要的概念。
目标
- 单页应用
- 无刷新式页面变化
- 每个页面包含不同数据
虽然使用javascript和ajax可以实现上述功能，但是在我们的应用中，angular可以使我们处理更容易。
文档结构
- - script.js <!-- stores all our angular code -->
- - index.html <!-- main layout -->
- - pages <!-- the pages that will be injected into the main layout -->
- ----- home.html
- ----- about.html
- ----- contact.html
html页面
这一部分比较简单。我们使用bootstrap和font awesome。打开你的index.html文件，然后我们利用导航栏，添加一个简单布局。
<!-- index.html -->
<!doctype html>
<html>
<head>
<!-- scrolls -->
<!-- load bootstrap and fontawesome via cdn -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- spells -->
<!-- load angular via cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- header and navbar -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">angular routing example</a>
</div>
<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>
</ul>
</div>
</nav>
</header>
<!-- main content and injected views -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
<!-- footer -->
<footer class="text-center">
view the tutorial on <a href="http://scotch.io/tutorials/angular-routing-and-templating-tutorial">scotch.io</a>
</footer>
</body>
</html>
在页面超链接中，我们使用"#"。我们不希望浏览器认为我们实际上是链接到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">
<head>
<!-- scrolls -->
<!-- load bootstrap and fontawesome via cdn -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- spells -->
<!-- load angular via cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- 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 -->
</div>
在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> </div> ...
配置路由和视图
由于我们在创建一个单页应用，并且不希望页面刷新，那么我们会用到angular路由的能力。
让我们看一下我们的angular文件，并添加到我们的应用中。我们将会在angular中使用$routeprovider来处理我们的路由。通过这种方式，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控制器和它自己的视图。
清理url: 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>
</div>
<!-- about.html -->
<div class="jumbotron text-center">
<h1>about page</h1>
<p>{{ message }}</p>
</div>
<!-- contact.html -->
<div class="jumbotron text-center">
<h1>contact page</h1>
<p>{{ message }}</p>
</div>
本地运行: angular路由只会在你为其设置的环境后才会起效。你要确保是使用的 http://localhost 或者是某种类型的环境. 否则angular会说跨域请求支持http.
angular应用的动画
一旦你把所有的路由都完成之后，你就能开始把玩你的站点并向其加入动画了. 为此，你需要使用angular提供的 nganimate 模块. 后面你就可以用css动画来用动画的方式切换视图了.
单页面app上的seo
理想情况下，此技术可能会被用在有用户登录后的应用程序中。你当然不会真的想要特定用户私人性质的页面被搜索引擎索引. 例如，你不会想要你的读者账户，facebook登录的页面或者博客cms页面被索引到.
如果你确实像针对你的应用进行seo，那么如何让seo在使用js构建页面的应用/站点上起效呢? 搜索引擎难于处理这些应用程序因为内容是由浏览器动态构建的，而且对爬虫是不可见的.
让你的应用对seo友好
使得js单页面应用对seo友好的技术需要定期做维护. 根据官方的google 建议, 你需要创建html快照. 其如何运作的概述如下:
- 爬虫会发现一个友好的url(http://scotch.io/seofriendly#key=value)
- 然后爬虫会想服务器请求对应这个url的内容(用一种特殊的修改过的方式)
- web服务器会使用一个html快照返回内容
- html快照会被爬虫处理
- 然后搜索结果会显示原来的url