介绍
有非常多可用的工具能够帮助你开发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

转载于:https://www.cnblogs.com/zfyouxi/p/4320708.html

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

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

    Layout控件的演示 Dhtmlx有很多的组建来组织网页的建设, 这篇主要介绍dhtmlxLayout . 下面图片中 布局将各个组件(1.Menu 2.Toolbar 3.Grid 4.Form ...

  2. Homebrew进阶使用教程(二)-用一个命令行天气客户端构建自己的仓库

    [homebrew 系列文章] HomeBrew常规使用教程 Homebrew进阶使用教程(一) Homebrew进阶使用教程(二)-用一个命令行天气客户端构建自己的仓库 Homebrew进阶使用教程 ...

  3. python爬虫入门教程(二):开始一个简单的爬虫

    2019/10/28更新 使用Python3,而不再是Python2 转载请注明出处:https://blog.csdn.net/aaronjny/article/details/77945329 爬 ...

  4. angularjs学习笔记一——了解angularjs、开发环境搭建、第一个angularjs程序

    一.什么是angularJS angularJS是基于javascript的框架,所谓框架,自然就是封装了很多功能,举个例子,使用原生javascript,如果你要写一个网页幻灯片,你可能需要几十行代 ...

  5. 有一个5 * 5的二维数组,保留主对角线上的元素,并使其他元素均为0,要求用函数和子函数完成

    <程序设计基础实训指导教程-c语言> ISBN 978-7-03-032846-5 p143 7.1.2 上级实训内容 [实现内容8]有一个5 * 5的二维数组,保留主对角线上的元素,并使 ...

  6. AngularJs 基础教程​ —— Select(选择框)

    为什么80%的码农都做不了架构师?>>>    本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:AngularJs 基础教程 -- Select(选择框) Angula ...

  7. 黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级) 本章介绍的是企业库加密应用程序模块 ...

  8. AngularJs 基础教程 —— 依赖注入

    为什么80%的码农都做不了架构师?>>>    本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:AngularJs 基础教程 -- 依赖注入 AngularJS 依赖注 ...

  9. 按键精灵脚本 php,HTML_按键精灵 脚本-学习VBS的一个不错的教程,今天我就从总体上对VBS进行介 - phpStudy...

    按键精灵 脚本-学习VBS的一个不错的教程 今天我就从总体上对VBS进行介绍,希望能给大家一个直观的印象.另外,讲解与按键官网的按键精灵教程(李悦制作)相结合,帮大家看懂这个东东. 一.概述 要让计算 ...

最新文章

  1. 其他算法-高斯混合模型
  2. 类别继承-程序代码再用
  3. Java锁 优先级_详解Java的线程的优先级以及死锁
  4. 一个商城的购车相关代码
  5. sql 中优化视图或sql语句的执行效率的方法
  6. ssis导入xml_使用XML文件配置SSIS包
  7. wifi扫描流程图_扫描方法与流程
  8. VS2010 C# 调用Web Service
  9. JSP与Servlet的区别与联系,JSP与JavaScript的区别
  10. tftp服务器离线安装
  11. 游戏公司可能碰到哪些知识产权问题?
  12. 解决tar 时间戳XXX是未来的XXX秒之后问题
  13. C语言中的puts()、putchar()、printf()
  14. hexo个人博客搭建(二)butterfly主题配置
  15. unity shader学习---光照模型(二)
  16. 电动车,摩托车灯照明 汽车灯照明 手电筒 驱动芯片
  17. Java如何实现定时任务?
  18. LPA* 路径搜索算法介绍及完整代码
  19. PHP在linux下读取word
  20. STM32H743基于Lwip协议栈通过TFTP传输文件

热门文章

  1. IIS7.5 中启用rest服务,Delete、Put
  2. css3动画模块transform transition animation属性解释
  3. Ubuntu下浏览Json文件
  4. Google开源库Image Captioning部署记录
  5. 【Python-ML】神经网络激励函数-双曲正切(hyperbolic tangent,tanh)函数
  6. Android项目中Bluetooth类如何写
  7. python爬虫的应用-python网络爬虫应用实战
  8. JVM锁和分布式锁是什么关系
  9. 计算机组成原理——概述1
  10. ArrayDeque中的取余