Angular 애플리케이션 만들기

WPF에서 Angular로 마이그레이션할 때 Angular 애플리케이션을 만드는 방법을 알아보세요.

Prerequisites

Angular 애플리케이션 작성을 시작하려면 Node.js와 npm 패키지 관리자를 설치해야 합니다. Node.js는 브라우저 외부에서 JavaScript 코드를 실행하는 JavaScript 런타임 환경입니다. Node.js를 얻으려면 nodejs.org로 이동하세요. NPM은 .NET용 NuGet 패키지 관리자와 유사한 패키지 관리자입니다. 기본적으로 Node.js와 함께 설치됩니다. IDE도 필요합니다. Angular 애플리케이션을 개발하는 데 가장 적합한 환경 중 하나는 Visual Studio Code입니다. 무료이며 오픈 소스이며 모든 플랫폼에서 실행됩니다. code.visualstudio.com에서 받을 수 있습니다.

Create new project

WPF 개발자라면 Visual Studio 내에서 새 프로젝트를 만드는 것은 매우 간단합니다. 파일 -> 새 프로젝트를 클릭하고 프로젝트 유형을 선택하고 이름을 지정한 다음 확인을 누르면 됩니다. Angular 세계로 들어가기 때문에 Visual Studio Code 내에서 새 프로젝트를 만들어야 합니다. 그러나 여기에는 새 프로젝트 옵션이 없는데, 그 이유는 Visual Studio Code가 프로젝트 기반이 아니라 파일 기반이기 때문입니다. 새 Angular 애플리케이션을 만들려면 명령 프롬프트를 사용합니다.

먼저 Angular CLI를 설치해야 합니다.

npm install -g @angular/cli

그런 다음 명령 프롬프트에서 애플리케이션을 생성할 폴더로 이동하고 다음 명령을 실행합니다.

ng new demo-app

"Angular 라우팅을 추가하시겠습니까?"라는 메시지가 표시됩니다. 이 데모에서는 아니요를 선택합니다. 다음으로 어떤 스타일시트 형식을 사용할지 묻습니다. 지금은 기본 CSS를 고수하겠습니다. 몇 분이 걸리지만 결국 프로세스가 완료되고 디스크에 새 애플리케이션이 생성됩니다.

이제 방금 생성한 데모 앱 폴더로 디렉터리를 변경하고 Visual Studio Code를 여는 명령을 실행해야 합니다.

cd demo-app
code .

이것은 Angular 애플리케이션을 포함하는 Visual Studio Code의 새 인스턴스를 시작합니다. 이제 이것은 Angular 배우려는 데스크톱 개발자에게 아마도 가장 압도적일 부분입니다. 폴더 구조입니다.

Project structure

계속해서 이 파일 각각을 살펴보고 WPF 애플리케이션과 어떻게 관련이 있는지 살펴보겠습니다. 가장 좋은 방법은 각 프로젝트를 나란히 비교하는 것입니다. 왼쪽에는 WPF 앱이 있습니다. 오른쪽에는 Angular 앱이 있습니다.

Angular 애플리케이션은 단일 페이지 애플리케이션(SPA)이라는 점을 기억하는 것이 중요합니다. 즉, 전체 앱에는 단 하나의 페이지만 있고, 그것이 바로 당신의index.html 것입니다.index.html이 파일은 WPF 애플리케이션의 파일App.xaml과 비교할 수 있습니다. 두 프로그램 모두 글로벌 사이트이며, 입력한 모든 내용이 지원서의 모든 페이지에 표시됩니다. 파일에는index.html 파일의 섹션<app-root></app-root>이StartupUriApp.xaml 포함되어 있으며, 앱 실행 시 보여줄 첫 페이지를 지정합니다.

기술적으로 일어나는 일은index.htmlmain.ts 네바스크립트 파일을 호출하면 그 파일을 불러오AppModule는 거야. Angular 애플리케이션은 모듈과 컴포넌트로 구성됩니다. 기본적으로 루트 모듈과 루트 컴포넌트가 하나씩 있고, 이들은 폴더 아래에app 위치합니다. 파일이 호출될 때main.ts, 우리는 부트스트랩을 할 것입니다. 이 부트스트랩AppModule은 폴더 내app.module.ts 파일에 있습니다app.

그 후 앱 모듈이 자체AppComponent 부트스트랩을 수행합니다. 파일은AppComponent 파일에 정의app.component.ts 되어 있으며, 그 선택기는 로 설정되어 있습니다app-root.AppComponent 파일 내에app.component.html HTML 템플릿이 정의되어 있습니다. 기본적으로 페이지 내<app-root></app-root> 섹션이index.html 파일 내용을app.component.html 시각화할 것입니다.

main.ts파일은 코드백 같은 형태로 파일과App.xaml.cs 비슷합니다. 애플리케이션이 실행될 때 표시되는 기본 구성 요소인 Theapp.component.html는 WPF의 것과MainWindow.xaml 매우 유사합니다.

WPFpackages.config 에는 모든 의존성을 Nuget 패키지로 정의하는 파일이 있고, Angular 에는 애플리케이션이 실행에 필요한 의존성을 담은 파일이 있습니다package.json. 이 파일에는package.json 테스트, 시작 또는 애플리케이션을 빌드할 때 콘솔에서 실행할 수 있는 스크립트 섹션도 포함되어 있습니다.

폴더를References 한번 보자. WPFReferences 에는 이 프로젝트에 추가된 모든 참조를 보여주는 노드가 있습니다. Angular 애플리케이션에서는 실제로 그 폴더가 될nodes_module 것입니다. WPF에서 왔다면, Angular 프로젝트에 얼마나 많은 의존성이 있는지 놀랄 수도 있습니다. 이 카드들은 사용에 의해 채워집니다.npm

불행히도 여기서 유사점은 끝납니다. 생성된 다른 파일 및 폴더 중 일부를 살펴보겠습니다.

e2e- 엔드 투 엔드 테스트를 의미하며, 로그인 프로세스와 같은 실제 시나리오를 포함한 통합 테스트 또는 테스트가 포함됩니다.
src- 애플리케이션 코드의 대부분이 여기에 있습니다.
assets- 이미지 또는 기타 자산을 포함하고 있습니다.
environment- 빌드 환경에 관한 정보를 포함합니다.
favicon.ico- 사이트에 있을 때 브라우저에 나타나는 아이콘.
karma.conf.js- 단위 테스트를 위한 구성 포함.
style.css- 애플리케이션에 맞는 전역 스타일을 가진 스타일시트는 WPF에서 정의App.xaml 된 리소스 사전과 유사합니다.

Run the application

이제 애플리케이션을 실행할 준비가 되었지만 Visual Studio Code에서는 F5 키만 누를 수 없습니다. 터미널 -> 새 터미널 메뉴를 클릭하거나 Ctrl + Shift + `를 눌러 Visual Studio Code 터미널을 엽니다. 애플리케이션을 실행하려면 다음 명령을 실행해야 합니다.

ng serve

애플리케이션이 시작된 후 다음 URL http://localhost:4200/의 브라우저에서 열 수 있습니다. 브라우저에서 앱이 자동으로 열리도록 하려면 다음 명령을 사용해야 합니다.

ng serve -o

이 경우-o 열려 있다는 뜻입니다. 애플리케이션을 시작하는 또 다른 방법은 npm 명령어를 사용하는 것입니다:

npm start

파일에 정의package.json 된 스크립트를 찾아서 다음 옵션을 추가start 해 명령어를-o 수정할 수 있습니다:

  "scripts": {
    "ng": "ng",
    "start": "ng serve -o",

첫 번째 Angular 애플리케이션은 다음과 같아야 합니다.

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.