通过Yeoman架构AngularJS应用

传统情况下,我们若要开发一个APP,首先显然需要配置一个服务器,然后需要考虑应用所需要的Javascript/CSS库等组件,手动下载并安装于应用目录下,一旦组件更新我们还需要手动更新,这是非常麻烦的一件事。为了提高我们的开发效率,我们决定使用更先进的方式进行。本文将介绍使用AngularJS开发应用前的环境搭建工作。

安装NodeJS及NPM

笔者先是尝试使用Ubuntu apt-get自动安装Node与NPM,之后发现Node版本过低(Required: {“node”:”>= 0.8.0″})。于是从NodeJS官方下载最新版Node并解压(Windows请无视该步骤直接安装即可),命令行进入解压后的文件夹。

 

$ make #编译,需要花费一段时间
$ sudo make install #安装
$ node --version #安装完毕,查看node版本
v0.10.26
$ npm --version #查看npm版本
1.4.3
$ npm config set registry http://registry.cnpmjs.org #使用国内的仓库(GFW!)

 

Grunt+Bower+Yeoman

 

  • Grunt用于创建、预览、测试项目,它将创建一个本地服务器,并且当你编辑文档时,无需手动刷新页面,它将自动刷新;
  • Bower用于软件包依赖管理,让您不再需要手动下载和管理脚本;
  • Yeoman通过配置GruntBower来架构AngularJS应用;

 

通过这三个工具管理AngularJS项目将变得非常简单,不仅让你轻松架构应用,同时也节约了应用依赖组件的下载与更新时间。Yeoman、Grunt和Bower使用起来非常简单,建议你使用该方式而不是传统的方式来创建应用。一句话安装:

 

$ sudo npm install -g yo

 

AngularJS组件

完成上述操作后,我们需要为Yeoman安装Angular生成工具:

 

$ sudo npm install -g generator-angular

OK,现在我们可以开始通过Yeoman架构我们的AngularJS应用、Bower管理应用的依赖关系、Grunt编译/执行程序。

架构应用

在我们的工作目录中创建一个项目文件夹如”ang-news”,命令行下进入刚目录,执行下列命令:

 

yo angular

该命令用来创建Angular应用,执行过后,Yeoman将询问若干问题:

 

Would you like to use Sass (with Compass)? (Y/n)

选择”n”,Sass是一款非常强大的CSS框架,当然我们建议你使用它,然而本文并非教你使用Sass/CSS,而且安装起来也有点麻烦(需要依赖Ruby及Bundler来安装)。

Would you like to include Bootstrap? (Y/n)

选择”y”,本文我们将通过著名的前端框架Twitter Bootstrap来创建基本的HTML/CSS,Yeoman自动将最新版的Bootstrap包含进项目中,并且创建一个Bootstrap风格的示例页面。

Which modules would you like to include? (Press <space> to select)

“回车”,这些是可选的AngularJS模块,有时我们可能需要用到它们,通常我们建议安装它们(使用方向键及空格键来选择或取消),你可以在官方的”AngularJS: Miscellaneous: Downloading“一文中了解更多它们相关知识。

注:可能会遇到下述错误

Error: EACCES, mkdir ‘/home/xxx/tmp/npm-xxx

临时文件夹权限问题,修改tmp文件夹权限为”777″即可。

$ sudo chmod -R 777 /home/xxx/tmp

Yeoman将会花费一点时间来安装相关组件,安装完成后,目录结构类似下述:

.
├── app
│   ├── 404.html
│   ├── bower_components
│   ├── favicon.ico
│   ├── fonts
│   ├── images
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   ├── styles
│   └── views
├── bower.json
├── Gruntfile.js
├── karma.conf.js
├── karma-e2e.conf.js
├── node_modules
│   ├── ...
├── package.json
└── test
    ├── runner.html
    └── spec

熟悉应用结构

“app”文件夹将是我们大部分时间工作的目录,其中应用的HTML/CSS/JAVASCRIPT都将在该文件夹下完成。我们来看下app目录下其它文件以及相互之间的关系。

app/index.html是AngularJS应用程序的入口文件,加载Javascript/CSS文件(app/scripts及app/styles中),以及配置应用绑定的HTML节点。

打开index.html文件,看一下它的结构:

 

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <!-- endbuild -->

 

注意到应用绑定到body元素上<body ng-app=”angNewsApp”>,而我们所有的试图都存在于容器<div class=”container” ng-view=””></div>中。这些都是Yeoman创建后自动生成的。

</body>标签结束前,引入了javascript文件,它们分为两块:<!– bower:js –>之间的为Bower管理的,<!– build –>之间的是我们之后编写的所有js文件都将引入的位置。

运行程序

命令行下进入ang-news目录,输入以下命令:

 

grunt serve

该命令将创建一个端口号为9000的本地服务器,当我们从浏览器中输入”http://localhost:9000″,发现载入了app/views/main.html视图。

我们看下究竟发生了什么:

 

  1. 我们向Grunt Serve发送了一个index.html请求;
  2. Grunt返回index.html,并告诉浏览器下载javascript及css文件,且index.html为应用绑定到ng-app及ng-view;
  3. 所有文件下载完成后,创建一个”/”的路由,指向了views/main.html视图;
  4. 应用查看uri,发现属于”/”路由,于是包含进views/main.html。