前台开发是个非常神奇，充满冒险，且乐趣十足的领域。我们很高兴的看到，团队对前台的认识从 做做网页，PP图，引入几个成型框架 到 前端工程师。 本节中，让我们共同来深入的认识前台开发系统软件与工具，以及他们之间的关系。并最终使用它们来搭建前台的ANGULARJS开发环境。 # git-shell git相信大家并不陌生，它是我们一直在使用的版本控制工具。在前台中，我们使用GIT，一方面是进行团队的协作开发。另一方面，我们安装完GIT后，可以得到一个git-shell的东西。我们可以在git-shell中运行一些类UNIX命令，成功的实现了命令的跨平台。 # nodejs node.js是个生态系统，如果我们想详细理解的话，可以认为他是个跑在虚拟机的操作系统。这个操作系统与unix有点类似，我们除了那个命令行，看不到任何的图型界面。 既然node.js是操作系统，那么我们的确是可以这样和windows来对比的： 1.windows  2.node.js  和windows安装后，微软自动为我们安装ie浏览器一样。node.js安装后，它为我们自动的安装了一个叫做npm的软件。所以，安装完node.js后，我们得到的是这样一个系统。  npm和我们windows中的360软件管家有些类似，在windows中，我们可以使用360软件管家进行软件的安装、卸载、更新；在NODE.JS中，我们同样可以使用npm对运行在node.js中的软件进行安装、卸载、更新。 在我们的前台开发中，所需要的bower grunt-cli yoman 三个主要的需要手动安装的软件，就是通过npm这个软件管家来安装的。  > nodejs官网：[https://nodejs.org/zh-cn/](https://nodejs.org/zh-cn/) ## bower bower是node.js系统中的包（项目）管理工具，和我们在windows使用GITHUB进行项目管理一样。bower可以自动的为我们下载我们所需要的包。比如jquery, bootstrap等。 安装方法： `$ npm install -g bower` > tips，如果你是非windows系统，你可能需要这样使用：`$ sudo npm install -g bower`, sudo可以使用npm拥有更高的权限。 `$`表示以上语句，需要在命令行输入。比如上述语句，我们需要打开命令行（git-shell）, 并输入`npm install -g bower`. > bower官网：[https://bower.io/](https://bower.io/) ## yoman yoman译为『脚手架』。『脚手架』广泛的应用于建筑领域。   和它的表面意思一致，yoman是我们前台开发的脚手架。它为我们的开发做了有效的支撑。它可以为我们自动的生成目录结构，HTML,CSS,JS示例代码。指明我们在开发过程所需依赖的node.js软件及第三方包。是yoman，让我们与世界大牛的距离又近了一层. 安装方法：`$ npm install -g yo` > yoman 官网： [http://yeoman.io/](http://yeoman.io/) 正如我们看到的一样，yoman为我们提供了Angular, Backbone, React, Polymer等框架的开发支持。支持的总数已经超过了3900个，而且如果你愿意，也可以打造自己的yoman工程。 > yoman： generator-angular > [https://github.com/yeoman/generator-angular](https://github.com/yeoman/generator-angular) ## grunt-cli grunt是个强大的自动化工作，它有很多个插件支持，可以自动的我们开启一个http服务；监测代码文件是否发生变动；在代码文件发生变动时，自动我们刷新浏览器；自动的我们提示JS语法错误；自动的为我们指出不合规范的JS语法；当我们添加新的包时，自动的为我们添加引用；当我们发布项目时，自动的进行JS文件的合并与压缩。。。grunt能用的，当然远远不止这些。如果别人问我们为什么使用grunt，我们可以回答：自动；如果别人问我们什么是GRUNT，我们还可以回答：自动。grunt已经成为了自动的代名词。 我们接解grunt，就避免不了接触grunt-cli,这两者有什么关系呢？ 如果你明白mysql与navicat之间的关系，那么恭喜你，因为grunt与grunt-cli的关系和前者一致。mysql提供服务，navicat调用mysql的服务，实现建表建库数据的CURD等操作；grunt同样提供服务，grunt-cli调用grunt服务，实现了自动化操作。没错，仅此而已。 安装: `$ npm install -g grunt-cli` grunt中文网：[http://www.gruntjs.net/](http://www.gruntjs.net/)， 在此，我们要感谢[Bootstrap中文网](http://www.bootcss.com/)为维护gruntjs.net做出的努力。 使用NPM安装完上述3款软件后，我们大体得到了这样的一个node.js操作系统  ## 使用yoman构建angularjs开发架构 yoman在官网中，详细的说明了如何使用yoman来构建其它的应用。我们在构建其它应用前，打开官网来进行应用的搜索。 >官网： [http://yeoman.io/generators/](http://yeoman.io/generators/) 我们输入angular，得到如下结果：  我们看到angular前面有个 胡须 的标志，凡是有这种标志的，表示yoman官方出品。没错，官方出品，必属精品。我们就选它。 到这，我们以使用yoman创建angular应用来看看yoman是怎么工作的。  在使用yoman创建angular应用前，我们首先需要使用npm来安装配合yoman工作的generator-angular。有了generator-angular后，我们便可以使用`yo angular`命令来初始化angular项目了。 实际上，我们还可以使用yoman来安装generator-angular。在此，我们保持与官方文档一致，使用第一种，即使用npm来安装. > 官方文档： [https://github.com/yeoman/generator-angular#readme](https://github.com/yeoman/generator-angular#readme) 安装： `npm install -g grunt-cli bower yo generator-karma generator-angular` 执行上述命令后，实际上相当于分别执行了： npm install -g grunt-cli npm install -g bower npm install -g yo npm install -g generator-karma npm install -g generator-angular 由于我们在前面已经执行过前面的三行命令，所以在这，我们也可以这样执行： `npm install -g generator-karma generator-angular` `generator-karma`是angular的单元测试工具。 ## 小试牛刀 我们在打开我们在项目javaee所在的目录,并新建WebApp目录。 执行:`$ yo angular` ``` ? Would you like to use Gulp (experimental) instead of Grunt? No ? Would you like to use Sass (with Compass)? No ? Would you like to include Bootstrap? Yes // 除了最后一个用于手机的不选择外，其它的全部选上吧。 ? Which modules would you like to include? ◉ angular-animate.js ◉ angular-aria.js ◉ angular-cookies.js ◉ angular-resource.js ◉ angular-messages.js ◉ angular-route.js ◉ angular-sanitize.js ❯◯ angular-touch.js ... ``` 然后，如果你是第一次安装，视网络的不同，你可能会经过漫长的等待。不过，只要安装成功一次，下次就好了。 如果你等上了半小时，还是停留在这个页面： ``` Receiving... ``` 那么我想，你是时候启用团队为你准备好的VPN了。 > tips:如果提示我们正在下载什么软件到什么位置的时候，我们是可以使用ctrl+c来中断程序，然后手动去下载安装包，并放入到指定位置后再重新执行yo angular命令的。 如果你恰恰需要这个文件，请找到我们教程对应的github地址，并找到resoucre文件夹中的phantomjs-2.1.1-macosx.zip，复制到上面提示的位置，然后中断程序后重新执行即可。 最后，如果你成功的出现了如下界面：  就不要傻等着了，因为已经显示：完成，没有出错。 此时按回车键继续，等待任务执行完毕。 此时，yoman已经为我们创建好了angularjs开发所需要的一切。 下一节，我们来共同学习。如果在yoman的基础上进行开发。 <hr /> 问题汇总： 1. 使用yo angular后，自动生成的文件夹并没有安装到当前文件夹。 原因：yoman在生成目录时，会自当前文件夹往上今次查找Gruntfile.js，如果找到了，就会把拥有Gruntfile.js的文件夹做为项目文件夹。 解决办法：1.如果在此文件夹中的父级文件夹中，已经有了yoman项目，那么是无法再其子文件夹中再建立yoman项目的。所以，一定要不在D,E盘的根目录下建立yoman项目，否则，你的D盘下就只能有一个yoman项目了。2.如果实在有需求，删除父文件夹中的Gruntfile.js吧。 > 官方文档：[https://github.com/yeoman/yeoman/issues/635](https://github.com/yeoman/yeoman/issues/635)