(3).시작하기

본격적으로 angularjs를 만들어보자

목표

1. yeoman으로 템플릿을 만든다.
2. grunt로 실행하면서 소스 추가 수정해본다.
3. grunt로 빌드해서 서버에 올려본다.
4. angular 테스트하는 방법을 알아본다.

1.yeoman으로 템플릿을 만든다.

준비물에서 필요한 패키지들을 다설치하고 난뒤 yo template을 찾아서 설치한다.
yeoman에서 angular를 찾아서 설치한다.
angular yeoman generator에서 시키는 대로 설치를 하자.

아래는 generator-angular에서 나온 시작하는 방법이다.

$ npm install -g grunt-cli bower yo generator-karma generator-angular
$ mkdir my-new-project && cd $_
$ yo angular [app-name]

설치하면서 여러가지 물어보는데 필요한것들은 추가하면 된다.

$ yo angular my-new-project

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Sass (with Compass)? Yes
? Would you like to include Bootstrap? Yes
? Would you like to use the Sass version of Bootstrap? Yes
? Which modules would you like to include?

설치가 완료 되면 grunt로 실행해본다.

$ grunt serve
.....
Running "connect:livereload" (connect) task
Started connect web server on http://localhost:9000

Running "watch" task
Waiting...

2. grunt로 실행하면서 소스 추가 수정해본다.

$ grunt serve를 켜놓은 상태에서 소스를 변경시켜보자 자동으로 새로고침 되면서 화면이 바뀌는것을 볼수 있을것이다.
앞으로 $ grunt serve를 켜놓은 상태에서 진행하면 빠른 개발이 가능하다.

3. grunt로 빌드해서 서버에 올려본다.

$ grunt serve을 끄고 $ grunt build를 실행해보자

$ grunt build

dist/폴더 아래에 빌드된 파일들이 있을것이다.
서버에 ftp나 jenkins등을 통해서 올리면 된다.

demo에서 확인할수 있다.

4. angular 테스트하는 방법을 알아본다.

test/spec/controllers/main.js의 파일을 확인해보자

'use strict';

describe('Controller: MainCtrl', function () {

  // load the controller's module
  beforeEach(module('myNewProjectApp'));

  var MainCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    MainCtrl = $controller('MainCtrl', {
      $scope: scope
      // place here mocked dependencies
    });
  }));

  it('should attach a list of awesomeThings to the scope', function () {
    expect(MainCtrl.awesomeThings.length).toBe(3);
  });
});

it의 함수에 expect를 수정하면서 테스트를 시도해보자.

다음에는 angular의 여러 테스트 프레임워크에 대해서 알아봐야겟다.