AngularAngular 시작하기


비고

Angular (일반적으로 " Angular 2+ "또는 " Angular 2 "라고도 함)는 Google의 Angular 팀 과 개인 및 기업체의 공동체가 주도하는 TypeScript 기반 오픈 소스 프론트 엔드 웹 프레임 워크입니다. 복잡한 웹 애플리케이션을 개발하는 동안 개발자 워크 플로우의 일부분을 지원합니다. Angular는 AngularJS 를 구축 한 동일한 팀의 완전한 재 작성입니다. ¹

프레임 워크는 몇 개의 라이브러리 로 구성되며, 일부는 코어 (예 : @ 각도 / 코어 )와 일부 선택적 ( @ 각도 / 애니메이션 ) 라이브러리 로 구성됩니다.

Angularized 마크 업을 사용 하여 HTML 템플릿 을 작성하고 이러한 템플릿을 관리하기 위해 구성 요소 클래스를 작성하며 서비스 에서 응용 프로그램 논리를 추가하고 모듈 에서 복싱 구성 요소 및 서비스를 추가하여 각도 응용 프로그램을 작성 합니다 .

그런 다음 루트 모듈부트 스트랩 하여 앱을 시작합니다. Angular는 브라우저에서 애플리케이션 콘텐츠를 제공하고 제공 한 지침에 따라 사용자 상호 작용에 응답합니다.

앵귤러 어플리케이션 개발의 가장 기본적인 부분은 구성 요소 입니다. 구성 요소는 HTML 템플릿과 화면의 일부를 제어하는 ​​구성 요소 클래스의 조합입니다. 다음은 간단한 문자열을 표시하는 구성 요소의 예입니다.

src / app / app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent {
    name = 'Angular';
}

모든 구성 요소는 메타 데이터 객체를 사용하는 @Component 데코레이터 함수로 시작합니다. 메타 데이터 개체는 HTML 템플릿과 구성 요소 클래스가 함께 작동하는 방식을 설명합니다.

selector 속성은 index.html 파일의 사용자 정의 <my-app> 태그 내에 구성 요소를 표시하도록 Angular에 지시합니다.

index.html ( body 태그 내부)

<my-app>Loading AppComponent content here ...</my-app>

템플릿 속성은 <h1> 헤더 안에 메시지를 정의합니다. 메시지는 "Hello"로 시작하여 {{name}} 끝납니다. 이는 각도 보간 바인딩 표현식입니다. 런타임에 Angular는 {{name}} 을 구성 요소의 name 속성 값으로 바꿉니다. 보간 바인딩은이 문서에서 발견 할 수있는 다양한 각도 기능 중 하나입니다. 이 예제에서는 구성 요소 클래스의 name 속성을 'Angular' 에서 'World' 하고 어떤 결과가 발생하는지 확인합니다.

이 예제는 JavaScript의 상위 집합 인 TypeScript 로 작성되었습니다. Angular는 유형에 따라 도구를 사용하여 개발자 생산성을 지원하기 쉽기 때문에 TypeScript를 사용합니다. 또한 거의 모든 지원이 TypeScript 용 이므로 일반 JavaScript 를 사용하여 응용 프로그램을 작성하는 것은 어려울 것 입니다. 그러나 JavaScript로 앵귤러 코드 작성이 가능합니다. 이 가이드 는 방법을 설명합니다.

Angular 아키텍처 에 대한 자세한 내용은 여기를 참조하십시오.

버전

번역 출시일
5.0.0-beta.1 (최신) 2017-07-27
4.3.2 2017-07-26
5.0.0-beta.0 2017-07-19
4.3.1 2017-07-19
4.3.0 2017-07-14
4.2.6 2017-07-08
4.2.5 2017-06-09
4.2.4 2017-06-21
4.2.3 2017-06-16
4.2.2 2017-06-12
4.2.1 2017-06-09
4.2.0 2017-06-08
4.2.0-rc.2 2017-06-01
4.2.0-rc.1 2017-05-26
4.2.0-rc.0 2017-05-19
4.1.3 2017-05-17
4.1.2 2017-05-10
4.1.1 2017-05-04
4.1.0 2017-04-26
4.1.0-rc.0 2017-04-21
4.0.3 2017-04-21
4.0.2 2017-04-11
4.0.1 2017-03-29
4.0.0 2017-03-23
4.0.0-rc.6 2017-03-23
4.0.0-rc.5 2017-03-17
4.0.0-rc.4 2017-03-17
2.4.10 2017-03-17
4.0.0-rc.3 2017-03-10
2.4.9 2017-03-02
4.0.0-rc.2 2017-03-02
4.0.0-rc.1 2017-02-24
2.4.8 2017-02-18
2.4.7 2017-02-09
2.4.6 2017-02-03
2.4.5 2017-01-25
2.4.4 2017-01-19
2.4.3 2017-01-11
2.4.2 2017-01-06
2.4.1 2016-12-21
2.4.0 2016-12-20
2.3.1 2016-12-15
2.3.0 2016-12-07
2.3.0-rc.0 2016-11-30
2.2.4 2016-11-30
2.2.3 2016-11-23
2.2.2 2016-11-22
2.2.1 2016-11-17
2.2.0 2016-11-14
2.2.0-rc.0 2016-11-02
2.1.2 2016-10-27
2.1.1 2016-10-20
2.1.0 2016-10-12
2.1.0-rc.0 2016-10-05
2.0.2 2016-10-05
2.0.1 2016-09-23
2.0.0 2016-09-14
2.0.0-rc.7 2016-09-13
2.0.0-rc.6 2016-08-31
2.0.0-rc.5 2016-08-09
2.0.0-rc.4 2016-06-30
2.0.0-rc.3 2016-06-21
2.0.0-rc.2 2016-06-15
2.0.0-rc.1 2016-05-03
2.0.0-rc.0 2016-05-02

각도 "Hello World"프로그램

선수 과목 :

개발 환경 설정

시작하기 전에 환경을 설정해야합니다.

  • Node.js 및 npm 이 아직 시스템에 설치되어 있지 않은 경우 설치하십시오.

    터미널 / 콘솔 창에서 node -v 및 npm -v를 실행하여 적어도 노드 6.9.x 및 npm 3.xx를 실행 중인지 확인하십시오. 이전 버전에서는 오류가 발생하지만 최신 버전에서는 문제가 없습니다.

  • npm install -g @angular/cli 사용하여 Angular CLI를 전역으로 설치하십시오.


1 단계 : 새 프로젝트 만들기

터미널 창 (또는 Windows의 Node.js 명령 프롬프트)을 엽니 다.

다음 명령을 사용하여 새 프로젝트 및 스켈레톤 응용 프로그램을 만듭니다.

ng new my-app
 

여기서 ng 는 Angular입니다. 우리는 이와 같은 파일 구조를 얻습니다.

파일 Structure_1

파일 Structure_2

파일이 많이 있습니다. 우리는 지금 그들 모두에 대해 걱정할 필요가 없습니다.

2 단계 : 애플리케이션 서빙

다음 명령을 사용하여 응용 프로그램을 시작합니다.

ng serve
 

http://localhost:4200/ 에있는 브라우저를 자동으로 열어주는 -open (또는 간단히 -o ) 플래그를 사용할 수 있습니다.

ng serve --open
 

브라우저를 주소 http://localhost:4200/ . 다음과 같이 보입니다.

앱에 오신 것을 환영합니다.

3 단계 : 첫 번째 각도 구성 요소 편집

CLI가 우리를 위해 기본 각도 구성 요소를 작성했습니다. 이것은 루트 구성 요소이며 app-root 라고 app-root . ./src/app/app.component.ts 에서 찾을 수 있습니다.

구성 요소 파일을 열고 title 속성을 Welcome to app!! 변경하십시오 Welcome to app!! Hello World . 브라우저는 수정 된 제목으로 자동으로 다시로드됩니다.

원본 코드 : title = 'app';

원본 코드

수정 된 코드 : title 값이 변경되었습니다.

수정 된 코드

마찬가지로 ./src/app/app.component.html 변경 사항이 ./src/app/app.component.html .

원본 HTML

여기에 이미지 설명을 입력하십시오.

수정 된 HTML

여기에 이미지 설명을 입력하십시오.

./src/app/app.component.tstitle 값이 표시됩니다. 변경이 완료되면 브라우저가 자동으로 다시로드됩니다. 이런 식으로 보입니다.

안녕하세요 세계

주제에 대한 자세한 내용을 보려면이 링크를 방문 하십시오 .

앵글 -CARI를 이용한 각도 설치

이 예제는 Angular를 빠르게 설정하고 간단한 예제 프로젝트를 생성하는 방법입니다.

선수 과목 :

터미널을 열고 명령을 하나씩 실행하십시오.

npm install -g typings 또는 원 yarn global add typings

npm install -g @angular/cli 또는 yarn global add @angular/cli

첫 번째 명령은 설치 typings 라이브러리를 전 세계적으로 (그리고 추가 typings PATH에 실행). 두 번째는 실행 파일 추가, 전 세계적으로 각도 / CLI @ 설치 ng PATH에 있습니다.

새 프로젝트를 설정하려면

새 프로젝트를 설정할 폴더로 터미널을 탐색하십시오.

다음 명령을 실행하십시오.

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
 

즉, Angular로 간단한 예제 프로젝트를 만들었습니다. 이제 터미널에 표시된 링크로 이동하여 실행중인 링크를 볼 수 있습니다.

기존 프로젝트에 추가하려면

현재 프로젝트의 루트로 이동하십시오.

다음 명령을 실행하십시오.

ng init
 

그러면 프로젝트에 필요한 스캐 폴딩이 추가됩니다. 파일은 현재 디렉토리에 생성되므로 빈 디렉토리에서이 파일을 실행하십시오.

프로젝트를 로컬에서 실행하기

브라우저에서 실행되는 동안 응용 프로그램을보고 상호 작용하려면 프로젝트 파일을 호스팅하는 로컬 개발 서버를 시작해야합니다.

ng serve
 

서버가 성공적으로 시작된 경우 서버가 실행중인 주소가 표시되어야합니다. 일반적으로 다음과 같습니다.

http://localhost:4200
 

이 로컬 개발 서버는 Hot Module Reloading으로 연결되어 있으므로 HTML, 타이프 스크립트 또는 CSS를 변경하면 브라우저가 자동으로 다시로드됩니다 (그러나 원하는 경우 비활성화 할 수 있음).

구성 요소, 지시문, 파이프 및 서비스 생성

ng generate <scaffold-type> <name> (또는 단순히 ng g <scaffold-type> <name> ) 명령을 생성하면 각도 구성 요소가 자동으로 생성됩니다.

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false
 

angular-cli가 생성 할 수있는 스캐 폴드에는 여러 가지 유형이 있습니다.

비계 유형 용법
기준 치수 ng g module my-new-module
구성 요소 ng g component my-new-component
지령 ng g directive my-new-directive
파이프 ng g pipe my-new-pipe
서비스 ng g service my-new-service
수업 ng g class my-new-class
인터페이스 ng g interface my-new-interface
열거 형 ng g enum my-new-enum

형식 이름을 첫 번째 문자로 바꿀 수도 있습니다. 예 :

ng gm my-new-module 을 사용하여 새 ng gm my-new-module 을 생성하거나 ng gc my-new-component 를 사용하여 구성 ng gc my-new-component 를 만듭니다.

건물 / 묶기

Angular 웹 응용 프로그램을 모두 빌드하고 Apache Tomcat과 같은 웹 서버에 설치하려면 제작 플래그가 설정되어 있는지 여부에 관계없이 build 명령을 실행하면됩니다. 프로덕션은 코드를 최소화하고 프로덕션 설정을 최적화합니다.

ng build
 

또는

ng build --prod
 

그런 다음 프로젝트 루트 디렉토리에서 빌드가 들어있는 /dist 폴더를 찾습니다.

소규모 제작 번들의 이점을 얻으려면 Ahead-of-Time 템플릿 컴파일을 사용할 수도 있습니다.이 컴파일은 최종 빌드에서 템플릿 컴파일러를 제거합니다.

ng build --prod --aot
 

단위 테스트

Angular는 내장 된 단위 테스트를 제공하고 angular-cli로 작성된 모든 항목은 소비 될 수있는 기본 단위 테스트를 생성합니다. 단위 테스트는 jasmine을 사용하여 작성되고 카르마를 통해 실행됩니다. 테스트를 시작하려면 다음 명령을 실행하십시오.

ng test
 

이 명령은 프로젝트의 모든 테스트를 실행하고 소스 파일이 변경 될 때마다 응용 프로그램의 테스트 또는 코드 여부와 상관없이 다시 실행합니다.

자세한 정보는 angular-cli github 페이지를 참조하십시오.