첫 번째 Angular 프로젝트 만들기

시간이 지남에 따라 나는 Ionic 및 React 과 같은 첫 번째 응용 프로그램을 꽤 많이 수행했습니다.

오늘 우리는 첫 번째 Angular 프로젝트를 시작할 것입니다.

다음과 같은 매우 기본적인 애플리케이션을 만들 것입니다.

각도는 무엇입니까?

Angular는 단일 페이지 애플리케이션을 만드는 데 사용할 수 있는 프레임워크입니다.
Ionic과 같은 모바일 애플리케이션에서도 사용할 수 있습니다.

Angular는 React에서도 볼 수 있는 구성 요소 기반 프레임워크입니다.

Typescript로 작성되어 우리의 삶을 더 쉽게 만들고 HTML을 메인 프런트엔드로 사용합니다.

Angular CLI 설치

시작하려면 먼저 Angular CLI(Command Line Interface)를 설정해야 합니다. 이것은 터미널에서 실행할 수 있는 도구이며 특정 구성 요소를 생성하는 데 사용할 수 있습니다.

즐겨찾는 터미널( iTerm2 is mine )을 열고 다음 명령을 실행합니다.

npm install -g @angular/cli

이제 Angular CLI가 설치되었으므로 다음 명령을 실행하여 작동하는지 확인할 수 있습니다.

ng v

그러면 이에 가까운 응답을 볼 수 있습니다. (버전은 다를 수 있습니다)

첫 번째 Angular 프로젝트 시작

Angular CLI가 설치되면 다음 명령을 사용하여 첫 번째 앱을 생성할 수 있습니다.

ng new angular-app

Routing을 사용할 것인지, 어떤 스타일시트 전처리기를 사용할 것인지 묻습니다.

Routing에 대해 Yes를 선택하고 스타일시트에 대해 SCSS를 선택합니다.

이제 애플리케이션으로 이동하여 ng serve 명령을 실행하여 앱을 시작할 수 있습니다.

cd angular-app
ng serve

그런 다음 localhost:4200에서 브라우저를 열고 첫 번째 애플리케이션을 볼 수 있습니다.

구성 요소 추가

언급했듯이 Angular는 구성 요소 기반 프레임워크이므로 새 구성 요소를 추가해 보겠습니다.

Angular CLI를 사용하여 이를 생성할 수 있습니다.

ng generate component welcome

이렇게 하면 시작 구성 요소가 생성되지만 아직 아무것도 할 수 없습니다.

먼저 이 구성 요소에 대한 새 경로를 추가해 보겠습니다.

편집기를 열고 다음 파일을 찾습니다. src/app/app-routing.module.ts .

환영 구성 요소에 대한 가져오기를 맨 위에 추가하고 경로를 변경합니다.

import { WelcomeComponent } from './welcome/welcome.component';
const routes: Routes = [
  { path: 'welcome', component: WelcomeComponent }
];

이제 app.component.html를 다음과 같이 편집해 보겠습니다.

<h1>Our first angular app</h1>
<nav>
  <ul>
    <li><a routerLink="/" routerLinkActive="active">Empty homepage</a></li>
    <li><a routerLink="/welcome" routerLinkActive="active">Welcome</a></li>
  </ul>
</nav>
<router-outlet></router-outlet>

여기에서 비어 있는 홈페이지와 시작 페이지로 연결되는 탐색을 만듭니다.

그런 다음 하단에는 실제로 라우터 출력을 표시하는 router-outlet 이 있습니다.

결과는 다음과 같습니다.



이제 기본 Angular 앱을 만들고 라우팅할 수 있는 사용자 지정 구성 요소를 추가했습니다.

여기에서 우리는 더 많은 페이지를 구축하고 완전한 기능을 갖춘 웹 사이트를 만들 수 있습니다!

Angular website에서 자세한 정보를 찾거나 GitHub에서 이 프로젝트를 다운로드할 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나