如何利用AngularJS打造一款简单Web应用
目前不同类型的Web开发人员都在广泛使用AngularJS，这套卓越的框架也充分证明了自身满足各类不同需求的能力。作为一名Web开发人员，无论大家是刚刚入门的新手还是已经拥有丰富的实践经验，选择一款优秀的框架都是必要的工作前提，而AngularJS正是这样一套理想的解决方案。在使用AnguarJS的过程中，大家可以同时学习到更多与应用程序开发相关的知识以及如何构建起更出色、更具吸引力的应用成果。如果大家希望在应用程序的创建工作中采取各类最佳实践，那么AngularJS也能够带来极大的助益。总而言之，这套框架的强大功能与特性永远不会让有着应用开发需求的朋友们失望。
AngularJS拥有多项极为出彩的特性，今天我们就以一款简单的应用程序为例帮助大家了解如何对其加以运用。而在配合Firebase的情况下，我们这款简单但却具备实用性的应用能够轻松被构建完成。作为成品，开发完成的这款应用允许大家随时登入或者登录并在其上发布文章。
AngularJS与Firebase介绍
AngularJS是目前最受Web开发人员青睐的一套JavaScript MVC框架。如果大家希望创建出一款与众不同的应用，那么它绝对是各位的最佳选择——这要归功于其强大的HTML功能扩展特性。在AngularJS的帮助下，我们不再需要使用大量代码来构建应用程序，其惊人的关联性注入与绑定机制将让应用开发变得异常便捷。
在另一方面，Firebase能够为AngularJS提供出色的支持，这就免除了大家为所创建应用程序开发后端支持的烦恼。在Firebase的帮助下，我们的应用程序将能够以实时方式进行数据备份——当然，必要的API调用还是少不了的。
AngularJS本身虽然已经相当强大，但在Firebase的辅助下，我们将能够让自己的应用程序成果更上一层楼。
从这里开始
在着手利用AngularJS创建这款简单的小Web应用之前，大家首先需要下载angular-seed项目。下载完成之后，大家需要打开对应的下载目录并安装其中的关联性以实现运行。具体代码如下所示：
$ cd angular-seed
$ npm install ## Install the dependencies
下一步则是利用以下代表启动节点服务器：
$ npm start ## Start the server
节点服务器启动并开始运行之后，我们需要打开浏览器并访问http://localhost:8000/app/index.html，此时其中会显示正在运行的默认应用。
接下来访问angular-seed项目文件夹下的该应用目录，应用程序的代码就保存在这里。
作为该应用程序的核心，app.js也将存放在该应用文件夹内。所有应用层级的模块与app.js内的路由都需要进行声明。
另外，大家还会在这里找到angular-seed的两个视图，即view 1与view 2。它们始终以默认形式存在。我们需要在应用文件夹中将这些视图删除。
现在开始我们要从零开始创建应用程序了：大家首先需要打开app.js并删除其中的全部已有代码。在app.js当中定义我们的应用程序路由，这要求大家使用ngRoute，AngularJS当中的模块之一。默认情况下app.js并不包含该模块，因此我们需要手动将其注入至应用程序当中从而加以使用。大家可以利用以下代码完成该AngularJS模块的添加工作：
angular.module('myApp', [
'ngRoute'
])
ngRoute模块将带来一项重要的组件，即$routeProvider，其能够完美地对路由进行配置。我们需要使用以下代码将$routeProvider注入至angular-module的配置方法当中，从而完成路由定义：
'use strict';
angular.module('myApp', [
'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
// Routes will be here
}]);
完成以上步骤后，现在我们就可以打开index.html了。将index.html当中的全部内容清除，只保留脚本引用以及div。
每一次进行路由变更时，我们都需要按照以上方法对div内容进行调整。
在视图当中创建符号
我们需要在app目录当中创建一个新的文件夹并将其命名为home。在该文件夹当中，我们额外再创建两个文件夹，分别为home.js与home.html。首先打开home.html并将以下代码添加进去：
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="icon" href="http://getbootstrap.com/favicon.ico"> <title>AngularJS & Firebase Web App</title> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet"> <link href="justified-nav.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="jumbotron" style="padding-bottom:0px;"> <h2>AngularJS & Firebase App!</h2> </div> <form class="form-signin" role="form"> <input type="email" class="form-control" placeholder="Email address" required="" autofocus=""> <input type="password" class="form-control" placeholder="Password" required=""> <label class="checkbox"> <a href="#"> Sign Up</> </label> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div> </body></html>
在home.js当中，我们则需要创建一套路由机制以访问home视图。另外还需要为由home视图创建的$scope设置一套控制器。控制器永远负责控制与之对应的特定视图。具体代码如下所示：
use strict';
angular.module('myApp.home', ['ngRoute'])
// Declared route
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'home/home.html',
controller: 'HomeCtrl'
});
}])
// Home controller
.controller('HomeCtrl', [function() {
}]);
现在应用程序已经准备就绪。打开app.js，而后将myApp.home home模块添加到该应用当中。利用$routeProvider.otherwise方法为我们的应用程序声明一套指向home视图的默认路由，具体代码如下所示：
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.home' // Newly added home module
]).
config(['$routeProvider', function($routeProvider) {
// Set defualt view of our app to home
$routeProvider.otherwise({
redirectTo: '/home'
});
}]);
如果大家希望显示自己的home页面，则将home.js添加到该应用的主HTML模板文件当中。要完成这项操作，请打开index.html文件并湢以下代码：
<script src="home/home.js"></script>
现在一切工作已经完成，该应用随时准备加以运行了！要开始使用这款应用，我们需要重启服务器并将自己的浏览器指向http://localhost:8000/app/index.html以访问登入页面，在这里大家可以实现对该应用程序的访问。
如果大家需要使用Firebase（具体理由如前文所述），则需要首先创建一个Firebase账户。在账户创建完成后，我们将屏幕上所显示的已创建应用url添加进来，而后点击“管理该应用”。
创建自己的应用程序感觉不错吧？Angular.js能够为此类开发工作提供我们所需要的一切。而且只需几分钟，我们的这款简单小应用就已经正式上线啦！
相关推荐
-
在AngularJS应用中实现一些动画效果的代码
在Angular当中,CSS和JavaScript之间唯一的区别就是它们的定义.没有什么区别妨碍到被定义的动画被使用.首先,我们需要加载ngAnimate模块到我们应用的root模块当中. angular.module('coursesApp', ['ngAnimate']); 而所有将被处理的JavaScript动画事件依然保持不变.以下是一个直接支持的动画列表和它们对应的不同行为: 指令事件集 ng-view ng-include ng-switch ng-if enter leave n
-
使用AngularJS创建单页应用的编程指引
概述 单页应用现在越来越受欢迎.模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉.Angular可以帮助我们轻松创建此类应用 简单应用 我们打算创建一个简单的应用,涉及主页,关于和联系我们页面.虽然Angular是为创建比这更复杂的应用而生的,但是本教程展示了许多我们在大型项目中需要的概念. 目标 单页应用 无刷新式页面变化 每个页面包含不同数据 虽然使用Javascript和Ajax可以实现上述功能,但是在我们的应用中,Angular可以使我们处理更容易. 文档结构 - scri
-
AngularJS 简单应用实例
AngularJS 应用 现在是时候创建一个真正的 AngularJS 单页 Web 应用(single page web application,SPA)了. AngularJS 应用实例 您已经学习了足够多关于 AngularJS 的知识,现在可以开始创建您的第一个 AngularJS 应用程序: 我的笔记 保存 清除 剩余字数: 100 应用程序讲解 AngularJS 实例 <!DOCTYPE html> <html> <head> <meta chars
-
创建你的第一个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的视图功能应用
AngularJS支持通过在单个页面上的多个视图的单页应用.要做到这一点AngularJS提供ng-view 和 ng-template指令,以及 $routeProvider 服务. ng-view ng-view 标记只是简单地创建一个占位符,是一个相应的视图(HTML或ng-template视图),可以根据配置来放置. 使用 定义一个div与ng-view在主模块中. <div ng-app="mainApp"> ... <div ng-view><
-
分享使用AngularJS创建应用的5个框架
如果你计划使用AngularJS创建你的Web应用,那现在就开始吧.你不需要有任何的恐惧和担心,因为现在有很多的框架都可以很好地支持AngularJS.这些框架都有事先安装的Web组件,使用它们可以帮助你快速进行项目开发.这里列举5个这样的框架,帮助你使用AngularJS构建Web应用. 1. AngularUI Bootstrap 这一框架是基于目前非常流行的前端框架Bootstrap的,它包含了一系列的Bootstrap组件,比如Carousel.Alert.Collapse.Rating
-
使用ngView配合AngularJS应用实现动画效果的方法
AngularJS 提供了一个很棒的方式来创建单页app.正是由于这个原因,使得我们的站点看起来更像是一个原生的手机程序.为了使它看起来更像是原生的程序,我们可以使用 ngAnimate module 为它添加过渡和动画效果. 这个模块可以使我们创建漂亮的程序.今天,我们将要看一下如何为 ng-view 添加动画效果. 我们要构建什么 我们假设我们有一个单页面的程序,并且想为这个页面添加动画效果.点击某一个链接会将一个试图滑出,同时将另一个试图滑入. 我们将会使用: 使用 ngRoute 来为我
-
使用Chrome浏览器调试AngularJS应用的方法
当我们构建AngularJS应用时,通过浏览器(如Chrome,Firefox和IE)的JavaScript控制台访问应用中隐藏的数据和服务总会有些困难.下面是一些简单的技巧可以帮助我们通过Javascript控制台来查看或者控制正在运行的Angular应用,使得应用可以比较容易进行测试,修改,甚至实时的修改我们的Angular应用: 1: 访问作用域 通过一行简单的JS程序访问页面中任何作用域(甚至是隔离的作用域!): > angular.element(targetNode).scope()
-
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
1.indexedDB(Model) -- 前端浏览器对象型数据库,一般我们后台用的数据库都是关系型数据库.那么indexeddb有什么特点呢: 首先,从字义上它是索引型数据库,从实际使用中可以体现为,它需要为表创建索引才可以根据某个字段来获取数据,而在关系型数据库中,这明显是不需要的. 其次,我不需要行列数据的转化,我只需要通过类似于数组的处理方式: 复制代码 代码如下: objectStore.push(data); 有点像是把一个json对象塞入数据库,是不是很暴力? 2.bootstra
-
使用AngularJS 应用访问 Android 手机的图片库
Download angularjs.zip- 4.5 KB 介绍 这篇文章来说明如何使用AngularJs调用android Apps暴露的REST APIS来访问图像库. 背景 Android和IOS 有很多远程访问的app,但是开发者缺少远程访问手机特征的API.因此,myMoKit的开发是用来填补软件解决方案的缺陷的. 使用代码 使用代码是很简单的,你只要通过web URL 引用myMoKit 服务,你就可以看见所有暴露的REST API了 这些在手机里面的API列表和流媒体.通过Ang