使用 AngularJS 的路由和模板实现单页应用 (Single Page) 已翻译 100%

oschina 投递于 2014/06/20 09:06 (共 9 段, 翻译完成于 06-20)
阅读 20831
收藏 27
2
加载中

概述

单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。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

0x0bject
0x0bject
翻译于 2014/06/20 09:26
1

HTML页面

这一部分比较简单。我们使用BootstrapFont 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可以正常运行,那么我们将要开始使用这一层来展示不同的页面。

0x0bject
0x0bject
翻译于 2014/06/20 09:36
1

将页面注入到主布局中

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>

...
LeoXu
LeoXu
翻译于 2014/06/20 09:49
2

配置路由和视图

由于我们在创建一个单页应用,并且不希望页面刷新,那么我们会用到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控制器和它自己的视图。

0x0bject
0x0bject
翻译于 2014/06/20 09:50
1

清理URL: angular默认会将一个井号放入URL中。为了避免这种事情,我们需要使用$locationProvider来启用 HTML History API. 它将会移除掉hash并创建出漂亮的URL。更多的信息将: AngularJS中漂亮的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.

LeoXu
LeoXu
翻译于 2014/06/20 10:09
1

Angular应用的动画

一旦你把所有的路由都完成之后,你就能开始把玩你的站点并向其加入动画了. 为此,你需要使用angular提供的 ngAnimate 模块. 后面你就可以用CSS动画来用动画的方式切换视图了.

关于如何让你的站点拥有动画的教程,请看看: AngularJS应用的动画: ngView.

LeoXu
LeoXu
翻译于 2014/06/20 10:27
1

单页面App上的SEO

理想情况下,此技术可能会被用在有用户登录后的应用程序中。你当然不会真的想要特定用户私人性质的页面被搜索引擎索引. 例如,你不会想要你的读者账户,Facebook登录的页面或者博客CMS页面被索引到.

如果你确实像针对你的应用进行SEO,那么如何让SEO在使用js构建页面的应用/站点上起效呢? 搜索引擎难于处理这些应用程序因为内容是由浏览器动态构建的,而且对爬虫是不可见的.

LeoXu
LeoXu
翻译于 2014/06/20 10:33
1

让你的应用对SEO友好

使得js单页面应用对SEO友好的技术需要定期做维护. 根据官方的Google 建议, 你需要创建HTML快照. 其如何运作的概述如下:

  1. 爬虫会发现一个友好的URL(http://scotch.io/seofriendly#key=value)

  2. 然后爬虫会想服务器请求对应这个URL的内容(用一种特殊的修改过的方式)

  3. Web服务器会使用一个HTML快照返回内容

  4. HTML快照会被爬虫处理

  5. 然后搜索结果会显示原来的URL

更多关于这个过程的信息,可以去看看Google的 AJAX爬虫 和他们有关创建HTML快照 的指南.

SEO 文章: 我们写过一篇如何让Angular对SEO友好的教程. 如果你感兴趣的话可以读一下: 使用Prerender.io完成AngularJS 的 SEO .

LeoXu
LeoXu
翻译于 2014/06/20 10:39
1

结论

这是一个非常简单的关于如何使用Angular来在一层中展示不同的视图。现在,你可以继续前进创建更大的单页应用。当然,关于Angular依然有很多需要学习的地方,我会在我学习Angular的过程中不断记录下不同的特性。

如果有任何人有任何建议,关于我将来的Angular文章或者不同的方式来展示我们目前做的东西(写同样的东西有太多的方式,这可以让人疯掉的),请在评论中指出。

延伸阅读

如果你正在寻找更多的路由的灵活性,如嵌套视图和基于状态模板而不是基于路由,你绝对会有兴趣看一下UI Router

这里推荐一篇关于UI Rooter的文章:AngularJS Routing Using UI-Router

0x0bject
0x0bject
翻译于 2014/06/20 09:43
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(1)

h
hacke2
太棒了!
返回顶部
顶部