Angular 基础环境构建学习

Angular 基础环境构建学习

 

 

Angularjs 个人认为这是一款很好的框架！它将我们从AJAX应用的开发中解救了出来！嗯。。。。废话就说道这里下面我们开始把！　　

·        确定我们的目标

我们的目标是如何快速构建一个angular 项目

·        我们需要准备什么

好的确定了目标我们需要准备些什么呢？扳手啊！锤子啊！钉子啊！。。。。乱七八糟的一大堆！

确实在现实生活中，如果我们要做一个应用需要至少列个清单准备这样或者那样的东西，这真是令人头疼的一件事情，对于这么懒的我来说，你还是杀了我把！

所以我决定寻找一款项目构建工具，在GOOGLE一段时间后！呵呵，YEOMAN 出现在了我的视野当中，这完全就是为我们前端开发者量身打造的啊！

了解 配置 YEOMAN

Yeoman是Google的团队和外部贡献者团队合作开发的，他的目标是通过Grunt（一个用于开发任务自动化的命令行工具）和Bower（一个HTML、CSS、Javascript和图片等前端资源的  包管理器）的包装为开发者创建一个易用的  工作流。

Yeoman的目的不仅是要为新项目建立工作流，同时还是为了解决前端开发所面临的诸多严重问题，例如零散的依赖关系。 

Yeoman主要有三部分组成：yo（脚手架工具）、grunt（构建工具）、bower（包管理器）。这三个工具是分别独立开发的，但是需要配合使用，来实现我们高效的工作流模式。 

下面这幅图很形象的表明了他们三者之间的协作关系。

YOMAN的特性

 

闪电般的初始化：项目开始阶段，可以基于现有的模板框架（例如：HTML5Bolierplate、TwitterBootstrap）进行项目初始化的快速构建。

了不起的构建流程：不仅仅包括JS、CSS代码的压缩、合并，还可以对图片和HTML文件进行优化，同时对CoffeScript和Compass的文件进行编译。

自动编译CoffeScript和Compass：通过LiveReload进程可以对源文件发生的改动自动编译，完成后刷新浏览器。

自动Lint代码：对于JS代码会自动进行JSLint测试，确保代码符合最佳编程实践。

内置的预览服务器：不再需要自己配置服务器了，使用内置的就可以快速预览。

惊人的图片优化：通过使用OptiPNG和JPEGTran来优化图片，减少下载损耗。

杀手级包管理：通过bower searchjQuery，可以快速安装和更新相关的文件，不再需要打开浏览器自己搜索了。

PhantomJS单元测试：可以非常方便的使用PhantomJS进行单元测试，一切在项目初始的时候都准备好了

  

下面我简单说下应该怎么安装YEOMAN 在WINDOWS下面

 

打开 cmd.exe

参考https://gist.github.com/jaromero/9964937这里

1.    由于我们的YEOMAN是基于 NODE.JS的所以 我们第一步当然是安装node.js 啦  http://www.nodejs.org/ 大家可以去那下载并安装好

安装好以后你可以利用CMD 命令检测一下是否安装了nodejs 

是否安装了npm

2.    安装好nodejs 以后你需要安装ruby  http://rubyonrails.org/ 你们可以去这里下载 建议装1.9的版本

安装好ruby 以后 依然按照上面的方法进行一个检测

3.    安装好 以后我们进行第三步 通过NPM 安装 YEOMAN

npm install -g yo grunt-cli bower 通过这个命令来安装

敲击回车以后你会看到一长串get 请求 直到结束

如何检验呢 依然很简单通过CMD命令

如果你显示的是 不是内部或者外部命令的话

请配置环境变量 右键计算机属性 选择高级系统设置

单击环境变量

选择path 然后点击编辑

在变量值的后面添加上yo 的路径

然后再次利用CMD进行检测

4.    安装好yeoman 后我们就可以开始构建angularjs 开发环境了

我们进入到这个TTT的文件夹

然后输入命令yo

你大概会看到这个画面

然后用键盘上的上下键进行移动找到这个

回车后输入 angular

我们看到这里有很多 generator 那么我们这里选择一个最基本的generator

    

选择回车后依然可以看见一大堆 get 请求

等待这些东西刷完 然后我们运行它

按照提示一步一步的操作你想要的generator

回车后

等待这些东西刷完 最后可以看到你的文件夹多出了这些东西

我们打开 Gruntfile.js文件寻找 启动server的命令

然后我们在CMD中运行

最后我们成功启动并利用Yeoman构建了一个 angular.js 的项目 在工程目录里面你可以很清晰的看到

 写这么详细希望能帮到大家