Ui Guide Project 구조

■ Angular-CLI 폴더 및 파일 정리

https://www.a-mean-blog.com/ko/blog/Angular-2/_/Angular-2-%EC%84%A4%EC%B9%98-%EB%B0%8F-Angular-CLI%EB%A1%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%A4%ED%96%89-%EB%B0%A9%EB%B2%95

http://alexband.tistory.com/42 (구조 다른 부분들 설명)

http://ku0re.tistory.com/10 (AOT(Ahead-of-Time) JIT(Just-In-Time) 컴파일 방식 비교)

- src/index.html : 사이트 접속시 처음으로 로딩이 되는 html파일입니다. head를 변경하거나 외부 library를 추가해야 하는 경우 여기에 추가하게 됩니다.

- src/.angular-cli.json : 앵귤러 cli에서 사용할 설정 정보가 있는 파일 (24줄 styles에 css 경로 수정 - 기존 경로를 src로 잡혀있음)

http://web-front-end.tistory.com/64

포트번호 변경

"defaults": {

"serve": {

"port": 4201

}

}

 - src/style.css : global css style이 저장되는 곳입니다. angular는 기본적으로 모든 view들이 각각의 css를 가지게 되며 서로 다른 view에 영향을 끼치지 않게 되어 있습니다.

 - src/favicon.ico : favicon icon 파일입니다. 이 파일을 바꾸면 favicon 모양이 바뀌게 됩니다.

 -src/assets : 외부에서 직접 접근이 가능한 폴더입니다. 예를 들어, src/assets/js/jquery.js를 두게 되면 웹사이트/assets/js/jquery.js로 바로 접근이 가능하게 됩니다. 그림파일, 외부 library를 저장하는 용도로 사용됩니다.

 - src/app : 실제 angular의 코딩이 이루어 지는 영역입니다. 

 - src/environments : enviroment.prod.ts와 environment.ts의 파일이 있는데, 사이트 실행 환경(개발용, 출판용)에 따라 다른 값을 설정할 필요가 있는 경우 사용됩니다. 잘 모르겠으면 신경안써도 됩니다. ng serve 로 앱이 실행되는 경우는 enviroment.ts의 값을 읽어옵니다.

 - protractor.conf.js : 포트번호 설정가능 한줄 알았는데.. 아니네 -_ㅡ;

■ 읽는 순서

.angular-cli.json -> index.html & main.ts -> app.module.ts -> app.component.ts(html, css 읽음)

■ Gnb - Lnb 구조 파악중

https://angular.io/guide/router

https://stackblitz.com/angular/ynopjooedop?file=src%2Fapp%2Fcrisis-center%2Fcrisis-center-routing.module.ts

■ React보다 Angular2에 더 주목해야하는 이유

http://sculove.github.io/blog/2016/07/11/reasons-angular2-than-react/