如何利用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 相关文章推荐
JavaScript的面向对象(二)
Nov 09 Javascript
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
原生js简单实现放大镜特效
May 16 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 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
SMARTY学习手记
2007/01/04 PHP
php 变量定义方法
2009/06/14 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
php自定义hash函数实例
2015/05/05 PHP
php检查页面是否被百度收录
2015/10/28 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
vue实现虚拟列表功能的代码
2020/07/28 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
python多线程之事件Event的使用详解
2018/04/27 Python
python读取文件名称生成list的方法
2018/04/27 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
浅析使用Python搭建http服务器
2019/10/27 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
食堂采购员岗位职责
2014/03/17 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
实习证明模板
2015/06/16 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
MySQL视图概念以及相关应用
2022/04/19 MySQL