安装yeoman
1.获取yeoman安装提示:
curl -L get.yeoman.io | bash
This is no longer the preferred method to install yeoman.
To install yeoman, please run the following:
`npm install -g yo grunt-cli bower`
You can find more at http://yeoman.io
2.安装yeoman:
sudo npm install -g yo grunt-cli bower
//方式1
or
sudo npm install -g yo
//方式2
3.检查是否安装成功:
yo --version && bower --version && grunt --version
执行以上命令,将会输出四个版本信息,分别为Yeoman,Bower,Grunt,Grunt CLI(Grunt的命令行界面)版本信息。
1.5.0
1.6.5
grunt-cli v0.1.13
grunt v0.4.5
4.安装生成器:
yo
? What would you like to do? (Use arrow keys)
Install a generator
Find some help
Get me out of here!
如果已安装提示:
? 'Allo user! What would you like to do? (Use arrow keys)
Run a generator
❯ Webapp
──────────────
Update your generators
Install a generator
Find some help
Get me out of here!
──────────────
5.用键盘的上下键来操作菜单,当选项’Install a generator’被高亮的时候按下回车键。 接下来我们需要寻找一个合适的生成器。搜索’angular’的话,你会得到很多搜索结果。这些生成器都是由许多Yeoman开源社区贡献的。在这个例子里,我们使用的是’generator-angular’。当选中了’generator-angular’后,按下回车执行安装,它所依赖的Node包就会开始被下载了。
? 'Allo user! What would you like to do? Install a generator
? Search npm for generators: angular
? Here's what I found. Official generator → ෴
Install one? (Use arrow keys)
❯ angular ෴ Yeoman generator for AngularJS
a3 ACUBED Main Generator : JohnPapa AngularJS Style Guide + Yeoman generator for creating MEAN stack applications, using MongoDB, Express, AngularJS, and Node with generator-angular-fullstack v2.0.13
abk-angular yeoman generator for new angular modules
adf-widget Yeoman generator for angular-dashboard-framework widgets
admin Yeoman generator to add CRUD functionality to an angular site
aet-angular Generator for aet angular applications
aimerm Yeoman generator for creating MEAN stack applications, using MongoDB, Express, AngularJS, and Node and modified generator-angular-fullstack
(Move up and down to reveal more choices)
当然如果你知道要安装的生成器的名字,你可以直接用npm来安装:
sudo npm install -g generator-angular
到此,angularjs的生成器已安装完毕。
使用生成器搭建应用
1.你可以在Yeoman的菜单中操作已经安装好的生成器:yo
。当然你也可以直接创建一个新的项目目录,运行yo angular
, 生成器会在这个目录下生成出你的项目文件的。
2.选择公共开发类库和需要的angular模块
Out of the box I include Bootstrap and some AngularJS recommended modules.
? 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
按下回车键,Yeoman将会自动构建你的应用、拉取需要的依赖并在你的工作流中创建一些有帮助的Grunt任务(Grunt Tasks)。
? Which modules would you like to include? angular-animate.js, angular-cookies.js, angular-resource.js, angular-route.js, angular-sanitize.js, angular-touch.j create app/styles/main.css
create app/index.html
create bower.json
create .bowerrc
create package.json
create Gruntfile.js
create README.md
invoke angular:common:/usr/local/lib/node_modules/generator-angular/app/index.js
create .editorconfig
create .gitattributes
create .jscsrc
create .jshintrc
create .yo-rc.json
create .gitignore
create test/.jshintrc
create app/404.html
create app/favicon.ico
create app/robots.txt
create app/views/main.html
create app/images/yeoman.png
invoke angular:main:/usr/local/lib/node_modules/generator-angular/app/index.js
create app/scripts/app.js
invoke angular:controller:/usr/local/lib/node_modules/generator-angular/app/index.js
create app/scripts/controllers/main.js
create test/spec/controllers/main.js
invoke karma:app
I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself.
invoke angular:route
invoke angular:controller:/usr/local/lib/node_modules/generator-angular/route/index.js
create app/scripts/controllers/about.js
create test/spec/controllers/about.js
invoke angular:view:/usr/local/lib/node_modules/generator-angular/route/index.js
create app/views/about.html
create test/karma.conf.js
......