몽쯔

출처 : Angular 기본과 간단한 To-Do 어플리케이션 만들기https://www.inflearn.com/course/angular-%EA%B0%95%EC%A2%8C-%EA%B8%B0%EB%B3%B8/dashboard

템플릿에서 보이는 데이터를 변환해줌

{{express | pipeName : paramValue}}

데이터와 눈으로 보여지는 값만 바꿀때

아래처럼 json객체 값도 확인가능

pipe는 앵귤러에서 기본제공되는것도 있으며 직접만들 수 도 있다.

출처 : Angular 기본과 간단한 To-Do 어플리케이션 만들기https://www.inflearn.com/course/angular-%EA%B0%95%EC%A2%8C-%EA%B8%B0%EB%B3%B8/dashboard

데이터 통신방향은 단방향, 양방향이 있다.

// 단방향 (component > DOM)
{{템플릿 표현식}}
{{title}}

[속성]="템플릿 표현식"
<todo [todo]="work">


// 단방향 (DOM > component)
(이벤트)="템플릿 문장"
<button (click)="handle()">

// 양방향
[(ngModel)]="템플릿 표현식"
<input type="text" [(ngModel)]="name">

객체 반복문

*ngFor="let 변수명 of 객체이름"

todos라는 요소를 todo라는 변수에 담는다.

글자클릭시 토글되게 하기

(click)="todo.done = !todo.done"

이렇게 html에 직접적으로 넣어도 되나 컴포넌트의 메서드로 변경한다.

(click)="메서드명(인자)"

메서드명(인자){
	코드...
}

글쓰고 클릭하면 목록추가 (양방향데이터)

ngModel을 쓸수 없어서 에러가난다 

can't not vind to 'ngModel' since it isn't a known property of 'input'.

todo.module.ts ngModule안에 FormModule을 추가해주면 된다.

버튼 추가

함수안에 코드 넣어주기

출처 : Angular 기본과 간단한 To-Do 어플리케이션 만들기https://www.inflearn.com/course/angular-%EA%B0%95%EC%A2%8C-%EA%B8%B0%EB%B3%B8/dashboard

컴포넌트는 뷰와 로직으로 구성되있음 

3~7 : 데코레이터

8~15 : class

4 selector: 선택자 #이나 .을 써 id와 class를 지정할 수 있다.

5 templateUrl : 뷰를 담당하는 url을 나타내줌 데이터바인딩이나 다른 컴포넌트를 작성할 수 있음

6. styleUrls : 스타일이 작성된 파일, 배열로 관리한다.

templateUrl에 적힌 html내용

브라우저에 컴파일된 최종 코드

컴포넌트 생성(class 생성없음)

vscode코드에서 angular-cli 다운로드

angular cli명령어를 쉽게 쓸 수 있다.

1. 생성할 폴더(todos)에서 우클릭 하면 이미지처럼 생김 

2. new compnnet 클릭

3. 명령어를 적어주면 그폴더에서 바로 cli가 실행된다.

파일명 옵션

아래처럼 폴더가 생성된다.

옵션의 종류

--inline : 컴포넌트안에 template(html)과 style(css)을 작성한다는 뜻으로 todo.component.ts안에 작성된다는 뜻

즉, todo안에 html과 css파일은 생성을 안함

5번째를 보면 templateUrl이 아닌 내용을 직접 입력하게 되있다.

` : 멀티라인의 문자열을 표현할수 있음(es6에서 말하는 템플릿 리터럴)

Angular Files

위의 플러그인보다 많은 generate 제공

이걸로 component 추가하면 xx.module.ts에 자동으로 세팅이안된다. ㅡㅅ ㅡ

출처 : Angular 기본과 간단한 To-Do 어플리케이션 만들기https://www.inflearn.com/course/angular-%EA%B0%95%EC%A2%8C-%EA%B8%B0%EB%B3%B8/dashboard

모듈생성

$ ng generate module 폴더명

src/app폴더 아래 모듈 폴더와 파일이 생성된다.

컴포넌트 추가

 $ ng g c todo/todos --module todo/todo.module.ts --export

g - generate 약어

c - component 약어

todo/todos - 새로 생성할 폴더

--module - 모듈지정 플래그

todo/todo.module.ts - 임포트 받을 파일

--export 다른 곳에서 사용가능하다는 플래그

작성은 todos.component.html에 작성

현재 서버에 표시되는 화면은 app.component.html이기 때문에 app.component.html에 아래 코드 작성

<app-todos></app-todos>

에러가 뜬다.

왜냐면 app module에 등록이 안되어있기때문이다.

app.module.ts에 import시켜준다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { TodoModule } from './todo/todo.module'; // imports추가 시 자동추가됨

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TodoModule // 모듈이름 추가
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

그럼 화면에 출력된다.

모든 모듈에서는 다른 모듈을 import할 수 있다.

앵귤러는 하나의 root module이 꼭필요하다 그게 app.module이다

출처 : Angular 기본과 간단한 To-Do 어플리케이션 만들기https://www.inflearn.com/course/angular-%EA%B0%95%EC%A2%8C-%EA%B8%B0%EB%B3%B8/dashboard
systemJS하는중 Uncaught ReferenceError: SystemJS is not defined at 오류발생

최신 버전을 적용하지 못해

나타나는것같음.

systemJS 버전을 바꿔야함.

<script src="https://unpkg.com/systemjs@0.21.5/dist/system.js"></script>

   SystemJS.config({
      transpiler : 'typescript',
      baseURL:'/module',
      transpiler:'plugin-babel',
      map:{
        'plugin-babel':'https://unpkg.com/systemjs-plugin-babel/plugin-babel.js',

        'systemjs-babel-build':'https://unpkg.com/systemjs-plugin-babel/systemjs-babel-browser.js'

      }
    });
    
     SystemJS.import('main.js')

angular.json파일에서

"assets": [
              "src/favicon.ico",
              "src/assets",
              "src/module"  //여기추가
            ],

build랑 test두개다 추가했다.

서버재시작하기 

ng serve

예제는 이렇게 했는데 빌드된 main.ts에다가 하면 다안해도 정상작동됨.......

출처 :Angular 기본과 간단한 To-Do 어플리케이션 만들기https://www.inflearn.com/course/angular-%EA%B0%95%EC%A2%8C-%EA%B8%B0%EB%B3%B8/dashboard

app : 실제 어플리케이션 관련파일이 들어감

assets : 이미지등

environments : 프로젝트를 빌드할때 environment.prod.ts 파일이 environment.ts에 덮어 씌워지게됨

앱에서 쓰는 환경변수(서버url등..)

main.ts : 프로젝트의 메인이 되는 파일

서버돌리기

$ ng serve

가운데 쯤에 연두색 박스 localhost:4200이 주소

다른 기기확인하하려면 본인 로컬 --host 쓰고 본인 ip주소 쓰면 된다

$ ng serve --host 00.00.00.00

stackoverflow.com/questions/43071535/how-to-run-my-angular-site-on-mobile-device-that-is-running-localhost-on-my-wind

다른 포트번호 쓰기

$ ng serve --port 4000

도움말확인

$ ng help

출처 : Angular 기본과 간단한 To-Do 어플리케이션 만들기https://www.inflearn.com/course/angular-%EA%B0%95%EC%A2%8C-%EA%B8%B0%EB%B3%B8/dashboard

$ npm install -g @angular/cli //앵귤러 설치

$ ng --version // 버전확인

$ np new 프로젝트명 //프로젝트생성

git-bash 처음 깔고나서 하는거라 계정설정하라고 오류가 난다.

위의 run 밑의 명령어를 따라서 계정설정해준다.

$ git config --global user.email "user.email.com" // ""에 이메일쓰기
$ git config --globla user.name "user name" // ""내이름쓰기 

다시 프로젝트를 생성하면 성공!