Angular 2 튜토리얼
Angular 2 시작하기

비고

버전

angular-cli로 angular2 설치하기

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

선수 과목 :

• Node.js v4 이상.
• npm v3 또는 그 이상 또는 실 .

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

npm install -g @angular/cli

또는

yarn global add @angular/cli

패키지 관리자 선택에 따라 다릅니다.

이전 명령은 실행 추가, 전 세계적으로 각도 / CLI @ 설치 ng PATH에 있습니다.

새 프로젝트를 설정하려면

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

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

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

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

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

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

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

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

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

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

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

건물 / 묶기

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

ng build

또는

ng build --prod

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

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

ng build --prod --aot

단위 테스트

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

ng test

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

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

angular-cli없이 Angular 2 시작하기.

각도 2.0.0-rc.4

이 예제에서는 "Hello World!" ( AppComponent )를 하나의 루트 구성 요소와 함께 사용하는 것이 AppComponent .

선수 과목 :

• Node.js v5 이상
• npm v3 이상

참고 : 콘솔 / 터미널에서 node -v 및 npm -v 를 실행하여 버전을 확인할 수 있습니다.

1 단계

프로젝트에 사용할 새 폴더를 만들고 입력하십시오. 이것을 angular2-example 이라고 angular2-example .

mkdir angular2-example
cd angular2-example

2 단계

앱 코드를 작성하기 전에 package.json , tsconfig.json , typings.json 및 systemjs.config.js 의 4 가지 파일을 추가합니다.

면책 조항 : 동일한 파일은 Official 5 Minute Quickstart 에서 찾을 수 있습니다.

package.json - npm을 사용하여 모든 종속성을 다운로드하고 간단한 스크립트 실행을 제공하여 간단한 프로젝트에서 더 쉽게 사용할 수 있도록합니다. (작업을 자동화하기 위해 Gulp 와 같은 것을 미래에 사용하는 것을 고려해야합니다.)

{
  "name": "angular2-example",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json - TypeScript 변환기를 구성합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json - 우리가 사용하고있는 라이브러리를 TypeScript에서 인식하게합니다.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

systemjs.config.js - systemjs.config.js 구성합니다 ( webpack 을 사용할 수도 있음 ).

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application's needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

3 단계

입력하여 종속성을 설치합시다.

npm install

콘솔 / 터미널에 있습니다.

4 단계

angular2-example 폴더 안에 index.html 만듭니다.

<html>
  <head>
    <title>Angular2 example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app></my-app>
  </body>
</html>

응용 프로그램은 my-app 태그 사이에 렌더링됩니다.

그러나 Angular는 렌더링 할 항목 을 아직 모릅니다. 그 사실을 알기 위해 우리는 AppComponent 정의 할 AppComponent 입니다.

5 단계

app 구성하는 구성 요소와 서비스 를 정의 할 수있는 app 이라는 하위 폴더를 만듭니다. (이 경우에는 AppComponent 코드와 main.ts 만 포함됩니다.)

mkdir app

6 단계

app/app.component.ts 파일을 만듭니다.

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

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <ul>
        <li *ngFor="let message of messages">
            {{message}}
        </li>
    </ul>
  `
})
export class AppComponent { 
    title = "Angular2 example";
    messages = [
        "Hello World!",
        "Another string",
        "Another one"
    ];
}

무슨 일이야? 첫째, Angular에이 컴포넌트의 HTML 태그와 템플릿을 제공하기 위해 사용하는 @Component 데코레이터를 @Component . 그런 다음 템플릿에 사용할 수있는 title 및 messages 변수가있는 AppComponent 클래스를 AppComponent .

이제 해당 템플릿을 살펴 보겠습니다.

<h1>{{title}}</h1>
<ul>
    <li *ngFor="let message of messages">
        {{message}}
    </li>
</ul>

우리는 h1 태그에 title 변수를 표시 한 다음 *ngFor 지시문을 사용하여 messages 배열의 각 요소를 보여주는 목록을 만들고 있습니다. 배열의 각 요소에 대해 *ngFor 는 li 요소 내에서 사용하는 message 변수를 만듭니다. 결과는 다음과 같습니다.

<h1>Angular 2 example</h1>
<ul>
    <li>Hello World!</li>
    <li>Another string</li>
    <li>Another one</li>
</ul>

7 단계

이제 우리는 Angular가 보는 첫 번째 파일이 될 main.ts 파일을 만듭니다.

app/main.ts 파일을 만듭니다.

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

우리는 bootstrap 함수와 AppComponent 클래스를 가져온 다음 bootstrap 을 사용하여 루트로 사용할 구성 요소를 Angular에 알립니다.

8 단계

첫 번째 앱을 시작할 때입니다. 유형

npm start

귀하의 콘솔 / 터미널. 이렇게하면 lite-server를 시작하고 브라우저 창에서 응용 프로그램을 열고 시계 모드에서 TypeScript 변환기를 실행하는 package.json 에서 준비된 스크립트가 실행됩니다 (따라서 .ts 파일이 이동되고 변경 사항을 저장할 때 브라우저가 새로 고침) .

지금 뭐야?

공식 Angular 2 가이드 와 StackOverflow의 문서 에있는 다른 항목을 확인하십시오.

AppComponent 를 편집하여 외부 템플릿, 스타일을 사용하거나 구성 요소 변수를 추가 / 편집 할 수도 있습니다. 파일을 저장 한 직후에 변경 사항을 확인해야합니다.

Visual Studio를 NPM 및 NODE 업데이트와 동기화 유지

1 단계 : Node.js의 다운로드 위치를 찾으십시오. 일반적으로 C : / program files / nodejs 아래에 설치됩니다.

2 단계 : Visual Studio를 열고 "도구> 옵션"으로 이동하십시오.

3 단계 : 옵션 창에서 "프로젝트 및 솔루션> 외부 웹 도구"로 이동합니다.

4 단계 : Node.js 파일 위치 (C : / program files / nodejs)와 함께 새 항목을 추가하려면 메뉴의 화살표 버튼을 사용하여 참조를 목록의 맨 위로 이동하십시오.

5 단계 : Visual Studio를 다시 시작하고 npm 명령 창에서 프로젝트에 대해 npm 설치를 실행합니다.

그 성가신 회사 프록시를 통해 얻으십시오.

XYZ MegaCorp의 Windows 작업 컴퓨터에서 Angular2 사이트를 실행하려고하면 회사 프록시를 통과하는 데 문제가있을 수 있습니다.

프록시를 통과해야하는 (적어도) 두 개의 패키지 관리자가 있습니다.

1. NPM
2. 타이핑

NPM의 경우 .npmrc 파일에 다음 행을 추가해야합니다.

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/

타이핑의 경우 .typingsrc 파일에 다음 행을 추가해야합니다.

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
rejectUnauthorized=false

이러한 파일은 아직 존재하지 않으므로 빈 텍스트 파일로 만들 수 있습니다. 그것들은 프로젝트 루트에 추가 될 수 있습니다 ( package.json 과 같은 장소 또는 %HOMEPATH% 에 넣을 수 있으며 모든 프로젝트에서 사용할 수 있습니다).

명백하지 않고 사람들이 프록시 설정이 작동하지 않는다고 생각하는 주된 이유는 도메인과 사용자 이름을 구분하는 \ 의 URL 인코딩 인 %5C 입니다. Steve Roberts에게 감사드립니다. 기업 프록시 .pac 뒤에 npm 사용

node.js / expressjs 백엔드로 Angular 2 시작하기 (http 예제 포함)

간단한 "Hello World!"를 만들 것입니다. node.js (expressjs) 백엔드가있는 Angular2 2.4.1 ( @NgModule 변경) 앱.

선결 요건

• Node.js v4.xx 이상
• npm v3.xx 이상 또는 원사

그런 다음 npm install -g typescript 또는 yarn global add typescript 을 입력하여 typescript를 yarn global add typescript 하여 전역으로 yarn global add typescript 를 설치하십시오.

로드맵

1 단계

우리의 앱을위한 새로운 폴더 (그리고 우리 백엔드의 루트 디렉토리)를 만드십시오. Angular2-express 라고 Angular2-express .

명령 줄 :

mkdir Angular2-express
cd Angular2-express

2 단계

node.js 앱의 package.json (종속성의 경우) 및 app.js (부트 스트래핑의 경우)를 만듭니다.

package.json :

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.13.3",
    "express": "^4.13.3"
  }
}

app.js :

var express = require('express');
var app = express();
var server = require('http').Server(app);
var bodyParser = require('body-parser');

server.listen(process.env.PORT || 9999, function(){
    console.log("Server connected. Listening on port: " + (process.env.PORT || 9999));
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );

app.use( express.static(__dirname + '/front' ) );

app.get('/test', function(req,res){ //example http request receiver
  return res.send(myTestVar);
});

//send the index.html on every page refresh and let angular handle the routing
app.get('/*',  function(req, res, next) {
    console.log("Reloading");
    res.sendFile('index.html', { root: __dirname }); 
});

그런 다음 npm install 또는 yarn 을 실행하여 종속성을 설치하십시오.

이제 우리의 백엔드 구조가 완성되었습니다. 프론트 엔드로 넘어 갑시다.

3 단계

우리의 프론트 엔드라는 이름의 폴더에 있어야 front 우리의 내부 Angular2-express 폴더에 있습니다.

명령 줄 :

mkdir front
cd front

백 엔드와 마찬가지로 프런트 엔드에도 종속 파일이 필요합니다. 다음 파일을 작성하십시오. package.json , systemjs.config.js , tsconfig.json

package.json :

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/compiler-cli": "^2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/platform-server": "^2.4.1",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.2",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "typescript": "2.0.2"
  }
}

systemjs.config.js :

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    defaultJSExtensions:true,
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*"
  ]
}

그런 다음 npm install 또는 yarn 을 실행하여 종속성을 설치하십시오.

이제 우리의 의존성 파일이 완성되었습니다. 우리의 index.html 로 이동하자 :

index.html :

<html>
  <head>
    <base href="/">
    <title>Angular2-express</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

이제 첫 번째 구성 요소를 만들 준비가되었습니다. front 폴더에 app 이라는 폴더를 만듭니다.

명령 줄 :

mkdir app
cd app

다음 파일을 main.ts , app.module.ts , app.component.ts

main.ts :

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.module.ts :

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from "@angular/http";

import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ 
    BrowserModule,
    HttpModule    
  ],
  declarations: [ 
    AppComponent
  ],
  providers:[ ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}

app.component.ts :

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

@Component({
  selector: 'my-app',
  template: 'Hello World!',
  providers: []
})
export class AppComponent { 
  constructor(private http: Http){
    //http get example
    this.http.get('/test')
     .subscribe((res)=>{
       console.log(res);
     });
  }
}

이 후에 typescript 파일을 javascript 파일로 컴파일하십시오. 현재 dir (Angular2-express 폴더 안에 있음)에서 2 레벨 위로 이동하고 아래 명령을 실행하십시오.

명령 줄 :

cd ..
cd ..
tsc -p front

우리의 폴더 구조는 다음과 같아야합니다.

Angular2-express
├── app.js
├── node_modules
├── package.json
├── front
│   ├── package.json
│   ├── index.html
│   ├── node_modules
│   ├── systemjs.config.js
│   ├── tsconfig.json
│   ├── app
│   │   ├── app.component.ts
│   │   ├── app.component.js.map
│   │   ├── app.component.js
│   │   ├── app.module.ts
│   │   ├── app.module.js.map
│   │   ├── app.module.js
│   │   ├── main.ts
│   │   ├── main.js.map
│   │   ├── main.js

마지막으로, Angular2-express 폴더 안에 명령 행에서 node app.js 명령을 실행 node app.js . 좋아하는 브라우저를 열고 localhost:9999 를 확인하여 앱을 확인하십시오.

각도 4로 뛰어 들자!

각도 4를 사용할 수 있습니다! 사실 Angular는 Angular 2 이후에 semver를 사용합니다. 변경 사항이 적용되었을 때 주 번호가 증가해야합니다. Angular 팀은 변경 사항을 깨는 기능을 연기하여 Angular 4와 함께 출시 할 예정입니다. 라우터에 이미 버전 3이 있으므로 Angular 3을 생략하면 코어 모듈의 버전 번호를 정렬 할 수 있습니다.

Angular 팀에 따라 Angular 4 응용 프로그램은 공간을 덜 소모하고 이전보다 빠르게 수행합니다. 애니메이션 패키지를 @ angular / core 패키지에서 분리했습니다. 애니메이션 패키지를 사용하지 않는 사람이라면 여분의 코드 공간이 프로덕션에서 끝나지 않을 것입니다. 템플릿 바인딩 구문은 이제 if / else 스타일 구문을 지원합니다. Angular 4는 Typescript 2.1 및 2.2의 최신 버전과 호환됩니다. 따라서 Angular 4는 더욱 흥미 진진합니다.

이제 프로젝트에서 앵귤러 4의 설정을하는 방법을 보여 드리겠습니다.

세 가지 방법으로 각도 설정을 시작해 보겠습니다.

Angular-CLI (Command Line Interface)를 사용하여 모든 종속성을 설치합니다.

• Angular 2에서 Angular 4로 마이그레이션 할 수 있습니다.

• github을 사용하여 Angular4 상용구를 복제 할 수 있습니다. (가장 쉬운 방법입니다.)

• Angular-CLI (명령 줄 인터페이스)를 사용한 각도 설정.

Angular-CLI를 사용하기 전에 컴퓨터에 노드가 설치되어 있는지 확인하십시오. 여기, 노드 v7.8.0을 사용하고 있습니다. 이제 터미널을 열고 Angular-CLI에 대해 다음 명령을 입력하십시오.

npm install -g @angular/cli

또는

yarn global add @angular/cli

사용하는 패키지 관리자에 따라 다릅니다.

Angular-CLI를 사용하여 Angular 4를 설치합시다.

ng new Angular4-boilerplate

cd Angular4-boilerplate 우리는 모두 각도 4로 설정되어 있습니다. 매우 쉽고 간단한 방법입니다 .😌

각도 2에서 각도 4로 이동하여 각도 설정

이제 두 번째 접근법을 살펴 보겠습니다. Angular 2를 Angular 4로 마이그레이션하는 방법을 보여 드리겠습니다. Angular 2 프로젝트를 복제하고 패키지의 Angular 4 Dependency로 Angular 2 종속성을 업데이트해야합니다. 다음과 같이 :

"dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/core": "^4.0.1",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/router": "4.0.2",
    "typescript": "2.2.2"
   }

이것들은 Angular 4의 주요 의존성입니다. 이제 npm을 설치 한 다음 npm을 실행하여 응용 프로그램을 실행할 수 있습니다. 내 package.json을 참조하십시오.

github 프로젝트의 각도 설정

이 단계를 시작하기 전에 컴퓨터에 git이 설치되어 있는지 확인하십시오. 아래 명령을 사용하여 터미널을 열고 angular4-boilerplate를 복제하십시오.

[email protected]:CypherTree/angular4-boilerplate.git

그런 다음 모든 종속성을 설치하고 실행하십시오.

npm install

npm start

그리고 Angular 4 설정이 완료되었습니다. 모든 단계는 매우 간단하므로 어느 단계에서든 선택할 수 있습니다.

angular4 - 상용구의 디렉토리 구조

Angular4-boilerplate
-karma
-node_modules
-src
   -mocks
   -models
      -loginform.ts
      -index.ts
   -modules
      -app
        -app.component.ts
     -app.component.html
      -login
    -login.component.ts
    -login.component.html
    -login.component.css
      -widget
     -widget.component.ts
     -widget.component.html
     -widget.component.css
    ........    
   -services
       -login.service.ts
    -rest.service.ts
   -app.routing.module.ts
   -app.module.ts
   -bootstrap.ts
   -index.html
   -vendor.ts
-typings
-webpack
-package.json
-tsconfig.json
-tslint.json
-typings.json 

디렉토리 구조에 대한 기본적인 이해 :

모든 코드는 src 폴더에 있습니다.

mocks 폴더는 테스트 목적으로 사용되는 모의 데이터 용입니다.

model 폴더에는 구성 요소에 사용 된 클래스와 인터페이스가 들어 있습니다.

modules 폴더에는 app, login, widget 등의 구성 요소 목록이 들어 있습니다. 모든 구성 요소에는 typescript, html 및 css 파일이 들어 있습니다. index.ts는 모든 클래스를 내보내는 데 사용됩니다.

services 폴더에는 응용 프로그램에 사용되는 서비스 목록이 들어 있습니다. 나는 휴식 서비스와 다른 구성 요소 서비스를 분리했다. 휴식 서비스에는 다양한 http 방법이 포함되어 있습니다. 로그인 서비스는 로그인 구성 요소와 휴식 서비스 간의 조정자로 작동합니다.

app.routing.ts 파일은 응용 프로그램의 가능한 모든 경로를 설명합니다.

app.module.ts는 app 모듈을 루트 구성 요소로 설명합니다.

bootstrap.ts는 전체 응용 프로그램을 실행합니다.

webpack 폴더에는 webpack 구성 파일이 들어 있습니다.

package.json 파일은 모든 종속성 목록 용입니다.

카르마에는 단위 테스트를위한 카르마 구성이 포함되어 있습니다.

node_modules 패키지 번들 목록을 포함합니다.

로그인 구성 요소로 시작하십시오. login.component.html에서

<form>Dreamfactory - Addressbook 2.0 
 <label>Email</label> <input id="email" form="" name="email" type="email" /> 
 <label>Password</label> <input id="password" form="" name="password" 
 type="password" /> 
 <button form="">Login</button>
</form>

login.component.ts에서

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Form, FormGroup } from '@angular/forms';
import { LoginForm } from '../../models';
import { LoginService } from '../../services/login.service';

@Component({
    selector: 'login',
    template: require('./login.component.html'),
    styles: [require('./login.component.css')]
})
export class LoginComponent {

    constructor(private loginService: LoginService, private router: Router, form: LoginForm) { }

    getLogin(form: LoginForm): void {
      let username = form.email;
      let password = form.password;
      this.loginService.getAuthenticate(form).subscribe(() => {
          this.router.navigate(['/calender']);
      });
    }
}

이 구성 요소를 index.ts에 내 보내야합니다.

export * from './login/login.component';

app.routes.ts에 로그인 할 경로를 설정해야합니다.

const appRoutes: Routes = [
   {
       path: 'login',
       component: LoginComponent
   },
   ........
   {
       path: '',
       pathMatch: 'full',
       redirectTo: '/login'
   }
];

루트 구성 요소에서 app.module.ts 파일을 사용하면 해당 구성 요소를 가져올 수 있습니다.

.....
import { LoginComponent } from './modules';
......
@NgModule({
    bootstrap: [AppComponent],
    declarations: [
       LoginComponent
       .....
       .....
       ]
      ..... 
  })
  export class AppModule { }

그 다음에 npm install과 npm이 시작됩니다. 자,가! 로컬 호스트의 로그인 화면을 확인할 수 있습니다. 어떤 어려움이있을 경우, angular4 - 상용구를 참조 할 수 있습니다.

기본적으로 Angular 4 응용 프로그램을 사용하면 건물 패키지가 줄어들고 응답 속도가 빨라집니다. 코딩에서 Angular 2와 정확히 비슷합니다.