前言
最近在学习使用安哥拉(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