Angle2_AngularJS 사용에 대한 간략한 소개

처음부터 시작하여 Typescript를 사용하여 매우 간단한 AngularJs 2 애플리케이션을 구축해 보겠습니다.

먼저 데모 실행

이 DEMO를 실행해 보세요. 먼저 AngularJS2 애플리케이션을 체험해 보겠습니다.

본 애플리케이션의 파일 구조는 다음과 같습니다

angular2-app
|_ app
| |_ app.component.ts
| |_ main.ts
|_ index.html
|_ license.md

요약하면 앱 파일 아래에 index.html 파일과 Typescript 파일 2개가 들어있어요!

아래에서는 이러한 프로그램을 단계별로 구축해 보겠습니다.

1. 개발 환경 구성
2. Angular 초기화 구성요소 작성
3. 메인 index.html 페이지를 제어하도록 지시
4. index.html 페이지 쓰기

개발환경 설정

폴더 생성

mkdir angular2-app
cd  angular2-app

TYPESCRIPT 구성

Typesript를 컴파일하려면 몇 가지 특별한 설정이 필요합니다.
새 tsconfig.json 파일을 생성하여 프로젝트 루트 디렉터리에 배치하고 구성을 입력합니다

{
 "compilerOptions": {
  "target": "es5",
  "module": "system",
  "moduleResolution": "node",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": false,
  "noImplicitAny": false
 },
 "exclude": [
  "node_modules",
  "typings/main",
  "typings/main.d.ts"
 ]
}

이 tsconfig.json에 대해서는 나중에 부록에서 자세히 설명하겠습니다

타입스크립트 입력

일부 Javascript 환경 변수와 구문을 상속하는 Javascript 라이브러리가 많이 있지만 Typescript 컴파일러는 기본적으로 이를 지원할 수 없습니다. 따라서 우리는 Typescript 유형 정의 파일인 d.ts 파일(예: Typings.json)을 사용하여 이러한 호환성 문제를 해결합니다.

typings.json 파일을 생성하여 프로젝트 루트 디렉터리에 넣습니다

{
 "ambientDependencies": {
  "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
 }
}

마찬가지로, 부록에서 더 자세한 설명이 있을 예정입니다

필요한 라이브러리 추가

npm을 사용하여 종속 라이브러리를 관리하는 것이 좋습니다.
프로젝트 루트 디렉터리

에 package.json 파일을 만듭니다.

{
 "name": "angular2-quickstart",
 "version": "1.0.0",
 "scripts": {
  "start": "concurrent /"npm run tsc:w/" /"npm run lite/" ",  
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "lite": "lite-server",
  "typings": "typings",
  "postinstall": "typings install" 
 },
 "license": "ISC",
 "dependencies": {
  "angular2": "2.0.0-beta.7",
  "systemjs": "0.19.22",
  "es6-promise": "^3.0.2",
  "es6-shim": "^0.33.3",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.2",
  "zone.js": "0.5.15"
 },
 "devDependencies": {
  "concurrently": "^2.0.0",
  "lite-server": "^2.1.0",
  "typescript": "^1.7.5",
  "typings":"^0.6.8"
 }
}

부록에 더 자세한 설명이 있습니다

이러한 종속성 패키지를 설치하려면

을 실행하세요.

npm install

이렇게 해서 개발 환경 설정이 완료되었습니다.

최초의 ANGULAR 구성요소

Component는 Angular의 가장 기본적인 개념입니다. 구성 요소에는 정보를 표시하거나 사용자 상호 작용을 완료하는 데 사용하는 페이지인 보기가 포함되어 있습니다. 기술적으로 말하면 구성 요소는 템플릿 보기를 제어하는 ​​클래스입니다. 많은 구성 요소는 개발 중인 응용 프로그램에서 작성됩니다. 이는 컴포넌트 작성에 대한 첫 번째 시도이므로 가능한 한 간단하게 유지하려고 했습니다.

애플리케이션 소스코드 하위 디렉토리 생성

우리는 프로젝트 루트 디렉터리의 app 하위 디렉터리에 프로그램을 배치하는 데 익숙하므로 먼저 앱 폴더를 만듭니다.

mkdir app
cd  app

컴포넌트 파일 생성

app 폴더 하위에 app.comComponent.ts 파일을 생성하고 다음 내용을 입력하세요

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

이 파일을 자세히 살펴보겠습니다. 파일의 마지막 줄에 클래스를 정의합니다.

컴포넌트 클래스

이 파일 수준에서는 아무 작업도 수행하지 않는 빈 구성 요소 클래스 AppComponent를 만듭니다. 실제로 애플리케이션을 개발할 때 일부 속성 및 메서드 논리를 추가하는 등 이 클래스를 확장할 수 있습니다. 이 AppComponent 클래스가 비어 있는 이유는 시작 프로그램에서 이를 사용하여 아무 작업도 수행할 필요가 없기 때문입니다.

모듈

Angular 애플리케이션은 모듈식입니다. 여기에는 특정 기능을 수행하는 많은 모듈 파일이 포함되어 있습니다.
대부분의 프로그램 파일은 구성 요소와 같은 것을 내보냅니다. app.comComponent.ts 파일은 AppComponent

를 내보냅니다.

내보내기 클래스 AppComponent { }
내보내기는 파일을 모듈로 변환합니다. 파일 이름(확장자 없음)은 일반적으로 모듈 이름입니다. 따라서 app.comComponent는 첫 번째 모듈의 이름입니다.

일부 복잡한 애플리케이션에는 AppComponent에서 상속되는 하위 구성 요소가 있으며 많은 파일과 모듈이 있습니다. 그러나 우리의 빠른 시작 프로그램에는 그렇게 많은 것이 필요하지 않으며 하나의 구성 요소로 충분합니다.

구성 요소가 다른 구성 요소에 종속되는 경우 Typescript 애플리케이션에서 다른 모듈을 도입해야 할 때 해당 모듈을 직접 가져올 수 있습니다. 예:

'./app.comComponent'에서 {AppComponent} 가져오기
Angular는 모듈 모음인 모듈이기도 합니다. 따라서 Angle의 일부 기능이 필요할 때 Angular도 도입합니다.

구성요소 주석

클래스에 주석을 추가하면 클래스는 Angular 구성 요소가 됩니다. Angular는 주석을 사용하여 뷰를 작성하는 방법과 구성 요소가 애플리케이션의 나머지 부분과 통합되는 방법을 파악합니다.

우리는 구성 요소에 대한 주석을 정의하기 위해 구성 요소 메서드를 사용합니다. 이 방법을 사용하려면 먼저 angle2/core를 도입해야 합니다.

import {Component} from 'angular2/core';

Typescript에서는 클래스에 주석을 추가합니다. 주석을 추가하는 방법은 매우 간단합니다.

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

@Component 告诉Angular这个类是一个组件。 里面的参数有两个, selector 和 template.

selector参数是一个 css 选择器， 这里表示选择 html 标签为 my-app的元素。 Angular 将会在这个元素里面展示AppComponent 组件。

记住这个 my-app 元素，我们会在 index.html 中用到

template控制这个组件的视图， 告诉Angular怎么去渲染这个视图。 现在我们需要让 Angular去加载这个组件

初始化引导

在 app 文件夹下创建 main.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);
我们需要做两个东西来启动这个应用

Angular自带的 bootstrap 方法

我们刚刚写好的启动组件

把这个两个统统 import进来，然后将组件传递给 bootstrap 方法。

附录中会详细讲解 为什么我们从 angular2/platform/browser中引入bootstrap 方法，还有为什么会创建一个main.ts文件

现在万事俱备，只差东风啦！

添加 INDEX.HTML 文件

首先回到项目的根目录，在根目录中创建index.html

<html>
 <head>
  <title>Angular 2 QuickStart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

  <!-- 2. Configure SystemJS -->
  <script>
   System.config({
    packages: {    
     app: {
      format: 'register',
      defaultExtension: 'js'
     }
    }
   });
   System.import('app/main')
      .then(null, console.error.bind(console));
  </script>

 </head>

 <!-- 3. Display the application -->
 <body>
  <my-app>Loading...</my-app>
 </body>

</html>

HMTL中三个部分需要说明一下：

加载我们需要的 javascript库， 附录中会有详细的介绍

配置了 System 并让他import 引入 main 文件

添加 my-app 这个HTML元素，这里才是加载我们Angular实例的地方！

我们需要一些东西来加载应用的模块，这里我们使用 SystemJs。 这里有很多选择，SystemJS不一定是最好的选择，但是这个挺好用。

SystemJs的具体使用不在我们的快速入门教程里，在附录中会有一个剪短的说明。

当Angular调用main.ts文件中的 bootstrap方法， 它读取 AppComponent 的注解，找到 my-app 这个HTML元素， 并将template 渲染进去。

编译然后运行

只需要在终端中输入

npm start

程序将会将Typescript编译成 Javascript ，同事启动一个 lite-server， 加载我们编写的index.html。 显示 My First Angular 2 App.

最终的结构

|_ angular2-quickstart
|_ app
| |_ app.component.ts
| |_ main.ts
|_ node_modules …
|_ typings …
|_ index.html
|_ package.json
|_ tsconfig.json
|_ typings.json