Yeoman(요맨)을 이용한 AngularJS 개발환경 만들기

요즘은 이런 사용하지 않을 것 같은데....

책(실전 프로젝트로 배우는 AngualrJS) 에서 나온대로 한번 실습을 해보기로 함.

AngularJS 는 책도 드문것 같다.

 

node 설치는 본 문서에서 생략했다.  구글링해서 알아서 설치할 것.ㅠㅠ

 

아래 중복되는 말이 있지만...설치하기 전에 git 을 설치해야 할 것 같다.

맨처음 git 을 설치하는게 좋을 것 같다. bower 명령어에서 git을 찾았던 것 같다.

설치 파일은 아래 경로에 있고, 64bit 버전 2.36.1 최신것을 설치했다.

https://git-scm.com/download/win

 

0. 먼저 프로젝트 디렉토리..여기서는 todo 를 만들고, 아래 명령들을 진행하자.

프로젝트 아래 모듈들이 들어 있어야 하는것 같다..(추측임)

 

1. 요맨(Yeoman)

아래 3가지를 합쳐서 요맨이라고 함

- yo : 애플리케이션 초기 환경과 폴더 구조및 필요한 기능 요소 파일을 자동으로 만들어줌.

- bower : 의존성 라이브러리 관리

- grunt : 테스트와 배포 빌드 

 

yo 설치 :  npm install -g yo

bower 설치 : npm install -g bower

grunt 설치 : npm install -g grunt-cli

 

제너레이터 설치  : npm install -g generator-angular

  -- deprecated 가 많이 나온다.  

 

버전 확인

yo --version => 4.3.0

bower --version => 1.8.14

grunt --version => 1.4.3

 

yo 를 이용한 ToDo 앱 생성

1. 먼저 디렉토리 todo 생성

2. todo 디렉토리로 이동해서 다음 명령어 실행

  yo angular MyToDo

 

실행하면 아래와 같은 화면이 뜨며, 뭘 설치할지 묻는 질문이 나온다.

 

 

 

 

실행 : grunt serve
grunt-cli: The grunt command line interface (v1.4.3)

Fatal error: Unable to find local grunt.  ==> 에러 발생

If you're seeing this message, grunt hasn't been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:

https://gruntjs.com/getting-started

 

문제를 해결하기 위해서....todo 디렉토리에서 아래 명령 실행하니 다른 형태의 에러발생

npm install grunt --save-dev

 

실행 : grunt build
Running "clean:dist" (clean) task
>> 0 paths cleaned.

Running "wiredep:app" (wiredep) task
Warning: Error: Cannot find where you keep your Bower packages. Use --force to continue.

Aborted due to warnings

 

 

실행 : grunt serve
Running "serve" task

Running "clean:server" (clean) task
>> 0 paths cleaned.

Running "wiredep:app" (wiredep) task
Warning: Error: Cannot find where you keep your Bower packages. Use --force to continue.

Aborted due to warnings.

 

 

디렉토리 bower_components 를 만들고 다시 실행하니 다른 에러가 뜸

 

실행 : grunt serve
Running "serve" task

Running "clean:server" (clean) task
>> 0 paths cleaned.

Running "wiredep:app" (wiredep) task
Warning: Error: angular is not installed. Try running `bower install`. Use --force to continue.

Aborted due to warnings.

 

angular 를 설치하기 전에 git 을 설치했다.

맨처음 git 을 설치하는게 좋을 것 같다. 

https://git-scm.com/download/win

 

그런 다음 명령을 실행하고

bower install angular 

 

다시 grunt serve 실행하니 화면이 뜸

 

 

 

 

설치후 bower list 명령을 내리면 컴포넌트들 버전을 확인할 수 있다.

실행 bower list

angualr : 1.8.3

bootstrap : 3.4.1

jquery : 3.6.0

.....기타등등

 

 

Abou메뉴 기능 달기

why?  About 메뉴는 있지만 실제 클릭시 동작은 하지 않음.

1. app.js 작업

.when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',        
      })

 

를 추가함. 글자가 안이네.ㅠ.ㅠ

 

2. views 디렉토리에 about.html 생성

<p>This is the about view.</p>

3. scripts->controllers->about.js 생성

'use strict';

/**
 * @ngdoc function
 * @name myToDoApp.controller:AboutCtrl
 * @description
 * # AboutCtrl
 * Controller of the myToDoApp
 */
angular.module('myToDoApp')
  .controller('AboutCtrl', function ($scope) {
   
  });

 

 

페이지 이동시 주의할게 있다....이걸로 오전내내 삽질을 했다.

원인은 잘 모르겠고, about 링크를 눌렀을때, URL 이 이상하게 바뀌는 현상이 있었다.

처음 HTML 파일은

<li><a ng-href="#/about">MyAbout</a></li>

인데,  정상적인 주소는 아래와 같은데

http://localhost:9000/#!/about

 

실제 클릭을 하면 아래와 같이 '#%2F' 가 붙었다.

http://localhost:9000/#!/#%2Fabout

 

해결방법은 중간에 '!' 를 추가하는 것이다.

<li><a ng-href="#!/about">MyAbout</a></li>

스택 오버 플로우에서 답을 찾음

( https://stackoverflow.com/questions/41272314/angularjs-all-slashes-in-url-changed-to-2f )

 

 

드래그 앤 드랍기능 추가.

아래 명령으로 컴포넌트를 추가하자.

bower install angular-ui-sortable --save