1. 따라하기 2편

 - https://angular.io/tutorial/toh-pt0

 - src/app 으로 이동한 상태에서의 내용입니다.


2. AppComponent 파일 수정

 1) app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Tour of Heroes'; }


 2) app.component.html

<h1>{{title}}</h1> <app-heroes></app-heroes>


3. app전체에 적용할 css 적용

 1) src/style.css

/* Application-wide Styles */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; } body, input[text], button { color: #888; font-family: Cambria, Georgia; } /* everywhere else */ * { font-family: Arial, Helvetica, sans-serif; 

}


4. here component CLI로 생성

 1) 명령어

ng generate component heroes


 2) 확인


5. 컴포넌트 수정

 1) app/hero.ts 파일 추가

hero: Hero = { id: 1, name: 'Windstorm' 

};


 2) app/heroes/heroes.component.ts

import { Component, OnInit } from '@angular/core';

import { Hero } from '../hero'; @Component({ selector: 'app-heroes', /* the components CSS element selector */ templateUrl: './heroes.component.html', /* the location of the component's template file. */ styleUrls: ['./heroes.component.css'] /* the location of the component's private CSS styles. */ }) export class HeroesComponent implements OnInit { hero: Hero = { id: 1, name: 'Windstorm' };

constructor() { } ngOnInit() { }  

}


3) app/heroes/heroes.component.html

<!-- {{ hero.name | uppercase }} UppercasePipe -->

<h2>{{ hero.name }} Details</h2> <div><span>id: </span>{{hero.id}}</div> 

<div><span>name: </span>{{hero.name}}</div>


4) src/app/app.module.ts

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
  4.  
  5. import { AppComponent } from './app.component';
  6. import { HeroesComponent } from './heroes/heroes.component';
  7.  
  8. @NgModule({
  9. declarations: [
  10. AppComponent,
  11. HeroesComponent
  12. ],
  13. imports: [
  14. BrowserModule,
  15. FormsModule
  16. ],
  17. providers: [],
  18. bootstrap: [AppComponent]
  19. })
  20. export class AppModule { }




6. 확인

7. 이어서는...

 - 이후 내용은 하나씩 따라하다보니 입력을 못함.

 - 크게 어려운건 없어보임.

1. SCP란?

secure copy; SCP



2. 명령어

 1) 샘플명령어(EC2에src_directory 폴더를 dst_directory로 복사한다.)

scp -i {sample.pem} -r {user_id}@{remote_ip}:{src_directory} {dst_directory}


 2) 팁

 - pem파일은 600 권한을 잘 줘야한다.

chmod 600 ./sample.pem

 - 에러메시지



'OS > Linux' 카테고리의 다른 글

History 명령어 사용하기.  (0) 2018.07.05
Linux bash Shell directory exists check  (0) 2018.04.02
[AWS] SCP로 EC2에서 파일/폴더 가져오기  (0) 2018.01.18
echo 결과 file 생성  (0) 2017.06.13
Install redis on Centos 7  (0) 2017.04.18
Centos User Add(+Aws EC2)  (0) 2017.04.03

해당 블로깅은 Angular Tutorial을 따라하면서 작성한 내용입니다.


https://angular.io/guide/quickstart


1. Angular 설치하기

npm install -g @angular/cli


2. 새로운 어플리케이션 만들기

ng new angular-tour-of-heroes

 - 여기서 ng new는 "새로운 프로젝트를 '현재 디렉토리'에 프로젝트명으로 디렉토리를 만들어준다." 

 - 생성하면 아래와 같은 구조로 내용이 생성될 것이다.


3. 어플리케이션 시작하기

cd angular-tour-of-heroes 

ng serve -open

 - 여기서 ng serve 는 어플리케이션을 빌드하고, 개발서버를 시작한다. 또한 소스파일이 변경될 때 어플리케이션을 알아서 자동시작해준다. '--open 옵션은 브라우저를 켜주는 옵션이다.'


4. 확인

 - 위 명령어로 실행시킬 경우 'http://localhost:4200/' 로 알아서 브라우저가 열리고, 아래처럼 내용이 나올 것이다.




5. 구성요소 확인 및 기본 내용 수정해보기

 1) src/app 으로 이동

cd src/app


 2) 편집

vi ./app.component.ts


3) 제목 수정

export class AppComponent { title = 'My First Angular App'; }


4) 확인


5) Css 수정

h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; 

}


6) 확인



nginx conf 파일 내에 다중 if문 조건을 넣고싶다. 허나 nginx에서는 다중 조건 if문 사용이 안된다.

그래서...


1. 하고싶은 소스

if ($host = 'a.example.com' || $host = 'b.example.com'){

  return 301 https://$host$request_uri;

}


2. 변경된 소스

set $is_redirect_val 0;

if ($host = 'a.example.com') {

  set $is_redirect_val 1;

}


if ($host = 'b.example.com') {

  set $is_redirect_val 1;

}

if ($is_redirect_val = 1) {

  return 301 https://$host$request_uri;

}


잘된다.

+ Recent posts