使用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