编程 Javascript

使用AngularJS创建单页应用的编程指引

Posted in Javascript onJune 19, 2015

概述

单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。Angular可以帮助我们轻松创建此类应用
简单应用

我们打算创建一个简单的应用，涉及主页，关于和联系我们页面。虽然Angular是为创建比这更复杂的应用而生的，但是本教程展示了许多我们在大型项目中需要的概念。
目标

单页应用
无刷新式页面变化
每个页面包含不同数据

虽然使用Javascript和Ajax可以实现上述功能，但是在我们的应用中，Angular可以使我们处理更容易。
文档结构

- script.js
- index.html
- pages
----- 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

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

使用AngularJS创建单页应用的编程指引

- Author -

goldensun

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

MooTools 1.2中的Drag.Move来实现拖放

Sep 15 Javascript

LazyForm jQuery plugin 定制您的CheckBox Radio和Select

Oct 24 Javascript

js本身的局限性别让javascript做太多事

Mar 23 Javascript

xml转json的js代码

Aug 28 Javascript

完美兼容多浏览器的js判断图片路径代码汇总

Apr 17 Javascript

socket.io学习教程之基础介绍（一）

Apr 29 Javascript

jQuery Validate 无法验证 chosen-select元素的解决方法

May 17 jQuery

es6系列教程_ Map详解以及常用api介绍

Sep 25 Javascript

JS实现验证码倒计时的注册页面

Jan 02 Javascript

jquery制作的移动端购物车效果完整示例

Feb 24 jQuery

全局安装 Vue cli3 和继续使用 Vue-cli2.x操作

Sep 08 Javascript

如何优化vue打包文件过大

Apr 13 Vue.js

使用AngularJS实现可伸缩的页面切换的方法

Jun 19 #Javascript

使用AngularJS实现表单向导的方法

Jun 19 #Javascript

举例详解AngularJS中ngShow和ngHide的使用方法

Jun 19 #Javascript

使用AngularJS和PHP的Laravel实现单页评论的方法

Jun 19 #Javascript

测试IE浏览器对JavaScript的AngularJS的兼容性

Jun 19 #Javascript

使用ngView配合AngularJS应用实现动画效果的方法

Jun 19 #Javascript

Backbone.js的Hello World程序实例

Jun 19 #Javascript