首页
所有分类
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传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
vue实现pdf文档在线预览功能
Nov 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) 电台(1) 天线(6) 电磁辐射(1) SW(1) 发报机(1) LW(1) PL-880(1) 电路图(1) 调幅(1)
You might like
VFP与其他应用程序的集成
2006/10/09 PHP
深入了解php4(1)--回到未来
2006/10/09 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
js闭包学习心得总结
2018/04/17 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
python绘制简单彩虹图
2018/11/19 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
python文件路径操作方法总结
2020/12/21 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
党课心得体会范文
2014/09/09 职场文书
模范教师事迹材料
2014/12/16 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS