[ANgular 2.0] Tutorial rc.5 migration

AngularJS Tutorial 2.0 RC4 to RC5 Migration

Migration Step

!!! Node V5.x.x / npm 3.x.x 이상 필요 !!!

1. quick-start의 json 파일 Copy&Paste

https://angular.io/docs/ts/latest/quickstart.html

 

2. 프로젝트의 node_modules 제거

 

3. npn install

npm install @angular/{core,common,compiler,platform-browser,platform-browser-dynamic} –save

 

Peer Dependency 오류 발생시 직접 설치 해야함

 

4. npm start

start error 발생할 경우

-> package.json 변경

"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",

 

-> CLI 업데이트

npm install angular-cli @angular/tsc-wrapped --save-dev

 

-> npm install

 

설치 도중 발생 가능한 에러

npm start 안될때

https://github.com/johnpapa/lite-server/issues/83

XHR error (404 Not Found) loading / rxjs-extension.js 에러

http://stackoverflow.com/questions/38941329/why-am-i-getting-a-error-loading-rxjs-extensions-in-angular-2

renewal 된 tutorial 에서 rxjs-extension.js 라는 파일이 추가되었다. 새로운 tutorial을 통해 직접 생성해야한다.

관련 사이트

[migration 되어있는 project]

https://github.com/johnpapa/angular2-tour-of-heroes/blob/master/package.json

[angularjs starter pack]

https://github.com/AngularClass/angular2-webpack-starter

[rc5 migration step blog]

https://www.barbarianmeetscoding.com/blog/2016/08/13/updating-your-angular-2-app-from-rc4-to-rc5-a-practical-guide/

https://auth0.com/blog/angular-2-ngmodules/

[angular-beta to rc6]

http://proudmonkey.azurewebsites.net/upgrading-from-angularjs-2-beta-to-rc-6/

---

Renewal 된 Tutorial 을 진행하며

공식 사이트 내용

Then we add HeroDetailComponent to the NgModule decorator's declarations array. This array contains the list of all components, pipes, and directives that we created and that belong in our application's module.

ngmodule의 declarations에는 우리가 만든 우리가 사용할 모든 것들을 저장 (all components, pipes, and directives)

각 component의 provider는 그대로

The providers array tells Angular to create a fresh instance of the HeroService when it creates a new AppComponent. The AppComponent can use that service to get heroes and so can every child component of its component tree.

promise

A Promise is ... well it's a promise to call us back later when the results are ready. We ask an asynchronous service to do some work and give it a callback function. It does that work (somewhere) and eventually it calls our function with the results of the work or an error.

promise funtion document

 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

router

The Angular router is an external, optional Angular NgModule called RouterModule. The router is a combination of multiple provided services (RouterModule), multiple directives (RouterOutlet, RouterLink, RouterLinkActive), and a configuration (Routes). We'll configure our routes first.

We call the forRoot method because we're providing a configured router at the rootof the application. The forRoot method gives us the Router service providers and directives needed for routing.

router config, export 하는 것 이름 바뀜

https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array

http

The HttpModule is not a core Angular module.

RxJS

The RxJS operators are not available in Angular's base Observable implementation. We have to extend Observable by importing them.

We could extend Observable with just the operators we need here by including the pertinentimport statements at the top of this file.

 We add it to the NgModule decorator's imports array. This array contains the list of external modules used by our application.

@NgModule

application's root module에게 우리가 사용할 component를 import 하여 refer.

root component 처럼 root module이 있어야한다.

module id

http://stackoverflow.com/questions/37178192/angular2-what-is-the-meanings-of-module-id-in-component

http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/

setting moduleId: module.id in the @Component decorator is the key here. If you don't have that then Angular 2 will be looking for your files at the root level.

module.id 는 commonJS에서 제공하는 것

그래서 tsconfig.json 

html 파일이 완벽한 html이 아니라 부분만있을경우 moduleid를 선언해줘야하고 full 형식의 html이면 moduleid 필요없다. seletor가 달라도 상관 없다는 장점?

@ngmodule에서 import, providers, declarations 의 차이

http://stackoverflow.com/questions/39062930/what-is-difference-between-declarations-providers-and-import-in-ngmodule

• imports makes the exported declarations of other modules available in the current module
• declarations are to make directives from the current module available to other directives in the current module. Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported.
• providers are to make services and values known to DI. They are added to the root scope and they are injected to other services or directives that have them as dependency.

이해 안가는 것

ngModule은 dependency를 관리하기 위해서 사용한다.

app.component.ts에 hero.service.ts를 등록했는데 hero.component.ts에서 왜 또 import 하는가

내가 생성한 component들 html에서 어디다 태그 선언하지..?