你的第一个AngularJS应用--教程二:基架、建立和测试的工具

介绍
有很多可用的工具可以帮助你开发AngularJS 应用,那些非常复杂的框架不在我的讨论范围之中,这也是我开始这系列教程的原因。
在第一部分,我们掌握了AngularJS框架的基本结构,开发了第一应用。这篇博文是为那些初学者写到。如果你是一个经验丰富的AngularJS开发者,你可能对揭秘指令或者AngularJS在创业公司的使用更感兴趣。
在这一部分,我们将把应用的逻辑层放在一边,而是去学习如何组织正确的AngularJS项目。包括:脚手架、依赖管理、准备测试(包括单元测试和端到端测试)。我们用来开发AngularJS的工具有:Yeoman, Grunt, and Bower。下面我们将重新看一下写代码和用 Karma 测试的过程。

3Karma, Jasmine, Grunt, Bower, Yeoman…这些工具是什么?


如果你使用JavaScript来工作,有很大的可能性你已经知道了他们其中的一些工具,即使你是刚接触Angular。但是为了确保一个共同的基准,我将不会使用任何假设。让我们简单地回顾一下这些技术和他们的用途吧。

- Karma(之前的名字是Testacular),是Google的JavaScript测试器,所以它也是测试Angular的自然选择。另外也允许你在真实的浏览器运行你的测试(包括手机/平板电脑的浏览器),它也支持测试无关的框架。这意味着你可以使用它结合其他框架,比如 Jasmine, Mocha, 或者 QUnit。
- Jasmine也是我们测试框架的一个选择,至少在这里。如果你曾经用它工作过,你会发现它的语法和Rspec非常相近。如果没有也不用担心,我们将在本教程里详细地讲解。
- Grunt是一个测试器,可以帮助我们自动处理一些重复的任务,比如:压缩、编译、测试和建立一个简单的AngularJS应用。
- Bower是一个包管理器,能够帮助你找到并安装你应用所依赖的包,比如CSS框架,JavaScript库,等等。它运行在git上,十分像Rails,避免了需要手动下载和更新的依赖关系。
- Yeoman是一个工具集,包含3个核心组件:Grunt,Bower,和脚手架工具Yo。Yo在generators(也是脚手架模版)的帮助下生产代码样板文件,为你的项目自动配置Grunt和Bower。你可以几乎在任何JavaScript框架(比如:Angular,Backbone,Ember等)中发现generators,但是因为我们现在讲Angular,我们将使用generator-angular项目。

所以,我们从这里开始
很好,我们需要做的第一件事是安装我们需要的工具
1. 如果你没有安装git,node.js和npm,那么要先安装它们。
2. 然后,我们将进入命令行输入下面的命令来安装Yeomen工具。

npm install -g yo grunt-cli bower

噢,不要忘了,我们将使用AngularJS generator。所以你也需要安装它。

npm install -g generator-angular

好的现在我们准备好了。

生成我们的AngularJS应用
上一次,我们从angular-seed项目手动地复制了我们的基本文件。这一次,我们将使用yo(结合generator-angular)来为我们做这些。
now,我们需要做的就是创建我们新项目的文件,浏览并运行

yo angular

我们将展示一些选择项,比如是否包括Bootstrap和Compass,此时,让我们对Compass说no,对Bootstrap说yes。然后,当提示包含哪一个模块的时候(resource, cookies, sanitize and route),我们将只选择

angular-route.js

我们项目的基本文件应该会在一分钟之内创建出来。集成了Karma和一些预配置的。
提示:必须牢记我们要限制这里的模块。
当你正在做自己的一个项目时,使用哪些模块将取决于你自己。
现在,由于我们正在使用Jasmine,让我们把它的适配器加入到我们的项目

npm install karma-jasmine --save-dev

在这个例子中,我们希望测试能够在浏览器里执行。让我们再次添加

npm install karma-chrome-launcher --save-dev

ok,如果我们所做的每一件事都是正确的,我们的项目文件结构应该是这样的:

我们应用代码应该在 app/ 这个目录下。 test/ 这个目录当然是测试文件。在根目录下我们看到那些是项目的配置文件。他们中的每一个都有很多需要学习的,但是现在我们只是坚持了默认配置。那么让我们运行一次我们的项目吧,我们可以用下面的命令执行

grunt serve

瞧,我们的app现在应该跳出在我们面前了。

上一篇译文在这里:http://segmentfault.com/blog/news/1190000000347412

原文链接:http://www.toptal.com/angular-js/your-first-angularjs-app-part-2-scaffolding-building-and-testing

时间: 2024-09-27 18:11:22

你的第一个AngularJS应用--教程二:基架、建立和测试的工具的相关文章

DHTMLX 前端框架 建立你的一个应用程序教程(二)--设置布局

Layout控件的演示 Dhtmlx有很多的组建来组织网页的建设, 这篇主要介绍dhtmlxLayout . 下面图片中 布局将各个组件(1.Menu 2.Toolbar 3.Grid 4.Form 表单)划分到不同的区域. 设置布局: 1.初始化一个布局用dhtmlXLayoutObject() 在index.html添加如下代码: <!DOCTYPE html> <html> <head> <title>Contact Manager</title

C#微信公众号开发系列教程二(新手接入指南)

http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可直接跳过,也欢迎大神吐槽. 目录 C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) 微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流程是这样的,用户发送消息到微信服务器,微

FusionCharts简单教程(一)---建立第一个FusionCharts图形

因为项目需求须要做一个报表,选择FusionCharts作为工具使用.因为曾经没有接触过报表,网上也没有比較具体的fusionCharts教程,所以决定好好研究FusionCharts,同一时候做一个比較简单的教程提供參考.因为能力有限(应届毕业生的菜鸟而已),所以教程(学习笔记而已)不免会有错误,望别喷,望指正.当然肯定避免不了会參考其它资料的. 一.FusionCharts简单介绍和安装使用 1.1.简单介绍 FusionCharts是InfoSoft Global公司的一个产品,而Fusi

C语言快速入门教程(二)

C语言快速入门教程(二) C语言的基本语法 本节学习路线图: 引言: C语言,顾名思义就是一门语言,可以类比一下英语; 你要说出一个英语的句子需要:  单词  +  语法!  将单词按照一定的语法拼凑起来就成了一个英语句子了; C语言同样是这样,只不过单词可以理解为一些固定的知识点,而语法可以理解为算法(可以理解为解决问题的方法) 在这一节中我们就对固定知识点中的语言描述与数据存储进行解析! 1.C语言的基本元素 1.1  标识符 什么是标识符? 答:在C语言中,符号常量,变量,数组,函数等都需

转: angularjs基础教程(~~较通俗)

Angularjs-基础教程(1) 很久没有写过东西了,感觉写东西都不知道从哪里开始了,现在还是先写点技术性的吧,angularjs--我兄弟把它叫成“俺哥啦js” 1.下载 官方网址:https://angularjs.org/ CDN:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js 2.简单介绍使用 1.ng-app   ~~~angularjs的渲染范围 决定了angularjs的作用域

Angular系列----AngularJS入门教程04:迭代器过滤(转载)

我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视着你的应用,并且在发生回归的时候迅速报告. 请重置工作目录: git checkout -f step-3 我们的应用现在有了一个搜索框.注意到页面上的手机列表随着用户在搜索框中的输入而变化. 步骤2和步骤3之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 控制器 我们对控制器不做

Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图

DataVeryLite入门教程(二) Entity篇

DataVeryLite 是基于.net 4.0的数据库持久化ORM框架. 目前支持的数据库有Sqlserver,Mysql,Oracle,Db2,PostgreSql,Sqlite和Access. 最好先阅读DataVeryLite入门教程(一) 配置篇,然后再阅读本篇.如果你觉得麻烦也可以跳过. Entity是ORM中的核心对象之一,一个继承Entity的对象对应于数据库中的一个表. Entity提供丰富的API对表中的单条数据进行操作. 比如根据id或其他条件,加载,删除,插入,更新和部分

Spring Cloud 入门教程(二): 配置管理

使用Config Server,您可以在所有环境中管理应用程序的外部属性.客户端和服务器上的概念映射与Spring Environment和PropertySource抽象相同,因此它们与Spring应用程序非常契合,但可以与任何以任何语言运行的应用程序一起使用.随着应用程序通过从开发人员到测试和生产的部署流程,您可以管理这些环境之间的配置,并确定应用程序具有迁移时需要运行的一切.服务器存储后端的默认实现使用git,因此它轻松支持标签版本的配置环境,以及可以访问用于管理内容的各种工具.很容易添加