Engineering_S/W & H/W

  1. 수동으로 Component 생성 사진1) manul 폴더및 파일생성 // src/app/manual/manual.component.ts import { Component } from '@angular/core' ; @ Component ({ selector : 'app-manual' , // component명칭을 작성한다. templateUrl : './manual.component.html' , // 해당 component가 사용할 html 템플릿 주소를 입력한다. }) export class ManualComponent {} 코드1) ts파일 작성 <!-- src/app/manual/manual.component.html --> <h1> This component was build by manual! </h1> 코드2) html파일 작성 // src/app/app.module.ts import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { AppComponent } from './app.component' ; import { ManualComponent } from './manual/manual.component' ; @ NgModule ({ declarations : [ AppComponent , ManualComponent ], // declarations에 components class를 추가한다. imports : [ BrowserModule ], providers : [], bootstrap : [ AppComponent ], }) export class AppModule {} 코드3) 앱 모...

 설치 필요 버전정보 angular : 16.2.3 node : 18.18.0 1. angular 설치 - terminal을 이용하여 angular를 설치합니다. (node v18.18.0) $ npx @angular/cli@16.2.3 new copy 사진1) angular 셋팅 <!-- src/app/app.component.html --> <h1> Hello World! </h1> code1) html문서 작성 2. angular 실행 - terminal을 이용하여 angular를 실행합니다. (npm) $ npm start copy 사진2) angular서버 실행 사진3) Hello World GitHub Link :  https://github.com/Alex-Choi0/angular_helloWorld.git