如何快速建立一个angular工程.md

Yeman

Yeoman是Google的团队和外部贡献者团队合作开发的，他的目标是通过Grunt（一个用于开发任务自动化的命令行工具）和Bower（一个HTML、CSS、Javascript和图片等前端资源的包管理器）的包装为开发者创建一个易用的工作流。它是一个构建漂亮Web应用的工具和框架。Yeoman用于把各种不同的工具整合起来，形成一套完整的前端开发的工作流程。

Yeoman主要有三部分组成：yo（脚手架工具）、grunt（构建工具）、bower（包管理器）。

• Yo 是一个 Web 应用的架构（scaffolding）工具。它提供了非常多的模板，用来生成不同类型的 Web 应用。这些模板称为生成器（generator）。社区也贡献了非常多的生成器，适应于各种不同的场景。通过 Yo 生成的应用使用 Grunt 来进行构建，使用 Bower 进行依赖管理。
• grunt基于Node.js创建，Grunt是一个基于任务的命令行工具，它能够同构减少减少预先需要准备的资源来加速工作流。它将工作包裹进入任务之中，任务会随着你的工作进程自动编译。基本来说，你可以在任何你觉得可以使用grunt的项目以及那些需要你手动配置并运行的项目中使用Grunt。
• bower作为一个js依赖管理的工具，提供一种理想包管理方式，借助了npm的一些思想，为我们提供一个舒服的开发环境。

但是grunt存在一些缺陷，它正在被gulp取代。和grunt类似，它是一个基于流的构建工具，把源文件倒入一个处理容器1（任务1），再倒入处理容器2（任务2），最后倒入最终的容器（目标文件）。

所以现在Yeman又可以分为：yo、gulp、bower。

生成angular项目

安装yo, gulp, bower

npm install -g gulp bower yo

安装angular-gulp生成器

npm install -g generator-gulp-angular

创建project

mkdir my-new-project && cd $_

生成angular程序骨架

yo gulp-angular

Directory structure

项目结构取自于angular项目结构最佳实践，如下：

├──  bower_components/
├──  e2e/
├──  gulp/
├──  nodes_modules/
│
├──  src/
│   ├──  app/
│   │   ├──  components/
│   │   │   └──  githubContributor/
│   │   │   │   └──  githubContributor.service.js
│   │   │   │
│   │   │   └──  malarkey/
│   │   │   │   ├──  malarkey.directive.js
│   │   │   │   └──  malarkey.(scss|styl|less|css)
│   │   │   │
│   │   │   └──  navbar/
│   │   │   │   ├──  navbar.directive.(js|ts|coffee)
│   │   │   │   ├──  navbar.html
│   │   │   │   └──  navbar.(scss|styl|less|css)
│   │   │   │
│   │   │   └──  webDevTec/
│   │   │       └──  webDevTec.service.js
│   │   │
│   │   ├──  main/
│   │   │   ├──  main.controller.(js|ts|coffee)
│   │   │   ├──  main.controller.spec.js
│   │   │   └──  main.html
│   │   │
│   │   └──  index.config.(js|ts|coffee)
│   │   └──  index.constants.(js|ts|coffee)
│   │   └──  index.module.(js|ts|coffee)
│   │   └──  index.route.(js|ts|coffee)
│   │   └──  index.run.(js|ts|coffee)
│   │   └──  index.(scss|styl|less|css)
|   |
│   ├──  assets/
│   │   └──  images/
│   ├──  favico.ico
│   └──  index.html
│
├──  .bowerrc
├──  .editorconfig
├──  .gitignore
├──  .eslintrc
├──  bower.json
├──  gulpfile.js
├──  karma.conf.js
├──  package.json
└──  protractor.conf.js