首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 19, 2015

概述

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

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

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

- Author -

goldensun

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

Javascript 相关文章推荐
JavaScript继承方式实例
Oct 29 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
使用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
短波(1) 索尼(5) SONY(15) 电路图(1) ICF-7600(1) 德劲(5) PL-880(1) 东芝(1) 天线(6) TOSHIBA(1)
You might like
PHP多态代码实例
2015/06/26 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
Bootstrap 布局组件（全）
2016/07/18 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Python将string转换到float的实例方法
2019/07/29 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
如何用python 操作zookeeper
2020/12/28 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
印度尼西亚值得信赖的第一家网店：Bhinneka
2018/07/16 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
打架检讨书100字
2014/01/08 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
详解Mysql事务并发（脏读、不可重复读、幻读）
2022/04/29 MySQL