AngularJS 시작하기 - 환경 구성 (1/3)

지난 포스팅에서 AngularJS에 대한 간략한 설명을 드렸는데요. 해당 포스팅이 궁금하신 분들은 아래의 링크를 참고해주세요.

AngularJS에 대하여 알아보자

SPA(Single Page Application) AngularJS는 SPA(Single Page Application) Framework 입니다. Single Page Applicaiton(SPA, 스파)는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로..

hacksms.tistory.com

AngularJS 환경 구성하기

먼저 저는 현재 TypeScript를 위한 환경 구성이 완료된 상황입니다. 관련 내용은 아래의 포스팅을 참고해주세요.

TypeScript 시작하기 - 환경 구성 (1/3)

지난 포스팅에서 TypeScript에 대한 간략한 설명을 드렸는데요. 해당 포스팅이 궁금하신 분들은 아래의 링크를 참고해주세요. TypeScript에 대하여 알아보자 TypeScript가 필요해진 이유 초기 javascript의

hacksms.tistory.com

그리고 Visual Studio Code에서 Angular Language Service도 설치해줍니다.

마지막으로 Angular를 좀 더 편리하게 개발하기 위해서 Angular-CLI(Command Line Interface)를 설치해줍니다.

# Global Install
$ npm install -g @angular/cli
# Local Install
$ npm install @angular/cli

이후 ng 명령어를 이용하여 새 Angular Project를 생성 가능합니다.

※ Project Name은 Alphabet과 "-"만 사용 가능하며, 입력이 필요한 구간은 "Enter"를 입력하는 것으로 넘어갈 수 있습니다.

$ ng new angularJS
$ cd angularJS

Project가 정상적으로 생성되었다면, 아래와 같은 구조를 가지게 되는데 중요 폴더 및 파일에 대한 설명은 다음과 같습니다.

구분	설명
packages.json	Project 관련 정보와 의존성을 관리하는 설정 파일
angular.json	AngularJS 관련 설정 파일
src/index.html	메인 HTML 파일
src/style.css	Global CSS Style Angular JS는 모든 View들이 자신의 CSS를 가지며, 각각의 CSS는 다른 View에 영향을 주지 않음
src/assets	Static 파일과 같이 외부에서 직접 접근할 수 있는 파일이 저장된 폴더
src/environments	ng server(개발용) 명령어를 이용할 경우 enviroment.ts 내 값을 읽어오며, ng build(배포용) 명령어를 이용할 경우 enviroment.prd.ts 내 값을 읽어옴
src/app	AngularJS의 Code가 위치한 영역
src/app/app.module.ts	AngularJS Module 관리를 위한 파일

또한, ng server 명령어를 통하여 개발 환경 모드로 Angular를 실행시킬 수 있습니다.

# --open is open the browser after exectue Angularjs
$ ng serve --open

아래와 같이 4200번 포트로 웹 서버가 구동되었다면, 정상적으로 실행이 된 것 입니다.

기본 코드

src/app/app.module.ts는 다른 Angular Module을 관리하기 위한 파일로 대부분의 ts 파일들은 이 파일에 등록이 되어야 사용할 수 있습니다.

src/app/app.module.ts

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({}) 코드는 독립된 코드가 아닌 AppModule Class에 부여된 Class Decorator 입니다. NgModule은 메타데이터의 객체를 인자로 받는데, 이 Module에 있는 Component Template이 어떻게 Compile되는지, Injector를 어떻게 생성할 지 등을 결정할 수 있습니다.

NgModule의 인자로 사용된 AppComponent Class의 코드는 다음과 같습니다.

src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularJS';
}

AppComponent Class는 Component Decorator가 부여되어있으며, Component는 AngularJS의 View와 View에 담기게 될 Code, HTML, Style 등을 담을 수 있습니다.

Selector : HTML Code에서 해당 Component를 사용하기 위해 필요한 값 입니다.
TemplateUrl : Component에서 사용하게 될 HTML 파일의 위치이며, 하나의 Component는 하나의 Template만 사용 가능합니다.
StyleUrls : Template에서 사용하게 될 CSS 파일들의 위치이며, 하나의 Component에서 여러 파일을 사용 가능하기 때문에 배열로 입력해야만 합니다.

기본 설정의 AngularJS에서는 src/index.html을 제외한 모든 View Code들이 Component에 담기게 됩니다. 또한, index.html에서 AppComponent를 호출하게 되며, AppComponent를 비롯한 다른 Component에서 다른 Component의 html을 호출할 수 있습니다.

마지막으로 AppComponent Class에 있는 titile 값을 다른 값으로 변경 후 웹 사이트를 새로고침하게 되면 app.component.html 내에 있는 title의 값이 변경되게 됩니다.

src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'hacksms';
}

src/app/app.component.html

    <span>{{ title }} app is running!</span>

마지막으로 정리하자면, "main.ts -> index.html > AppModule Class -> AppComponent Class -> app.component.html"과 같은 흐름으로 동작하게 된다고 볼 수 있습니다.

src/main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}
// Call AppModule
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularJS</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

src/app/app.module.ts

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  // Call AppComponent
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.ts

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

// Call app.component.html
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'hacksms';
}

src/app/app.component.html

<!-- Toolbar -->
<div class="toolbar" role="banner">
  <img
    width="40"
    alt="Angular Logo"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
  />
  <span>Welcome</span>
    <div class="spacer"></div>
    <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
      <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
        <rect width="400" height="400" fill="none"/>
        <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
      </svg>
    </a>
    <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
      <svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
        <path d="M0 0h24v24H0V0z" fill="none"/>
        <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
      </svg>
    </a>
</div>

<div class="content" role="main">

  <!-- Highlight Card -->
  <div class="card highlight-card card-small">

    <svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
      <title>Rocket Ship</title>
      <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
        <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
        <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
          <path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
          <path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
        </g>
      </g>
    </svg>

    <span>{{ title }} app is running!</span>

저작자표시

'Study > WEB' 카테고리의 다른 글

AngularJS 시작하기 - HTTP 통신을 통한 Data 전달받기 (3/3) (0)	2022.10.10
AngularJS 시작하기 - 웹 서버 개발 기초 (2/3) (0)	2022.10.10
AngularJS에 대하여 알아보자 (0)	2022.10.09
Docker를 이용한 Redis 환경 구축하기 (0)	2022.10.06
TypeScript 시작하기 - 환경 구성 (0)	2022.10.03

Hack_SMS

AngularJS 시작하기 - 환경 구성 (1/3)

AngularJS 환경 구성하기

'Study > WEB' 카테고리의 다른 글

댓글

티스토리툴바

AngularJS 시작하기 - 환경 구성 (1/3)

AngularJS 환경 구성하기

'Study > WEB' 카테고리의 다른 글

관련글

댓글

티스토리툴바