AngularJS 2 Quick Start

머리말
Angular 2 는 Google 이 브 라 우 저 기반 의 복잡 한 애플 리 케 이 션 을 구축 하 는 차세 대 MV * 프레임 워 크 입 니 다.이 프로젝트 는 제 가 Angular 2 를 배 우 는 입문 프로젝트 입 니 다. 저 는 Angular 2 의 재 미 있 는 실현 방식 을 우호 적 으로 표현 하고 쉽게 이해 하고 입문 할 수 있다 고 생각 합 니 다.이 는 구성 요소 (Component), 모델 (Model), 서비스 (Service), 파이프 (Pipe), 전송 전송 (Input / Output), 이벤트 방송 (EventEmitter) 등 사용 방법 을 포함 하고 프로젝트 의 기본 구성 구조 등 을 소개 한다.
Anguar 2 는 ES6 나 TypeScript 로 작성 할 수 있 습 니 다. 저 는 여기 서 TypeScript 를 사 용 했 습 니 다.
만약 에 본 논문 에 관심 이 있 으 시 면 제 GitHub 홈 페이지 를 읽 는 것 도 즐 겁 고 본 논문 의 프로젝트 코드 주소 이기 도 합 니 다 (https://github.com/DotHide/angular2-quickstart）
아래 에 열거 한 것 은 이 프로젝트 의 몇 가지 중요 한 개념 이다.
1 Component
Angular 2 에서 Component 는 우리 가 페이지 에서 사용자 정의 요소 와 업무 논 리 를 구축 하 는 주요 방식 이다.Angular 1 에서 우 리 는 directives, controllers, scope 를 통 해 이 루어 졌 고 현재 이 모든 것 이 Component 에 결합 되 었 다.Component 에 서 는 selector 와 templete, 즉 구성 요소 가 적용 되 는 태그 와 대응 하 는 HTML 템 플 릿 을 정의 해 야 합 니 다.

// Component   Angular2      ，       import
import {Component} from "angular2/core";

@Component({
  selector: 'todo-input',
  template: `
  

    

    
    
  
  `
})

그 중에서 templete 는 여러 줄 템 플 릿 의 용법 을 사 용 했 습 니 다. 즉, \ '템 플 릿 으로 끝 표 시 를 시작 합 니 다.
구성 요 소 를 정의 한 후 일치 하 는 클래스 를 정의 해 야 합 니 다:

export class TodoInput {
  
}

클래스 이름 은 UpperCamelCase 를 사용 합 니 다. 예 를 들 어 TodoInput, 파일 이름 및 selector 는 Dashcase 를 사용 합 니 다. 예 를 들 어 todo - input (. ts)
모든 Component 를 사용 하기 전에 import 가 필요 합 니 다. 구성 요소 의 구성 요소 라면 @ Component 에서 directives 를 정의 해 야 합 니 다. 예 를 들 어:

@Component({
  selector: 'todo-app',
  directives: [TodoInput],
  templete: '...'
})

2 Model
모델 이 비교적 간단 하 므 로 통 지 는 구조 함수 와 관련 방법 만 잘 정의 하면 된다.

export class TodoModel{
  constructor(
     public title:string = "",
     public status:string = "started"
  ){}

  toggle():void{
     this.status = this.status == 
       'completed'? 'started': 'completed';
  }
}

이 구조 함수 의 매개 변 수 는 Public 를 정의 합 니 다. 다른 클래스 에 접근 할 수 있 습 니 다.
3 Service
서 비 스 는 보통 성명 @Injectable() 이 필요 하고 일반 서비스 도 import 모델 류 를 사용 합 니 다.

import {Injectable} from "angular2/core";
import {TodoModel} from "../models/todo-model";

@Injectable()
export class TodoService {
  todos:TodoModel[] = [
    new TodoModel("arm"),
    new TodoModel("battle"),
    new TodoModel("code", "completed"),
    new TodoModel("eat"),
    new TodoModel("fly"),
    new TodoModel("sleep", "completed")
  ];

  addTodoItem(item:TodoModel) {
    ...
  }

  toggleTodo(todo: TodoModel) {
    ...
  }
}

성명 Injectable 후 입구 함수 에서 inject 관련 서비스 가 필요 합 니 다.

bootstrap(TodoApp, [TodoService]);

4 ngFor
즉, Angular 1 중의 ng-repeat 는 여기 서 사용 하 는 방법 에 차이 가 있 습 니 다. 예 를 들 어:

  

    {{ todo }}
  

ngFor 를 사용 할 때 앞 에 플러스 (번 호 는 이 동작 이 템 플 릿 의 변 화 를 일 으 킬 것 임 을 나타 낸다) 를 추가 해 야 합 니 다. 순환 하 는 개체 요소 가 인용 되 기 전에 \ # 번 호 를 추가 해 야 합 니 다. 이것 은 모두 문법 적 변화 입 니 다.
5 ngModel ngModel 양 방향 바 인 딩 에 사용 되 고 [(ngModel)]= 을 사용 하여 정의 합 니 다. [()] 는 양 방향 바 인 딩 을 정의 하 는 데 사 용 됩 니 다.

@Component({
  selector: 'todo-input',
  template: `
  

    

    
    
  
  `
})

export class TodoInput {
  todoItem:TodoModel = new TodoModel();
  constructor() {}
}

ngModel 을 사용 하기 전에 class 에서 변 수 를 정의 해 야 합 니 다. 변 수 는 모든 형식 일 수 있 습 니 다.
6 Pipe
Pipe 를 이용 하여 (filter) 데 이 터 를 선별 합 니 다. Angualr 1 과 매우 유사 합 니 다. 여 기 는 | 기 호 를 사용 하여 선별 을 정의 합 니 다. 예 를 들 어:

// todo-list.ts
...
@Component({
  selector: 'todo-list',
  pipes: [SearchPipe],
  directives: [TodoItemRender],
  template: `

    

      

      
      
      
    
  
`
})

// search-pipe.ts
...
@Pipe({
  name: 'search'
})

export class SearchPipe {
  transform(items) {
    //       ，      ，        s        
    return value.filter((item) => {
      return item.title.startsWith('s');
    });
  }
}

Pipe 를 사용 할 때 는 먼저 Component 에서 pipes 속성 을 정의 한 다음 html 에서 Pipe 의 name 을 사용 해 야 합 니 다.
물론 이곳 의 Pipe 는 파 라 메 터 를 전달 할 수 있 고 위의 예 를 들 어 search 의 내용 을 설정 할 수 있 습 니 다. 예 를 들 어:

// search-pipe.ts
...
@Pipe({
  name: 'search'
})

export class SearchPipe {
  //    term   
  transform(items, [term]) {
    //       ，      ，        s        
    return value.filter((item) => {
      return item.title.startsWith(term);
    });
  }
}

여기 서 두 단계 로 나 누 어 수정 합 니 다. 먼저 SearchPipe 류 의 방법 을 수정 하고 term 인 자 를 추가 한 다음 에 사용 처 의 코드 를 수정 합 니 다.

// todo-list.ts
...
@Component({
  selector: 'todo-list',
  pipes: [SearchPipe],
  directives: [TodoItemRender],
  template: `

    

      

      
      
      
    
  
`
})

여기에서 우 리 는 먼저 search 가 할당 하 는 것 을 보 았 습 니 다. 우 리 는 이 할당 을 입력 항목 (@ Input) 으로 바 꾸 었 습 니 다. 이것 도 Angular 2 의 특수 한 용법 입 니 다.

// todo-list.ts
import {Component, Input} from "angular2/core";
...
@Component({
  selector: 'todo-list',
  pipes: [SearchPipe],
  directives: [TodoItemRender],
  template: `

    

      

      
      
      
    
  
`
})

export class TodoList {
  @Input() term; //            
  constructor(public todoService: TodoService) {
     
  }
}

따라서 TodoList 구성 요 소 를 사용 하 는 곳 (즉 외부) 에서 관련 속성 을 정의 해 야 합 니 다.

...

검색 상자 에서 입력 한 값 (이전 term) 을 표시 합 니 다. todo - list [term] 속성 에 할당 되 어 TodoList 류 의 입력 항목 에 전 달 됩 니 다.
7 EventEmitter
이벤트 퍼 뜨리 기, 또 하나의 Angular 2 의 새로운 기능 은 구성 요소 내부 의 이 벤트 를 위로 퍼 뜨리 는 데 사 용 됩 니 다. 예 를 들 어:

@Component({
  selector: 'todo-item-render',
  template: `
  
  {{ todo.title }}
  Toggle
  `
})
export class TodoItemRender {
  @Input() todo;
  @Output() toggle = new EventEmitter();
}

이 곳 의 toggle 은 EventEmitter 대상 으로 Output 으로 명 시 된 후, 단추 의 click 이 벤트 를 todo - list 에서 이 구성 요소 의 toggle 이벤트 로 위로 퍼 뜨 릴 수 있 습 니 다. 그 중 $event 은 TodoItemRender 클래스 에서 명 시 된 todo (이 todo 는 외부 입력) 이 고, 나중에 toggle 이벤트 에 대응 하 는 업무 논 리 를 촉발 합 니 다.
시동 을 걸다
다음 순서에 따라 항목 을 열 어 주 십시오:

#    TypeScript
$ npm install -g tsd typescript

#       
$ npm install

#     
$ npm start

가십
제3자 라 이브 러 리 를 호출 하 는 데 시간 이 좀 걸 렸 으 니 여기 도 기록 해 보 세 요.lodash 라 이브 러 리 를 추가 하 는 것 을 예 로 들 면 다음 과 같은 5 가지 절 차 를 거 쳐 야 합 니 다.
Step 1 $ npm install lodash --save
설치 후 package.json 파일 에서 보 세 요. loash 가 있 으 면 다음 단계 로 들 어 갑 니 다.
Step 2 $ tsd install lodash
tsd 명령 행 도구 가 없 으 면 먼저 설치 $ npm install -g tsdStep 3 index.html 파일 에서 참조:

Step 4 System.config() 에 추가 path:

System.config({
  paths: {
    lodash: './node_modules/lodash/lodash.js'
  }
});

Step 5
사용 할 곳 import:

import * as _ from "lodash";

...

function (){
   _.sum([4, 2, 8, 6]); // → 20
}

참조 링크

Angular 2 5mins Quickstart

Angular 2 Fundaments