用Yeoman创建一个angularjs项目

好久没有用AngularJs了,由于最近要做分享,所以正好整理一下创建AngularJs项目的过程;

AngularJS是一个用于开发动态Web应用的JavaScript框架。AngularJS能够操作HTML使之动态地发生改变,而不是一个单纯的静态文档,它提供了像数据绑定和依赖注入这样的高级特定来简化应用的开发。

有人又会问Yeoman是什么?Yeoman是一个web应用开发部署的工具,但同时它也规范了现代web应用开发流程。它是一组工具(Yo,Grunt,Bower)的组合,也是一套让web开发过程更加规范轻松的最佳实践。其实Yeoman是由yo(脚手架),grunt(build工具)和bower(package管理):

(1)yo新应用的脚手架,编写你自己的grunt配置文件,并且获取你项目build过程当中可能使用到的grunttasks。

(2)Grunt主要用来build,预览和测试你的项目,已经内置了很多由Yeoman团队和grunt-contrib提供的task。

(3)Bower主要用于依赖管理,开发人员不需要手动去管理和下载相应的包,以及处理他们之间的依赖关系。

下面正式开始我们的项目

环境要求:

在安装Yeoman之前要先安装NodeJs和npm;

安装Yeoman:

安装Yeoman其实是安装yo,grunt和bower,在命令行输入

$ npm install -g yo grunt-cli bower

命令执行完毕在命令行输入

$ yo --version && bower --version && grunt --version
命令会输出工具包的版本,这样Yeoman就安装完毕了。

yo

yo是用来生成项目的脚手架。它会迅速帮助我们创建基本的目录结构,配置文件等让你迅速有一个可用的项目基础。当然除了最基础的目录项目结构之外,还有一些非常强大的定制化的生成器,来为你搭建基于特定框架的项目结构。接下来我们会使用AngularJS的生成器来为我们生成AngularJS的项目结构。

使用AngularJs生成器之前,需要先安装生成器,在命令行运行:

$ npm install -g generator-angular

然后使用它来生成AngularJs项目的基本结构,下面创建一个AngularExe项目目录,进到项目下执行如下命令:

yo  angular

命令执行后生成器会以问问题的方式帮你设置项目中可能会使用的一些其他框架或者库,如sass,bootstrap等。回答完问题后AngularJs项目就已经生成完毕了

在浏览器中查看应用

项目创建完毕可以执行gruntserve运行应用

grunt serve

运行命令后本地会启动一个基于Node的http服务。通过浏览器访问http://localhost:9000就可以看到你的应用了。

相关推荐