제가 당신을 가정하고 있는데이 글을 읽는 것 모두가 이미 편안하게 각도 1 인, 말함으로써 서문 보자 ( 지금이라 AngularJS와 단순히 반대로, 각도 최신 버전). 즉, Angular 2+의 추가 사항과 주요 차이점에 대해 살펴 보겠습니다.
- 그들은 각도를 추가했습니다
cli.
을 실행하여 새 프로젝트를 시작할 수 있습니다 ng new [app name]. ng serve
자세한 내용은 https://github.com/angular/angular-cli를 실행하여 프로젝트를 제공 할 수 있습니다 .
- 각도 코드는 ES6 Typescript로 작성되며 브라우저에서 런타임에 Javascript로 컴파일됩니다.
이것에 대해 완전히 이해하려면 답변 맨 아래에있는 리소스 목록을 확인하는 것이 좋습니다.
- 프로젝트 구조
기본 구조에는 app/ts대부분의 작업을 수행 app/js할 app/js폴더와 .js.map확장명이 있는 폴더 파일이 있습니다. 브라우저는 기본 유형 스크립트를 읽을 수 없으므로 디버깅을 위해 ".ts"파일을 브라우저에 "매핑"합니다.
업데이트 : 베타 버전이 아닙니다. 대부분의 경우 프로젝트 구조가 약간 변경되었으며 각도 클리를 사용하는 경우 src/app/폴더 에서 작업
합니다. 초보자 프로젝트에는 다음이 있습니다.
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
index.ts
app.component.css : 특정 CSS 파일을 사용해야합니다.component.html
app.component.html : 뷰 (app.component.js에 선언 된 변수)
app.component.spec.ts : 테스트에 사용app.component.ts
app.component.ts : 바인딩하는 코드app.component.html
app.module.ts : 앱을 시작하고 모든 플러그인, 구성 요소, 서비스 등을 정의하는 위치입니다. 이것은 app.jsAngular 1 과 같습니다.
프로젝트 파일을 정의하거나 내보내는 데 사용되는 index.ts
추가 정보 :
프로 팁 : ng generate [option] [name]새로운 서비스, 구성 요소, 파이프 등을 생성하기 위해 실행할 수 있습니다 .
또한 tsconfig.json파일은 프로젝트의 TS 컴파일 규칙을 정의하므로 중요합니다.
내가 완전히 새로운 언어를 배워야 한다고 생각한다면 ? ... 어 ... 일종의 TypeScript는 JavaScript의 상위 집합입니다. 협박하지 마십시오. 개발을보다 쉽게하기 위해 존재합니다. 나는 단지 몇 시간 동안 그것을 가지고 놀고 난 후에 그것을 잘 이해하고 3 일 후에 그것을 모두 가지고있는 것처럼 느꼈습니다.
- Angular 1 지시문에서와 비슷한 방식으로 HTML에 바인딩합니다. 그래서 변수는 좋아
$scope하고 $rootScope더 이상 사용되지 않습니다.
이것은 당신이 암시했을 수도 있습니다. Angular 2는 여전히 MV * 이지만 코드를 템플릿에 바인딩하는 방법으로 ' components '를 사용 합니다. 예를 들어 다음을 수행하십시오.
import { Component } from '@angular/core';
@Component({
selector:'my-app',
template: '<h1> Hello World! </h1>'
})
export class AppComponent {}
여기서는이 import명령문을 v1 컨트롤러의 종속성 주입 이라고 생각합니다 . 당신이 사용 import하는 수입 (가) 어디, 패키지를 import {Component}당신이 만드는거야라고 component당신이 결합하고 싶습니다 HTML.
통지 @Component당신이 장식을 selector하고 template. 여기서는 v1을 사용하는 것처럼 사용 하는 selector것으로 생각 하십시오. 여기서의 이름은 HTML에 바인딩하는 데 사용 하는 이름입니다.$scopedirectivesselector
<my-app> </my-app>
어디에서 <my-app>사용자 정의 태그의 이름입니다 당신은 당신의 템플릿에 선언 있는지에 대한 자리 표시 자 역할을 할 것을 사용합니다. 즉) <h1> Hello World! </h1>. v1에서는 다음과 같이 표시됩니다.
HTML
<h1>{{hello}}</h1>
JS
$scope.hello = "Hello World!"
또한 이러한 태그 사이에 무언가를 추가하여 다음과 같이 로딩 메시지를 생성 할 수 있습니다.
<my-app> Loading... </my-app>
그러면 로딩 메시지로 " Loading ... " 이 표시됩니다 .
에 선언 된 template것은 태그 HTML에서 사용할 경로 또는 원시 HTML selector입니다.
Angular 1의 완전한 구현은 다음과 같습니다.
HTML
<h1 ng-controller="myCtrl">{{hello}}</h1>
v1에서는 다음과 같이 보입니다.
JS
angular.module('controller', [])
.controller('myCtrl', function( $scope) {
$scope.hello = "Hello World!"
})
이것이 제가 v2에 대해 정말로 좋아하는 것입니다. v1에서 지시어가 가파른 학습 곡선이라는 것을 알았고, 내가 알아 냈을 때조차도 CSS내가 의도 한대로 렌더링하지 않은 경우가 많았습니다 . 나는 이것이 더 간단하다는 것을 알았습니다.
V2를 사용하면 v1에서보다 쉽게 앱을 분할 할 수 있으므로 앱의 확장 성이 더 쉬워집니다. 각도 v1에 여러 개가있는 것이 아니라 모든 작업 부품을 하나의 파일에 넣을 수 있기 때문에이 방법이 마음에 듭니다.
프로젝트를 v1에서 v2로 변환하는 것은 어떻습니까?
v1 프로젝트를 v2로 업데이트하려면 개발 팀에서 들었던 내용에서 더 이상 사용되지 않는 얼룩을 삭제하고을 $scopes로 selector바꿉니다. 이 비디오가 도움이되었다는 것을 알았습니다. v2는 모바일 https://youtu.be/OZg4M_nWuIk 에 더 중점을두기 때문에 각도 팀과 나란히 작업하는 일부 Ionic 팀과 함께합니다 .
업데이트 : Angular 2의 공식 구현이 등장함에 따라 예제를 추가하여 업데이트했습니다.
업데이트 2 : 이것은 여전히 인기있는 질문 인 것처럼 보이므로 각도 2로 작업을 시작할 때 매우 도움이되는 리소스가 있다고 생각했습니다.
유용한 자료 :
ES6에 대한 자세한 내용은 New Boston의 ECMAScript 6 / ES6 새로운 기능 자습서-YouTube 재생 목록을 참조하십시오.
Typescript 함수를 작성하고 Javascript로 컴파일하는 방법을 보려면 Typescript language Playground를 확인하십시오.
Angular 1에 해당하는 Angular 1의 기능 분석을 통해 함수를 보려면 Angular.io-Cookbook -A1 A2 빠른 참조를 참조하십시오.