如何利用AngularJS打造一款简单Web应用


Posted in Javascript onDecember 05, 2015

目前不同类型的Web开发人员都在广泛使用AngularJS,这套卓越的框架也充分证明了自身满足各类不同需求的能力。作为一名Web开发人员,无论大家是刚刚入门的新手还是已经拥有丰富的实践经验,选择一款优秀的框架都是必要的工作前提,而AngularJS正是这样一套理想的解决方案。在使用AnguarJS的过程中,大家可以同时学习到更多与应用程序开发相关的知识以及如何构建起更出色、更具吸引力的应用成果。如果大家希望在应用程序的创建工作中采取各类最佳实践,那么AngularJS也能够带来极大的助益。总而言之,这套框架的强大功能与特性永远不会让有着应用开发需求的朋友们失望。

如何利用AngularJS打造一款简单Web应用

AngularJS拥有多项极为出彩的特性,今天我们就以一款简单的应用程序为例帮助大家了解如何对其加以运用。而在配合Firebase的情况下,我们这款简单但却具备实用性的应用能够轻松被构建完成。作为成品,开发完成的这款应用允许大家随时登入或者登录并在其上发布文章。

AngularJS与Firebase介绍

如何利用AngularJS打造一款简单Web应用

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以访问登入页面,在这里大家可以实现对该应用程序的访问。

如何利用AngularJS打造一款简单Web应用

如果大家需要使用Firebase(具体理由如前文所述),则需要首先创建一个Firebase账户。在账户创建完成后,我们将屏幕上所显示的已创建应用url添加进来,而后点击“管理该应用”。

创建自己的应用程序感觉不错吧?Angular.js能够为此类开发工作提供我们所需要的一切。而且只需几分钟,我们的这款简单小应用就已经正式上线啦!

Javascript 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 #Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 #Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 #Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 #Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 #Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 #Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 #Javascript
You might like
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
js下写一个事件队列操作函数
2010/07/19 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
Python中的 enum 模块源码详析
2019/01/09 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
Python 多进程原理及实现
2020/12/21 Python
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
安全教育实施方案
2014/03/02 职场文书
教师新年寄语
2014/04/03 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
python实现会员管理系统
2022/03/18 Python