Skip to content

Instantly share code, notes, and snippets.

@EJSohn
Last active September 7, 2016 03:29
Show Gist options
  • Save EJSohn/73f9b57b5ceb294036a74d5ffa2d9cfc to your computer and use it in GitHub Desktop.
Save EJSohn/73f9b57b5ceb294036a74d5ffa2d9cfc to your computer and use it in GitHub Desktop.

Oh my Angular2!

angular2의 튜토리얼을 따라가며 기억해야 할 점들을 기록한 gist.

https://angular.io/docs/ts/latest/tutorial

Tutorial-3 - Master/Detail

  1. input의 ngModel directive는 input value와 변수를 묶어준다.
  2. [class.selected]="hero===selectedHero" 에서 "==="는 엄격한 연산자이다. ( 비교시 변수의 타입또한 고려함 ) 또한 저 옵션은 'hero가 selectedHero일 시 본 태그의 class가 selected가 된다' 라는 의미이다.
  3. ngModel을 사용하기 위해서는 AppModule 클래스의 imports 어레이에 FormsModule를 추가해야 한다.

Tutorial-4 - Multiple components

  1. Single Responsibility Principle 를 지키자.
  2. Angular insists that we declare a target property to be an input property. If we don't, Angular rejects the binding and throws an error. 이 때 타깃이란? 하위 컴포넨트로 전달해 줄 변수!

Tutorial-5 - Services

  1. TypeScript sees the @Injectable() decorator and emits metadata about our service, metadata that Angular may need to inject other dependencies into this service.
  2. 컴포넨트의 metadata->providers에 서비스를 추가하고 ( injector에게 서비스를 만드는 법을 알려줌. ) 이 서비스를 컴포넨트 constructor에 private으로 선언함으로써 service를 컴포넨트에서 유용하고 효율적이게 사용할 수 있게 된다.
  3. ! keep complex logic out of the constructor !
  4. 비동기적으로 데이터를 로드하기 위해 Promise를 사용한다. ( Promise is ... well it's a promise to call us back later when the results are ready )

Tutorial-6 Router

  1. "export class HeroesComponent implements OnInit" (??)
  2. for routing, we have to create configuration file for the application routes. ( Routes tell the router which views to display when a user clicks a link or pastes a URL into the browser address bar. )
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment