首页
所有分类
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 相关文章推荐
js实现可拖动DIV的方法
Dec 17 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
jquery图片滚动放大代码分享（1）
Aug 25 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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
ICF-SW7600(1) 低放电路(1) PL450(1) H-501(1) PL990(2) S500(1) ICF-SW07(1) PL550(1) BCL3000(2) S700(1)
You might like
自制汽车收音机天线：收听广播的技巧和方法
2021/03/02 无线电
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
详解ES6中的let命令
2020/04/05 Javascript
DropDownList实现可输入可选择（两种版本可选）
2016/12/07 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Django实现自定义404，500页面教程
2017/03/26 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python二元算术运算常用方法解析
2020/09/15 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
美国销售第一的智能手机和平板电脑保护壳：OtterBox
2017/12/21 全球购物
说明书怎么写
2014/05/06 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书