home

AngularJS, grunt, karma, bower, yeoman 설치하기

Apr 06, 2014

Test 환경

Mac OS X Mavericks 10.9.2

Yeoman 으로 작업 환경 갖추기

Vagrant 환경 구성하기

  • Vagrant file 편집 다음과 같이 파일을 편집한다.
$ cd /project/yo_prj

$ vi Vagrantfile
#
# Vagrantfile
# vi: set ft=ruby :

Vagrant.configure("1") do |config|
  config.vm.box = "precise32"
  config.vm.box_url = "http://files.vagrantup.com/precise32.box"

  config.vm.define :yo_web do |yo_web_config|
    yo_web_config.vm.network :hostonly, "192.168.100.10"

    yo_web_config.vm.share_folder "www", "/www", "/project/yo_prj/www"
    yo_web_config.vm.provision :shell, :path => "node-bootstrap.sh"
  end
end

node-bootstrap.sh 편집하기

(설치 시간이 많이 소요된다.)

$ vi node-bootstrap.sh

#!/usr/bin/env bash

# Get root up in here
sudo su

apt-get -y update
apt-get install -y python-software-properties
apt-get install -y subversion curl
apt-get install -y git

add-apt-repository -y ppa:chris-lea/node.js
apt-get -y update
apt-get install -y nodejs
apt-get install -y libfontconfig1

sudo npm install -g yo
sudo npm install -g grunt-cli bower
sudo npm install -g generator-webapp
sudo npm install -g generator-angular
sudo npm install -g generator-karma

sudo gem install compass

echo ""
echo ""
echo ""
echo "=========================================="
echo "A complete workflow : => "
echo "$ vagrant ssh"
echo "$ cd /www"
echo "$ mkdir my-yo-project"
echo "$ cd my-yo-project"
echo "$ yo webapp"
echo ""
echo "$ vi Gruntfile.js"
echo "port: 80"
echo "hostname: '192.168.100.10'"
echo ""
echo "$ bower install underscore "
echo "$ sudo grunt serve ( for preview )"
echo "$ grunt ( build )"
echo ""
echo "=========================================="
echo "with the AngularJS generator : => "
echo "$ yo angular"
echo ""
echo "$ vi Gruntfile.js"
echo "port: 80"
echo "hostname: '192.168.100.10'"
echo ""
echo "$ bower install angular-ui"
echo "$ grunt test ( for test )"
echo "$ sudo grunt serve"
echo "$ grunt"
echo "=========================================="
echo ""
echo ""
echo "=> and check the page : http://192.168.100.10"

yo 명령어

// 애플리케이션 생성
$ yo angular 
$ yo angular:app

// 컨트롤러 생성
$ yo angular:controller myController

// 디렉티브 생성
$ yo angular:directive myDirective

// 필터 생성
$ yo angular:filter myFilter

// 서비스 생성
$ yo angular:service myService

Reference :