1. Angular Framework 시작하기

• 설치하기
• angular-cli 에서 scss 사용하기
• angular migration
  • Module
• entryComponents
  • Component
• 컴포넌트 안에 input 주기
  • example
  • [readonly]=”true”
  • Library
• Angular bootstrap
• Angular material
  • code flow
• Promise
  • 세팅
  • 로그인 구현
  • Work Flow
  • ETC
• 주의 사항

설치하기

앵귤러는 npm을 사용하여 다음과 같이 설치한다.
이때 반드시 -g 옵션을 사용하여 global하게 설치를 해 주어야 ng 명령어가 등록이 되며, 앵귤러 cli를 설치하기에 앞서서 typescript기반인 angular를 동작시키기 위한 typescript를 설치해 주어야 한다.

sudo npm install -g typescript
sudo npm install -g @angular/cli@latest
sudo npm install --save-dev @angular/cli@latest

만약 aws 환경에서 위 코드를 실행하면 root 권한으로 인한 많은 문제가 발생한다 이때는 뒤에 –unsafe-perm을 붙여서 설치해 준다.

sudo npm install -g @angular/cli@latest --unsafe-perm
sudo npm install --save-dev @angular/cli@latest --unsafe-perm

앵귤러를 설치한 후에는 앵귤러에 필요한 각종 모듈을 설치해 주면 되며 package.json을 설정하며 필요한 모듈을 설치한다.

npm install

도 추가적으로 설치해주어야 하는 기본적인 node-module이다.

sudo npm install underscore

angular-cli 에서 scss 사용하기

sass는 루비라는 언어로 동작하기 때문에 먼저 루비를 설치해 줍니다.
리눅스와 맥의 경우는 루비가 기본으로 설치되어 있기 때문에 window의 경우만 설치해 줍니다.

다음의 링크를 통해 설치를 진행합니다.
다운로드

반드시 64비트인 x64로 설치해 줍니다.

ubuntu의 경우는 apt-get을 통해 설치하며 모든 설치 이후 다음 ruby-dev를 설치해주어야 한다.

apt-get install ruby-dev

루비 설치가 완료되었으면 다음 명령어를 통해 sass를 설치해 줍니다.

gem install sass

sass를 설치하였으면 angular-cli를 활용하여 sass 기반의 프로젝트를 만듭니다.

ng new 프로젝트 이름 --style=sass

만약 기존의 프로젝트가 있는 경우라면 다음과 같이 css 기반 프로젝트를 sass기반 프로젝트로 바꾸어 줍니다.

ng set defaults.styleExt scss

angualr-cli.json 에 다음의 내용을 추가해 줍니다.

{
  "defaults": {
    "styleExt": "scss"
  }
}

angular migration

참조

Module

entryComponents

module.ts의 entryComponents는 html내에서 확인되는 태그가 아닌 동적으로만 생성되는 태그를 앵귤러가 알 수 있게 해준다.
앵귤러는 이를 통해 태그를 찾고 컴파일을 수행한다.
만약 html 내에서 확인되는 다른 많은 태그들은 단순히 declarations에만 있으면 된다.

Component

컴포넌트 안에 input 주기

example

undefined

[readonly]=”true”

인풋이 입력되지 않도록 읽기전용으로 바꾼다.

Library

Angular bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

Angular material

code flow

//앵귤러 매터리얼 설치
npm install --save @angular/material @angular/cdk
//매터리얼에 필요한 애니메이션 설치
npm install --save @angular/animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
imports: [BrowserAnimationsModule],
//달력입력박스를 위한 module.ts에서 임포트
import {MdButtonModule, MdCheckboxModule} from '@angular/material';

// css 파일에서 추가시켜줌
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Angular Material 시작하기

Promise

세팅

npm install promise
var Promise = require('promise');

로그인 구현

Work Flow

1. _guards디렉토리 생성
2. alert component 생성
3. alert service 생성
4. auth guard생성
5. authentication service 생성

jasonwatmore의 Angular를 이용한 로그인 구현 포스팅

ETC

주의 사항

1. 임포트시 양방향으로 서로서로 import를 하는 circulr 임포트를 하면 안된다.

---