使用Yeoman快速构建基于angular的web应用

前言

最近在学习使用安哥拉(angular.js)编写web应用，看了一些网友实践了解到yeoman，这个工具实在太好用了，必须在这里介绍一下。

angular

首先简单介绍一下angular,它是由google开源的一套js框架，可以在前端实现MVC，再加上后台实现的rest服务就能构成一个完整的web应用了。在这里就不重点讲angular的优点了，想了解能够参考一下这里： angularjs最佳实践 。

Yeoman

yeoman能够方便web开发者快速构建出一个标准化结构的web项目流程。它不仅是一个工具，是一个工做流程，这个工做流程包含了3个工具。

1. Yo  它就是一个脚手架的工具，用于构建一个新的项目框架

2. Grunt  项目的构建工具

3. Bower 包管理，再也不须要手动去下载scripts了，呵呵

构建过程

好，那如今来介绍一下如何快速构建一个基于angular的web用于

1) 安装nodejs

yum -y install openssl-devel
cd /tmp
wget http://nodejs.org/dist/node-latest.tar.gz
tar -zxvf node-latest.tar.gz 
cd node-v0.10.17/
./configure 
make && make install

2) 安装generator-angular

使用npm安装generator-angular,会自动把yeoman的3个工具装上。(npm就是nodejs的包管理工具，相似的python的pip,ruby的gem)

npm install -g generator-angular

3) 开始建立项目

先建立目录

mkdir /opt/Myapp && cd $_

建立一个应用叫kisapp，这时候会出现交互，是否使用bootstrap , include哪些angular扩展之类的。

yo angular kisapp

使用包管理，把js下载下来.(默认是不容许root执行的，能够加这样的参数解决 –allow-root)

bower install --allow-root

如今已经把一个基础的环境初始化了，咱们加一个web服务，看一下效果吧

#安装nginx

 yum –y install nginx

#修改配置文件

cat > /etc/nginx/nginx.conf << _editnginx

user  nobody nobody; # 出于安全，无特别要求禁止使用root
worker_processes  8; # 推荐配置为CPU核数
error_log  /data/log/error.log  error;
pid        /var/run/nginx.pid; # 此路径不建议更改 

events {
 use epoll;
 worker_connections  81920;
} 

http {
 include       /etc/nginx/mime.types;
 default_type  text/plain;
 access_log  off;
 sendfile        on;
 server_tokens off; # 关闭版本号显示
 keepalive_timeout  120; 

 server {
         listen      80 backlog=8192; # backlog表明此端口容许同时打开（tcp_syn）的最大数量
         server_name  _; # _表明默认域名
         charset utf-8; 

         location / { # 定义首页目录
                 root /opt/Myapp/app; # 指定根目录
                 index  index.html; # 设定默认打开的文档
         } 

         location /status { # 打印Tengine状态页  localhost/status
                stub_status on; # 开启状态页，依赖 http_stub_status_module 模块
                access_log  off; #访问过程不记日志
         } 

} 

}

_editnginx

#这里有个bug, 默认的css文件居然名字错了

mv /opt/Myapp/app/styles/main.scss  /opt/Myapp/app/styles/main.css

#启动

nginx

4) 浏览器看一下。成功了！

后续

整个angular的开发过程都是能够使用yeoman构建的。譬如如下的命令。以coffescript形式生成angular的各个组件

yo angular:route myroute  --coffee

yo angular:controller user --coffee

yo angular:directive myDirective  --coffee

yo angular:filter myFilter  --coffee

yo angular:view user --coffee

yo angular:service myService --coffee

yo angular:decorator serviceName --coffee