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 라우팅을 추가하시겠습니까?"라는 메시지가 표시됩니다. 이 데모에서는 NO를 선택하겠습니다. 다음으로 어떤 스타일시트 형식을 사용할 것인지 묻는 질문이 있습니다. 지금은 기본 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.xaml 파일의 StartupUri와 유사하고 앱이 시작될 때 표시할 첫 번째 페이지를 지정하는 <app-root></app-root> 섹션이 포함되어 있습니다.

기술적으로 일어나는 일은 index.html로 이동하면 AppModule을 로드하는 main.ts JavaScript 파일이 호출되는 것입니다. Angular 애플리케이션은 모듈과 구성 요소로 구성됩니다. 기본적으로 루트 모듈과 루트 구성 요소가 제공되며 이는 app 폴더 아래에 위치하게 됩니다. main.ts 파일이 호출되면 app 폴더의 app.module.ts 파일에 있는 AppModule 부트스트랩하겠습니다.

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

main.ts 파일은 코드 숨김과 비슷하다는 점에서 App.xaml.cs 파일과 유사합니다. 애플리케이션이 실행될 때 표시되는 기본 구성 요소인 app.component.html은 WPF의 MainWindow.xaml과 매우 유사합니다.

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

References 폴더를 살펴보겠습니다. WPF에는 이 프로젝트에 추가된 모든 참조를 표시하는 References 노드가 솔루션에 있습니다. 실제로 nodes_module 폴더가 될 Angular 애플리케이션에서. 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 open을 의미합니다. 애플리케이션을 시작하는 또 다른 방법은 npm 명령을 사용하는 것입니다.

npm start

package.json 파일에 정의된 스크립트를 찾고-o 옵션을 추가하여 start 명령을 수정할 수 있습니다.

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

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

Additional Resources

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