How to Install Angular and Set Up Development Environment

https://www.tektutorialshub.com/angular/angular-installing-settingup-development-environment/

 

In this tutorial learn how to install Angular.
We use the Angular CLI to install the Angular,
which hides the lots of complexities of installing Angular.
But before installing Angular,
we need to Install the NPM Package manager and also decide on a Code Editior to use.

 

이 튜토리얼에서는 Angular를 설치하는 방법을 배웁니다.
 Angular CLI를 사용하여 Angular 설치의 많은 복잡성을 숨기는 Angular를 설치합니다. 
그러나 Angular를 설치하기 전에 NPM 패키지 관리자를 설치하고
사용할 코드 편집기도 결정해야 합니다.

 

Table of Contents

• Choosing and Installing an Editor
  • Installing Visual Studio Code
• Install Package Manager
  • Node Package Manager
    • Why it is Required
    • Installing NPM
    • NPM Configuration
• Choosing a Language
  • What is Typescript
  • Why Typescript
  • Features of Typescript
  • Installing Typescript
• Installing Angular
  • Installing Angular CLI
  • Finding the Angular CLI Version
• Module Loaders
• What is a Module Loader
  • Why Module Loader Required
• Summary
  • • References  

1. Choosing and Installing an Editor

You need to choose an editor for creating your angular projects. You can choose any editor of your choice including any editions of Visual Studio, Eclipse, Atom etc.

We will be using Visual Studio code as our editor.
Visual studio code is an open source project and free to use.
It can run on Windows, Linux & OS X.
It has IntelliSense support, easy integration with Git and support for debugging the applications.
It has a great support for Typescript

 

angular project를 생성하려면 편집기를 선택해야 합니다.
Visual Studio, Eclipse, Atom 등 의 모든 에디션을 포함하여 원하는 편집기를 선택할 수 있습니다 .

Visual Studio Code 를 편집기로 사용할 것 입니다. 
Visual Studio Code는 오픈 소스 프로젝트이며 무료로 사용할 수 있습니다. 
Windows, Linux 및 OS X에서 실행할 수 있습니다.
IntelliSense 지원, Git과의 손쉬운 통합 및 응용 프로그램 디버깅 지원이 있습니다. 
Typescript에 대한 훌륭한 지원이 있습니다.

Installing Visual Studio Code

You can download Visual Studio Code from the following link.
The installation procedure is an easy task and straightforward process.

2. Install Package Manager

To install Angular and dependencies, we are going to Node Package Manager or NPM.

Node Package Manager

The NPM is a Package Manager similar to what NuGet is for Visual Studio.
It is the Package manager of choice for the Javascript projects. 
NPM is used to install libraries, Packages & applications from Public repositories.

 

NPM 은 Visual Studio용 NuGet 과 유사한 패키지 관리자 입니다. 
Javascript 프로젝트에서 선택한 패키지 관리자입니다.
NPM 공용 리포지토리에서 라이브러리, 패키지 및 응용 프로그램을 설치하는 데 사용됩니다.

Why it is Required

We are going to use NPM to install Angular, Typescript,
and any other packages/modules required by our application.
NPM is can be used to upgrade these packages as and when necessary.
Without NPM, we have to download and install all these packages manually.

 

우리는 Angular, Typescript 그리고 우리 애플리케이션에 필요한 기타 모든 패키지/모듈을 설치하기 위해서  
NPM을 사용할 것입니다. NPM은 필요할 때 이러한 패키지를 업그레이드하는 데 사용할 수 있습니다. 
NPM이 없으면 이러한 모든 패키지를 수동으로 다운로드하여 설치해야 합니다.

Installing NPM

You need to install NPM on your machine if it is not already installed.
You can test whether the NPM is installed or not by using the command prompt

NPM이 컴퓨터에 아직 설치되어 있지 않은 경우 먼저 설치해야합니다
NPM 명령 프롬프트를 사용하여 설치되었는지 여부를 아래처럼 확인할 수 있습니다.

1 2 3

npm -v

If NPM is installed, then it will return the version No.
The current version No of the NPM is 6.13.7.  
You can download NodeJS and install it. NPM is installed as part of the NodeJS.
Click on the installing node for the instructions and procedures.

만약에 NPM 가 설치된 경우 버전 번호를 반환합니다.
현재 버전 번호 NPM6.13.7입니다. 
NodeJS 를 다운로드 하여 설치할 수 있습니다.
NPM 은 NodeJS의 일부로 설치됩니다.  지침 및 절차를 보려면 installing node를 클릭하십시오 .

NPM Configuration

The NPM requires the Package.json file,
which should contain the list of modules/packages used in your Application.
We need to add all the list of dependencies required by our application the configuration file.

Once the Package.json is created, we can install all the dependencies, by running the following command from the command prompt

 

NPM 은 Package.json 화일이 핑요합니다.
여기에는 애플리케이션에 사용된 모듈/패키지 목록 포함되어 있습니다. 
애플리케이션 구성 파일에 필요한 모든 종속성 목록을 추가해야 합니다.

일단 Package.json 생성되면 명령 프롬프트에서 다음 명령을 실행하여
모든 종속성을 설치할 수 있습니다.

1 2 3

npm install.

We will show the samplepackage.json required in our next tutorial.

 

3. Choosing a Language

We need to choose a language to write our angular application.
The Angular Applications must be written in Javascript.
This gives us few options, including the current version of Javascript (i.e. ES5),
 ES2015, Typescript, and Dart, etc.

The Typescript is a popular choice here.
The Angular code is also written using Typescript.
Many of the tutorials available on the internet also using Typescript.
So we will go with the popular choice

 

Angular 애플리케이션을 작성할 언어를 선택해야 합니다. 
Angular 애플리케이션은 자바스크립트로 작성해야 합니다
이것은 현재 버전을 포함하여 몇 가지 옵션을 제공합니다.
자바스크립트 (즉, ES5), ES2015, 타이프스크립트, 그리고 다트, 등.

Typescript 는 여기 에서 인기 있는 선택입니다.
Angular 또한 Typescript 를 사용하여 작성되었습니다. 
인터넷에서 사용할 수 있는 많은 자습서들도 있습니다.
그래서 우리는 인기있는 선택으로 갈 것입니다

What is Typescript

The Typescript is a superset of Javascript.
The Code written in Typescript cannot be used directly in the web browser.
It must be compiled to Javascript before running in the web browser.
This process is known as Transpiling.

Typescript is an Open source language. It is built and maintained by Microsoft.

타이프스크립트 는 Javascript의 상위 집합입니다 .
TypeScript로 작성된  코드는 웹 브라우저에서 직접 사용할 수 없습니다. 
다음으로 .웹 브라우저에서 실행하기 전에 Javascript로 컴파일해야 합니다.
이 과정은 Transpiling 으로 알려졌있습니다. 

TypeScript는 오픈 소스 언어입니다. Microsoft에서 만들고 유지 관리합니다.

Why Typescript

The Javascript is the default language of the web.
But it does come with few problems. It does not support types.
This makes it prone to run-time errors, it also makes it difficult to debug. 
Javascript does not support namespaces.
Code Organisation is another major issue with Javascript code. 
Typescript Solves all these problems.

Javascript는 웹의 기본 언어입니다. 그러나 몇 가지 문제가 있습니다. 
Type을 지원하지 않습니다. 이로 인해 런타임 오류가 발생하기 쉬우며 디버그하기도 어렵습니다.
네임스페이스를 지원하지 않습니다. 코드 구성은 또 다른 주요 문제입니다.

Typescript는 이 모든 문제를 해결했습니다.

Features of Typescript

Typescript also supports Modules, classes, Interfaces, and Generics.
This makes Typescript an ideal choice for our Angular Application.

 

Typescript Supports all current specifications of Javascript (i.e. ES5 & ES2015 ).
The major advantages of Typescript are that you can transpile it to either ES5 or ES2015.
Currently, not many browsers support ES2015.
So you have to transpile your code to ES5.
But in future, as more and more browser becomes ES2015 compliant,
you do not have to worry about upgrading your Javascript code.
Typescript does that to you behind the scene.

 

Typescript는 Modules, classes, Interfaces, and Generics 을 지원합니다. 
이 것이  Typescript를 Angular Appliction 을 이상적인 선택으로 만든 것입니다.

 

Typescript는 현재 모든사양의 Javascript를 지원합니다. (즉 ES5 & ES2015). 
Typescript의 주요 장점은 ES5, ES2015 둘 중 하나로 변환 할 수 있다는 것입니다.

현재 ES2015를 지원하는 브라우저는 많지 않습니다.따라서 코드를 ES5로 변환해야 합니다. 
하지만 앞으로 점점 더 많은 브라우저가 ES2015 규정을 준수하므로 업그레이드에 대해 걱정할 필요가 없습니다. 

Installing Typescript

The Typescript is automatically installed by Angular when we install the Angular CLI

Angular CLI also installs and maintains the Typescript configuration files,
i. e. tsconfig.json and typings.json.

 

Typescript는 Angular CLI를 설치할 때 Angular에 의해 자동으로 설치됩니다.

Angular CLI는 또한 설치 및 유지 관리합니다. Typescript 구성 파일, 즉 tsconfig.json그리고 typings.json.

 

4. Installing Angular

We install Angular using the Angular Command Line Interface (Angular CLI)

The Angular CLI helps us to quickly create an Angular application
with all the configuration files and packages in one single command.
It also helps us to add features (components, directives, services, etc)
to existing Angular applications.

 

Angular 명령줄 인터페이스(Angular CLI)를 사용하여 Angular를 설치합니다.

Angular CLI 를 사용 하면 단일 명령으로 모든 구성 파일과 패키지를 사용하여
Angular 애플리케이션을 빠르게 생성할 수 있습니다.
또한 기존 Angular 애플리케이션에 기능( 구성 요소 ,  지시문 ,  서비스 등)을 추가하는 데 도움이 됩니다.

The Angular CLI creates the Angular Application and uses 
Typescript, 
Webpack ( for Module bundling), 
Karma ( for unit testing), 
Protractor ( for an end to end testing).

Installing Angular CLI

We use the npm command to install the Angular

1 2 3

npm i -g @angular/cli@latest

The above command installs the latest version of Angular CLI in your machine.
Note that we have used the -g flag,
(which stands for global) installs the Angular CLI system-wide so that you can use it in your all projects.

You can also install the older version of Angular as shown below

 

위의 명령은 컴퓨터에 최신 버전의 Angular CLI를 설치합니다. 
-g 플래그(global의 약자)를 사용하면 모든 프로젝트에서 사용할 수 있도록 시스템 전체에 Angular CLI를 설치합니다 . 

1 2 3 4 5

md Angular6 cd Angular6 npm i @angular/cli@6.1.1

Finding the Angular CLI Version

You can find out the Currently Installed Angular CLI Version by Using the Command

아래 명령을 사용하여 현재 설치된 Angular CLI 버전을 확인할 수 있습니다.

1 2 3

ng --version

The latest version as of writing this article is 11.1.0.
The command above also gives the version of the node installed in your system. 
You can keep track of the latest Angular CLI release from this link 

The Angular CLI also installs the Typescript and all its dependencies.

이 글을 쓰는 시점의 최신 버전은 11.1.0입니다.
 위의 명령은 시스템에 설치된 노드의 버전도 제공합니다. 
이 링크 에서 최신 Angular CLI 릴리스를 추적할 수 있습니다. 

Angular CLI는 Typescript와 모든 종속 항목도 설치합니다.

With the installation of Angular CLI, you are ready to create your first Angular Application.
Angular CLI를 설치하면 첫 번째 Angular 애플리케이션을 만들 준비가 된 것입니다.

5. Module Loaders

The initial version of Angular 2 allowed us to choose the Module Loader.
But the later versions of Angular comes bundled with the Webpack module loader.

Hence, we do not need to install it.

 

Angular 2의 초기 버전에서는 모듈 로더를 선택할 수 있었습니다. 
그러나 Angular의 최신 버전은 Webpack 모듈 로더 와 함께 번들로 제공됩니다 .

따라서 설치할 필요가 없습니다.

What is a Module Loader

Module loader takes a group of modules with their dependencies and
merges them into a single file in the correct order.
This process is called as Module bundling.

모듈 로더 는 종속성이 있는 모듈 그룹을 가져와 올바른 순서로 단일 파일로 병합합니다. 
이 프로세스를 모듈 번들링 이라고 합니다.

Why Module Loader Required

In Our applications, we create a lot of javascript files.
We then include them in our main HTML file using the <script> tag.
When user requests for your file, the browser loads these file.
This is inefficient as it reduces the page speed as the browser requests each file separately.

우리의 응용 프로그램에서는 많은 자바 스크립트 파일을 만듭니다. 
그런 다음 <script> 태그 를 사용하여 기본 HTML 파일에 포함합니다 . 
사용자가 파일을 요청할 때 브라우저는 이 파일을 로드합니다. 
브라우저가 각 파일을 개별적으로 요청하므로 페이지 속도가 느려지므로 비효율적입니다.

The above problems can be solved by bundling several files together into one big file.
The entire file can be downloaded in one single request reducing the number of requests.
You can also minify the file (remove the extra spaces, comments, unnecessary characters, etc) and make files smaller

 

위의 문제는 여러 파일을 하나의 큰 파일로 묶어서 해결할 수 있습니다. 
단일 요청으로 전체 파일을 다운로드할 수 있어 요청 수를 줄일 수 있습니다. 
파일을 축소하고(여분의 공백, 주석, 불필요한 문자 등을 제거) 파일을 더 작게 만들 수도 있습니다.

 

There are many module loaders are available. The two more popular Module loaders are Webpack and SystemJS

많은 모듈 로더를 사용할 수 있습니다. 두 가지 더 인기 있는 모듈 로더는 다음과 같습니다.Webpack and SystemJS

 

Webpack is the Module Loader that Angular installs when we use the Angular CLI.
It also configures it, Hence we do not need to anything

 

Webpack는  Angular CLI 를 사용할 때 Angular가 설치한 모듈 로더 입니다. 그
것은 또한 그것을 구성하므로 우리는 아무것도 할 필요가 없습니다

6. Summary

In this tutorial, we looked some of the tools and third-party libraries, which are required to develop and run our Angular Application. In the next tutorial let us build our First Angular Application

이 튜토리얼에서는 Angular 애플리케이션을 개발하고 실행하는 데 필요한 몇 가지 도구와 타사 라이브러리를 살펴보았습니다. 다음 튜토리얼에서는 첫 번째 Angular 애플리케이션을 빌드해 보겠습니다.