介绍
有不少可用的工具能够帮助你开发AngularJS 应用,那些很是复杂的框架不在个人讨论范围之中,这也是我开始这系列教程的缘由。
在第一部分,咱们掌握了angularjs框架的基本结构,开发了第一应用。这篇博文是为那些初学者写到。若是你是一个经验丰富的AngularJS开发者,你可能对揭秘指令或者AngularJS在创业公司的使用更感兴趣。
在这一部分,咱们将把应用的逻辑层放在一边,而是去学习如何组织正确的AngularJS项目。包括:脚手架、依赖管理、准备测试(包括单元测试和端到端测试)。咱们用来开发AngularJS的工具备:Yeoman, Grunt, and Bower。下面咱们将从新看一下写代码和用 Karma 测试的过程。javascript
3Karma, Jasmine, Grunt, Bower, Yeoman…这些工具是什么?java
若是你使用JavaScript来工做,有很大的可能性你已经知道了他们其中的一些工具,即便你是刚接触Angular。可是为了确保一个共同的基准,我将不会使用任何假设。让咱们简单地回顾一下这些技术和他们的用途吧。node
- 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项目。git
因此,咱们从这里开始
很好,咱们须要作的第一件事是安装咱们须要的工具
1. 若是你没有安装git,Node.js和npm,那么要先安装它们。
2. 而后,咱们将进入命令行输入下面的命令来安装Yeomen工具。angularjs
npm install -g yo grunt-cli bower
噢,不要忘了,咱们将使用AngularJS generator。因此你也须要安装它。chrome
npm install -g generator-angular
好的如今咱们准备好了。npm
生成咱们的AngularJS应用
上一次,咱们从angular-seed项目手动地复制了咱们的基本文件。这一次,咱们将使用yo(结合generator-angular)来为咱们作这些。
now,咱们须要作的就是建立咱们新项目的文件,浏览并运行浏览器
yo angular
咱们将展现一些选择项,好比是否包括Bootstrap和Compass,此时,让咱们对Compass说no,对Bootstrap说yes。而后,当提示包含哪个模块的时候(resource, cookies, sanitize and route),咱们将只选择cookie
angular-route.js
咱们项目的基本文件应该会在一分钟以内建立出来。集成了Karma和一些预配置的。
提示:必须牢记咱们要限制这里的模块。
当你正在作本身的一个项目时,使用哪些模块将取决于你本身。
如今,因为咱们正在使用Jasmine,让咱们把它的适配器加入到咱们的项目app
npm install karma-jasmine --save-dev
在这个例子中,咱们但愿测试可以在浏览器里执行。让咱们再次添加
npm install karma-chrome-launcher --save-dev
ok,若是咱们所作的每一件事都是正确的,咱们的项目文件结构应该是这样的:
咱们应用代码应该在 app/ 这个目录下。 test/ 这个目录固然是测试文件。在根目录下咱们看到那些是项目的配置文件。他们中的每个都有不少须要学习的,可是如今咱们只是坚持了默认配置。那么让咱们运行一次咱们的项目吧,咱们能够用下面的命令执行
grunt serve
瞧,咱们的app如今应该跳出在咱们面前了。