使用AngularJS创建单页应用的编程指引
概述
单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。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="https://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
相关推荐
-
AngularJS入门教程之学习环境搭建
学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设备,然后查看设备的详细信息. 本教程将向您展示AngularJS怎样使得web应用更智能更灵活,而且不需要各种扩展程序或插件. 通过本教程的学习,您将: 1.阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图. 2.学习如何使用AngularJ
-
分享使用AngularJS创建应用的5个框架
如果你计划使用AngularJS创建你的Web应用,那现在就开始吧.你不需要有任何的恐惧和担心,因为现在有很多的框架都可以很好地支持AngularJS.这些框架都有事先安装的Web组件,使用它们可以帮助你快速进行项目开发.这里列举5个这样的框架,帮助你使用AngularJS构建Web应用. 1. AngularUI Bootstrap 这一框架是基于目前非常流行的前端框架Bootstrap的,它包含了一系列的Bootstrap组件,比如Carousel.Alert.Collapse.Rating
-
Angularjs---项目搭建图文教程
开发工具采用WebStorm,没破解,使用了过期策略:安装之后不着急打开程序,先设置系统日期为未来的某个日期,比如2020年.然后再打开程序,试用.然后再改回来系统日期.虽然每次打开WebStorm都会提示: 不过不影响使用,点击"OK"继续吧. 项目采用anguarjs seed项目作为基础框架,搭建完成之后如下: .bowerrc的配置如下: { "directory": "app/lib"} 3. app中的各view拆分成不同的目录存放,
-
AngularJs入门教程之环境搭建+创建应用示例
本文简单讲述了AngularJs环境搭建+创建应用的方法.分享给大家供大家参考,具体如下: 概述 AngularJS是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web开发变得更简单.更高效.它是笔者用过的比较有特色的一款框架,以HTML作为模版语言并扩展HTML属性,使得应用组件开发保持高度的清晰和一致.本系列文章將以实际的案例简单的介绍AngularJs的特性和用
-
创建你的第一个AngularJS应用的方法
按以下步骤来创建AngularJS应用 第1步:加载框架 作为一个纯粹的JavaScript框架,它可以使用<script>标签来添加. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> 第2步:使用ng-app指令定义AngularJS应用 <div ng-app=""> ...
-
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
最近想学习AngularJS的使用,网上搜了一圈后,折腾了半天解决bug后,成功使用AngularJS整合Springmvc.Spring.Mybatis搭建了一个开发环境.(这里Spring使用的版本是4.0.6,Mybatis版本是3.2.5,AngularJS的版本是1.0.3) 第一步:创建一Maven项目,在pom.xml下添加需要的包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="
-
使用AngularJS创建单页应用的编程指引
概述 单页应用现在越来越受欢迎.模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉.Angular可以帮助我们轻松创建此类应用 简单应用 我们打算创建一个简单的应用,涉及主页,关于和联系我们页面.虽然Angular是为创建比这更复杂的应用而生的,但是本教程展示了许多我们在大型项目中需要的概念. 目标 单页应用 无刷新式页面变化 每个页面包含不同数据 虽然使用Javascript和Ajax可以实现上述功能,但是在我们的应用中,Angular可以使我们处理更容易. 文档结构 - scri
-
Docker部署单页应用的详细操作
目录 1. Docker 介绍 2. Docker 安装 3. Docker 基本操作 4. Vue 应用镜像 4.1 Dockerfile 配置文件 什么是 Dockerfile? 4.2 编写 Nginx 配置文件 4.3 构建镜像 5. 创建容器与启动 总结 1. Docker 介绍 Docker 是一个基于 GO 语言和 Linux 内核的虚拟化容器技术,遵从 Apache2.0 协议开源. Docker 与虚拟机给人的感觉比较相似,但是两者的实现原理不同:Docker 是虚拟化操作系统
-
使用AngularJS和PHP的Laravel实现单页评论的方法
完整代码:https://github.com/scotch-io/laravel-angular-comment-app 目前,Laravel和Angular均已经成为了Web发展世界里非常著名的工具.Laravel以给PHP社区引入的伟大内容著称,Angular以其惊人的前端工具及简单著称.组合这两大框架似乎是合乎逻辑的下一步. 在我们的使用环境下,我们将使用Laravel作为后端的RESTful API,Angular作为前端,以创建一个简单的单页的评论应用. 下面是一个简单的例子,展示了
-
使用Vue.js创建一个时间跟踪的单页应用
Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应
-
使用AngularJS对表单提交内容进行验证的操作方法
AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.它有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等--使用它可以大大减少书写代码的工作量,但和Jquery不同,使用AngularJS有一定的难度,因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证. AngularJS对表单中常用的验证操作 $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine
-
PHP创建单例后台进程的方法示例
本文实例讲述了PHP创建单例后台进程的方法.分享给大家供大家参考,具体如下: 可以通过如下语句启动一个PHP后台进程: $command = " php script.php "; $pid = exec("nohup $command > /dev/null 2>&1 & echo $!"); nohup表示这个进程独立于创建的用户,可以以守护方式运行. 如果需要这个后台进程是单例运行的,那么可以通过下面的方法来记录/判断进程是否已运行
-
AngularJS表单验证功能分析
本文实例讲述了AngularJS表单验证功能.分享给大家供大家参考,具体如下: 在AngularJS的管辖下,每个表单form都会创建一个ngFormController的一个实例.在表单里面的每个input都会创建一个在这个实例下的ngModelController实例,用以控制每个input的行为. 首先先从简单的验证开始. AngularJs的ngModelController提供了几种属性:$pristine;$dirty;$valid;$invalid;$error pristine:
-
Angularjs 创建可复用组件实例代码
AngularJS框架可以用Service和Directive降低开发复杂性.这个特性非常适合用于分离代码,创建可测试组件,然后将它们变成可重用组件. Directive是一组独立的JavaScript.HTML和CSS,它们封装了一个特定的行为,它将成为将来创建的Web组件的组成部分,我们可以在各种应用中重用这些组件.在创建之后,我们可以直接通过一个HTML标签.自定义属性或CSS类.甚至可以是HTML注释,来执行一个Directive. 这一篇教程将介绍如何创建一个'自定义步长选择' Dir
-
AngularJs表单校验功能实例代码
废话不多说了,具体代码如下所示: <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> <meta charset="UTF-8"> <title>angular表单校验</title> <link rel="stylesheet" href="../css/bootstrap.min.cs
-
AngularJS表单和输入验证实例
AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告. 注意:客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的. 1.HTML 控件 以下 HTML input 元素被称为 HTML 控件:input 元素.select 元素.button 元素.textarea 元素. 2.HTML 表单 AngularJS 表单是输入控件的集合.HTML 表单通常与 HTML 控件同时存在. <!DOCTYPE html> <html> <