front 15

[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&Pastehttps://angular.io/docs/ts/latest/quickstart.html 2. 프로젝트의 node_modules 제거 3. npn installnpm install @angular/{core,common,compiler,platform-browser,platform-browser-dynamic} –save Peer Dependency 오류 발생시 직접 설치 해야함 4. npm start start error 발생할 경우 -> package.json 변경"st..

ANgularJS 2.0+ 2016.09.29

[AngularJS 2.0] AngularJS 2.0 Tutorial4_http

Angular.io 에서 제공하는 튜토리얼을 정리한 것입니다. 사진 클릭시 튜토리얼로 이동!! RC4기준 !!7. Http 1. Providing HTTP Services 이번 장에서는 원격 서버의 웹 API에 대응하는 HTTP 호출을 하는 응용 프로그램을 만들것이다. HTTP는 core Angular module이 아니다. npm package를 통해서 @angular/http 라는 add-on module로 제공된다. 튜토리얼을 따라왔다면 우리는 systemjs.config에서 필요한 라이브러리들을 이미 다운 받았다. HTTP를 어디에서나 엑세스하기 위하여 main.ts 의 bootstrap에 등록한다. HTTP_PROVIDERS를 bootstrap의 2번째 파라미터로 등록하는 것은 @Componen..

ANgularJS 2.0+ 2016.09.19

[AngularJS 2.0] AngularJS 2.0 Tutorial3_routing

Angular.io 에서 제공하는 튜토리얼을 정리한 것입니다. 사진 클릭시 튜토리얼로 이동!! RC4기준 !!6. Routing (1) - 파일 분리하기1. 이전 프로젝트와 달라지는 것 대시보드 화면 추가Heroes와 대시보드 화면 이동선택된 히어로의 디테일을 다른 화면에서 보여주기clicking a deep link in an email opens the detail view for a particular hero 2. 폴더 구조 3. Plan AppComponent를 네비게이션만 다루는 하나의 application shell 로 변경 Heroes concerns을 AppComponent와 HeroesComponent로 나누어 재위치 routing 추가 DashboardComponent 생성 Tie D..

ANgularJS 2.0+ 2016.09.19

[AngularJS 2.0] AngularJS 2.0 Tutorial2_service

Angular.io 에서 제공하는 튜토리얼을 정리한 것입니다. 사진 클릭시 튜토리얼로 이동!! RC4기준 !!5. Service 1. 폴더 구조 2. Chapter4의 issue - hero를 정의하는 것은 컴포넌트의 일이 아니다.- 공유하기가 쉽지 않다. new 키워드를 대체하기 위하여private property를 정의하기 위해 constructor를 추가.constructor를 사용하기 위하여 컴포넌트에 provider 사용. 3. app.component.ts123456789101112131415161718192021222324252627282930313233343536import { Component, OnInit } from '@angular/core';import { Hero } from '..

ANgularJS 2.0+ 2016.09.19

[AngularJS 2.0] AngularJS 2.0 Tutorial1

Angular.io 에서 제공하는 튜토리얼을 정리한 것입니다. 사진 클릭시 튜토리얼로 이동!! RC4기준 !!1. Introduction package.json 프로젝트에 필요한 package 들의 listtsconfig.json TyleScript compiler configration file.typings.json identifies typeScript definition filessystemjs.config.js SystemJS 정의 파일 2. The Hero Editor 1. 프로젝트 구조 2. app.component.ts123456789101112131415161718192021222324import { Component } from '@angular/core';export class Her..

ANgularJS 2.0+ 2016.09.19

PROMISE

javascript의 동기 / 비동기 [참고] javascript 비동기 동작과정 - javascript의 promise가 탄생하게 된 이유요약 : 비동기를 위한 callback이 많아지자 그것을 관리하기 위하여 자바스크립트는 Single Thread 방식이며, 모든 비동기 이벤트(Event Callback, 타이머(setTimeout, setInterval)는 같은 Thread 위에서 실행된다.그러므로 기본적으로는 동기 방식으로 진행된다. 동기 방식동기 방식이란, 작업이 들어온 순서에 맞게 차근차근 하나씩 진행되는 것이다. 순서에 맞게 빨리빨리 진행되는 장점이 있지만, 여러 가지의 일을 동시에 처리할 수 없는 단점이 있다. 비동기 방식동기방식의 단점을 보완하기 위해 탄생되었다고 보여지는 비동기방식. 비..

javascript & jQuery 2016.08.22

javascript this self 차이점

JavaScript의 this는 기존 언어에서 사용하던 this와는 다릅니다. 비슷한 의미로 사용될 때도 있지만, JavaScript의 this는 여러 가지 함수가 호출되는 방식(호출 패턴)에 따라 참조(바인딩)하는 객체가 다르기 때문입니다.자바에서의 this는 인스턴스 자신을 가리키는 참조변수입니다. this가 객체 자신에 대한 참조 값을 가지고 있다는 것입니다. 주로 매개변수와 객체 자신이 가지고 있는 변수의 이름이 같을 경우 이를 구분하기 위해서 사용됩니다.javascript의 this가 해당 함수 호출 패턴에 따라 어떻게 객체를 참조(바인딩)하는지에 대한 규칙1. 기본적으로 this는 전역 객체를 참조한다. 2. 메소드 내부의 this는 해당 메소드를 호출한 부모 객체를 참조한다. 3. 생성자 함..

javascript & jQuery 2016.08.16

[AngularJS 2.0] AngularJS 2.0 Tutorial 흐름

목차 프로젝트 분석 흐름이 순서대로 따라가며 보면 편할 듯하다. 프로젝트 필요하신 분은 깃헙 (https://github.com/eunhyekimkeh/angularjs2_tutorial) 또는 댓글주세요! 깃헙에 파일 제대로 올라가있는지 모르겠음앞 내용들의 추가 내용template : 뷰 역할component : 뷰&모델의 상태 관리service : 비즈니스 로직import 하면 directive를 해줌provider : 서비스들 injectpipe : 다국어 처리할 때 도 같은 것, 시스템에가서 설정에 맞게 값을 반환 (@angular/common)browser-pipe.ts : 미리 올려 놓는 것?any ofen : 0.0.0.0 으로 IP 잡기 routes.ts 는 동기방식path : 실제 url..

ANgularJS 2.0+ 2016.08.05

TypeScript

TypeScript 2016.09.19 추가 내용 1. Typescript는 JS의 상위집합(superset) 언어.Typescript = ES6(classes, modules) + TYpes + AnnotationsGenerics나 Lambdas를 이용할 수 있다. 2. Javascript의 결점 보완OOP 지원Primitive Type 지원으로 가독성의 장점 3. 프리컴파일 언어 4. Javascript의 미래버전인 Ecma Script 사용 TypeScript Documentation의 BasicTypes 항목을 옮긴 것입니다. 저의 필요에 의한 것만 옮겨왔음으로 직접 보고 확인하시길 추천합니다. Data Type let javascript의 var를 대신함. String multiple line ..

ANgularJS 2.0+ 2016.08.03
반응형