Skip to content

Instantly share code, notes, and snippets.

@minhoryang

minhoryang/HelloAngularJS2.md

Created September 1, 2016 07:11
Show Gist options
  • Save minhoryang/9df30db797be5223d6eee2585a7f6510 to your computer and use it in GitHub Desktop.
Save minhoryang/9df30db797be5223d6eee2585a7f6510 to your computer and use it in GitHub Desktop.
Download ZIP
HelloAngularJS2.md
Raw
HelloAngularJS2.md

AngularJS 2 Kickstart 따라가기

작업환경은 구축되었나?

- Environment MGMT
	- ndenv
- Project/Profile
	- https://github.com/mgechev/angular2-seed
- Dependency Packages MGMT
	- npm
	- npm-shrinkwrap
	- typing
- Code Lint
	- tslint
	- https://angular.io/styleguide
- Code Build
- Code Test
	- karma
	- http://www.protractortest.org/#/ selenium test.

궁금증

0. (개인적) progressive webapp?
	- AngularJS2와 Ionic이 둘다 주장함.
	- http://ionicframework.com/docs/v2/resources/progressive-web-apps/
1. why CommonJS?
	- ?
		- http://cinos81.bitbucket.org/blog/_site/javascript/2015/07/19/trabspiler-javascript.html
2. can we use TypeScript2?
	- yes, tsc만 최신으로 업데이트 하면 될 것 같음. (문법상 문제없음)
3. Data Binding?
	- ?
4. Component <-> NgModule 관계
	- NgModule이 Component를 사용한다.
	- 1:N관계
		- M:N관계가 가능할까?
			- Caching은?
5. Platform) BrowserModule <-> BrowserDynamicModule 관계
	- Browser에서 사용하기 위해 Platform을 정의하나, 이를 어떤 방식으로 로딩할지를 따로 정의할 수 있어서 이 둘이 분리된 것.
6. Platform) NgModule이 여러개의 Platform을 가질 수 있나?
	- ?
7. BrowserModule도 Component를 바로 사용할 수 있나?
	- ?
8. AngularFire2?
	- ?
9. Page? Pipe?
	- ?
10. Injectable?
	- ?
11. Controller?는 뭐임또..... Nav/Modal/View를 담당하던데?
	- ?
	- ModalController를 통해 사용할 Component를 인자와 함께 부르는데, 인자는 NavParams타입임. 그러니까 NavController가 담당하는듯.
		- https://github.com/driftyco/ionic/issues/7160
12. 생애주기는 누가 가지고있나?
	- 왠지 NgModule인것같다.
	- 그러면 ionic이 NgModule로 짜여져있을까?
	- Component에도 OnInit을 Implements할 수 있다.... NgModule은?! 아니면 각각의 생애주기가 있는걸까?

Bootstraping index.html

  • 브라우저용 의존성 로딩

    • "Angular2 Quickstart에서 사용하는 라이브러리는 왜 이렇게 많을까?"에서 해결되었음. 아주 훌륭한 글!

        - core.js 로딩
  	- 왜씀?
  - zone.js 로딩
  	- 왜씀?
  - reflect-metadata 로딩
  	- 왜씀? 뭐지이거 불안하게...
      • 느낀점1. core.js/zone.js 를 쓰는 이유는 잘 알았다. 좋네!
      • 느낀점2. reflect-metadata는 정말 충공깽... 이걸 이 시점에 인젝션하다니... 그럼 systemjs가 commonjs형태로 변환할때는 무슨일이 벌어지는거지? 아니 벌어져야 할 일이 왜 안벌어지고있는거지?

    • system.js 로딩

  • SystemJS.config.js 로딩
    • 환경변수설정같네.
  • SystemJS를 통해 app을 부른다.

    • SystemJS.config.js에서 app의 메타데이터를 정의하였으므로, 그에 따라 로딩을 시작한다.

      • app은 commonjs방식으로 불러올 수 있는 main.js라고 정의
        • main.js는 tsc에 의해 main.ts에서 컴파일 되어짐.

    • 추가적으로 필요한 묘둘들의 위치도 정의가 필요하다.

      한 패키지를 사용하고자할 때, 관리해야할 파일들.

        - `package.json` (npm: 패키지관리)
  	- `npm-shrinkwrap.json` (shrinkwrap: 패키지버전관리)
  - `typings.json` (typing: TypeScript에서의 로딩을 위해)
  - `systemjs.config.js` (systemjs: 모듈 링킹을 위해)

      신이시여...

Init Flow

  • main --(invoke)--> PackageBrowserDynamic
  • PlatformBrowserDynamic --(inject)--> (NgModule)AppModule
    • (+PlatformBrowser, inherited?)
  • (NgModule)AppModule --(decl/boot)--> (NgComponent)AppComponent
  • (NgComponent)AppComponent --(render)--> template

그러니까 Module는 실행가능한 Platform을 정의(선택?)할 수 있고, 표현할 Component를 정의할 수 있다.

Raw
Ionic.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment