Angular JS 대 Angular JS

Angular JS 대 Angular JS

닫았습니다. 이 질문은의견 기반의현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하시겠습니까?이 게시물을 편집하여 사실과 인용문으로 답변할 수 있도록 질문을 업데이트하십시오.

6년 전에 문을 닫았어요

이 질문을 개선하다

몇 달 전에, 나는 Angular를 공부하기로 결심했다.조금 더 진행해서 앱을 만들고 있을 때, Angular 2가 Developer preview에 있다는 것을 알게 되었기 때문에 출시되는 것은 시간문제입니다.Angular 2는 Angular 1과 호환이 되지 않고 변경도 많기 때문에, Angular 1.x로 개발을 계속하는 것이 좋을까요, 아니면 Angular 2로 개발을 시작하는 것이 좋을까요?

항상 최신 버전이나 최신 언어를 사용할 필요는 없지만, 이 경우 앱은 아직 작기 때문에 문제없이 변경할 수 있었습니다.

이 글을 읽어보실 분들은 이미 Angular 1(새로운 버전에서는 단순히 Angular가 아닌 현재 AngularJS로 불리고 있습니다)에 만족하고 계실 거라고 생각합니다.그렇다면, Angular 2+의 몇 가지 추가 사항과 주요 차이점에 대해 살펴보겠습니다.

1. 은 각진 것을 추가했다.cli.

는 새 를 시작할 수 .ng new [app name] 하려면 , 을 실행합니다.ng serve자세한 내용은 이쪽:https://github.com/angular/angular-cli

2. 각도 코드는 ES6 Typescript로 작성되어 실행 시 브라우저의 Javascript로 컴파일 됩니다.

이를 완전히 이해하려면 답변 하단에 있는 리소스 목록을 확인하는 것이 좋습니다.

3. 프로젝트 구조

★★★★★★★★★★★★★★★★★★★★★★★,app/ts대부분의 작업을 수행할 폴더와 app/js을 사용하다 app/js더더: :.js.map 수 없기 .브라우저가 네이티브 타이프스크립트를 읽을 수 없기 때문에 디버깅을 위해 ".ts" 파일을 브라우저에 "매핑"합니다.

업데이트: 베타 버전이 만료되었습니다.프로젝트 구조가 조금 바뀌었습니다.대부분의 경우 angular cli를 사용하면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.context.ts:이를 통해 앱을 시작하고 모든 플러그인, 구성 요소, 서비스 등을 정의할 수 있습니다.이것은, 다음의 것과 동등합니다.app.js 1 도 11 11 1

프로젝트 파일 정의 또는 내보내기에 사용되는 index.ts

가가: :
tip : : 실행 가능ng generate [option] [name]새로운 서비스, 컴포넌트, 파이프 등을 생성할 수 있습니다.

, ,,tsconfig.json파일은 프로젝트의 TS 컴파일 규칙을 정의하기 때문에 중요합니다.

만약 내가 완전히 새로운 언어를 배워야 한다고 생각한다면... 어, 일종의 타입스크립트는 자바스크립트의 슈퍼셋이야.겁먹지 마세요.그것은 당신의 개발을 용이하게 하기 위한 것입니다.불과 몇 시간 동안 가지고 놀았더니 잘 파악한 것 같았고, 3일 만에 모두 다운되었습니다.

4. Angular 1 angular렉HTML 。 ''처럼 변화가 심해요.$scope ★★★★★★★★★★★★★★★★★」$rootScope더 이상 사용되지 않습니다.

이건 당신이 암시했을 수도 있어요Angular 2는 여전히 MV*이지만 템플릿에 코드를 바인딩하는 방법으로 '구성 요소'를 사용합니다. 예를 들어 다음과 같이 하십시오.

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

    @Component({
         selector:'my-app',
         template: '<h1> Hello World! </h1>'
    })
    
    export class AppComponent {}

에서는, 기서,,를 생각해 주세요.import합니다.v1은 의존관계 주입입니다.은 you 다 you you youimport패키지를 Import 할 수 있습니다.import {Component}당신이 만든다고 합니다.component게 좋을 것 같아요.HTML.

점에 주의:@Component가 selector ★★★★★★★★★★★★★★★★★」template 기에는,를 해 주세요.selector$scope v1 을 사용하는 할 수 있습니다.directives서, 「」의 을 합니다.selector 에 할 때 입니다.

<my-app> </my-app>

서 ★★★★★<my-app> 템플릿에 선언된 의 플레이스홀더로 됩니다.<h1> Hello World! </h1> v1 v1이 되다,

HTML

<h1>{{hello}}</h1>

JS

$scope.hello = "Hello World!"

또한 이러한 태그 사이에 다음과 같은 내용을 추가하여 로드 메시지를 생성할 수도 있습니다.

<my-app> Loading... </my-app> 

그런 다음 "로드 중..."이라고 표시됩니다." 로딩 메시지입니다.

에서 되어 있는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!"
})

대 2의 관계입니다.는 저에게 되었습니다.또, 그것을 에도, 저는 v1을 가지고 .CSS내가 의도한 대로 하지 않았다.이게 훨씬 더 간단하다고 생각해요.

V2를 사용하면 v1보다 쉽게 앱을 해체할 수 있으므로 앱의 확장성이 향상됩니다.각진 v1에 여러 개의 작업 부품이 있는 것이 아니라 모든 작업 부품을 하나의 파일로 만들 수 있기 때문에 이 접근 방식이 마음에 듭니다.

프로젝트를 v1에서 v2로 변환하는 것은 어떻습니까?

---

는 폐지된 하고 v1을 $scope는 을 sselectors. 나는 이 비디오가 도움이 된다는 것을 알았다.v2가 모바일 https://youtu.be/OZg4M_nWuIk에 더 중점을 두고 있기 때문에 각 팀과 함께 일하는 일부 Ionic 팀원들과 함께 있습니다.

업데이트: Angular 2의 공식 구현이 표면화되었기 때문에 예를 추가하여 업데이트했습니다.

업데이트 2: 이 질문은 여전히 인기 있는 질문인 것 같습니다.그래서 저는 Angular 2를 사용하기 시작했을 때 도움이 되는 리소스를 찾고 싶었습니다.

#유용한 자원:

ES6에 대한 자세한 내용은 The New Boston의 ECMAScript 6 / ES6 New Features Tutorials - YouTube Playlist를 참조하십시오.

타이프스크립트 함수를 작성하고 자바스크립트로 컴파일하는 방법을 보려면 타이프스크립트 언어 플레이그라운드를 확인하십시오.

Angular 2의 Angular 1 당량 함수에 대한 기능 내역은 Angular.io - Cookbook - A1 A2 Quick Reference를 참조하십시오.

각도 1과 각도 2의 비교를 이해하는 데 도움이 될 수 있습니다.

Angular 2는 Angular 1에 비해 많은 이점을 가지고 있는 것으로 입증되었습니다.

• 완전히 컴포넌트 기반입니다.
• 변경 검출 기능 향상
• AOT(Areach of Time Compilation)는 렌더링 속도를 향상시킵니다.
• TypeScript는 주로 Angular 2 응용 프로그램 개발에 사용됩니다.
• Angular 2는 Angular 1보다 성능이 우수합니다.
• Angular 2는 Angular 1보다 더 강력한 템플릿 시스템을 가지고 있습니다.
• Angular 2는 API가 단순하고 로딩이 느리며 디버깅이 용이합니다.
• 각도 2는 각도 1보다 훨씬 검사하기 쉽습니다.
• 각도 2는 중첩된 성분을 제공합니다.
• 각도 2는 두 개 이상의 시스템을 함께 실행할 수 있는 방법을 제공합니다.
• 그리고...

Angular 2와 Angular 1은 기본적으로 동일한 이름을 가진 다른 프레임워크입니다.

angular 2는 웹 표준의 현재 상태 및 웹의 미래 상태(ES6\7, 불변성, 컴포넌트, 섀도우 DOM, 서비스 워커, 모바일 호환성, 모듈, 타이프스크립트 등)에 대한 준비가 되어 있습니다.)

angular 2는 컨트롤러, $component annotations와 같은 angular 1의 많은 주요 특징들을 죽였습니다. (@component annotations와 함께 포함), 모듈 정의, 그리고 훨씬 더 많은 것들이 ng-component와 같은 단순한 것들도 예전과 같지 않습니다.

어떤 식으로든 변화는 좋은 것이고, 결점이 있는 각도 1.x, 그리고 각도 2는 미래의 웹 요구 사항에 더 준비가 되어 있습니다.

요약하자면, 나는 당신이 지금 앵귤러 1.x 프로젝트를 시작하는 것을 추천하지 않는다 - 당신은 나중에 앵귤러 2로 이행해야 하기 때문에 아마도 그렇게 하기에는 최악의 시간일 것이다, 나는 당신이 앵귤러 2를 선택하는 것보다 앵귤러 2를 선택하는 것에 신경을 쓰고 있다, 구글은 이미 앵귤러 2를 가진 프로젝트를 시작했다.그리고 당신이 프로젝트를 마칠 때쯤이면 이미 각 2가 각광을 받고 있을 것입니다.보다 안정된 것을 원한다면 반응과 플럭스, 리덕스를 JS 프레임워크로 생각할 수 있습니다.

앵글2는 정말 멋질 거예요.

완벽한 프레임워크는 없습니다.Angular 1의 결점에 대해서는 이쪽과 이쪽에서 보실 수 있습니다.하지만 그것이 나쁘다는 것을 의미하지는 않는다.문제는 당신이 어떤 문제를 해결하느냐입니다.데이터 바인딩 사용이 제한되고 가볍고 간단한 앱을 빠르게 전개하고 싶다면 Angular 1로 진행하십시오.Angular 1은 빠른 프로토타이핑을 해결하기 위해 6년 전에 제작되었으며, 매우 잘 작동합니다.사용 사례가 복잡하더라도 Angular 1을 사용할 수 있지만 복잡한 웹 애플리케이션 구축에 관한 뉘앙스와 모범 사례를 알아야 합니다.만약 당신이 학습용 앱을 개발하고 있다면, Angular 2로 옮기기를 제안합니다. Angular 2는 Angular의 미래이기 때문입니다.

Angular v2와 ReactJs의 한 가지 두드러진 특징은 두 회사 모두 새로운 웹 구성요소 아키텍처를 채택했다는 것입니다.즉, 이제 독립된 웹 컴포넌트를 생성하여 이 웹 컴포넌트와 동일한 기술 스택을 가진 전 세계 웹사이트에 플러그 앤 플레이할 수 있습니다.멋있다! 그래 멋있다.:)

Angular v2의 또 다른 가장 큰 변화는 주요 개발 언어가 다름 아닌 TypeScript라는 것입니다.TypeScript는 마이크로소프트에 속하며 2015년 JavaScript(ECMAScript6/ES6)의 슈퍼셋이지만 매우 유망한 기능을 가지고 있습니다.이 튜토리얼을 읽은 후 TypeScript를 조금 더 자세히 체크하는 것을 추천합니다(물론 재미있습니다).

여기서 저는 Angular v1과 Angular v2를 상호 연관시키려고 하는 남자들이 독자들을 더욱 혼란스럽게 한다고 말하고 싶습니다. 제 생각에 Angular v1과 Angular v2는 두 개의 다른 프레임워크로 취급되어야 합니다.Angular v2에서는 Web Components의 웹 어플리케이션 개발 개념을 가지고 있지만 Angular v1에서는 Controller를 가지고 놀아야 합니다.또한 Angular v2에는 컨트롤러가 없습니다.

한 가지 주의할 점은 angular2가 타이프스크립트를 사용한다는 것입니다.

인턴 때 코르도바와 angular1을 했고 지금은 angular2를 하고 있어요.내 생각에 angular2는 좀 더 체계적이기 때문에 대세가 될 것 같은데, 단점은 당신이 문제나 어려움이 있을 때 참고할 자료가 거의 없다는 것이다.angular 1.x에는 매우 사용하기 쉬운 개인화된 지침이 많이 포함되어 있습니다.

도움이 됐으면 좋겠다.

Angular 2는 적어도 제공하는 기능에서는 1보다 훨씬 우수합니다.웹 컴포넌트 지원, 타이프스크립트 사용, 인터페이스 성능 및 전체적인 단순성 때문에 Angular 2를 사용하여 프로젝트를 시작하기로 결정했습니다.그러나 처음부터 angular 2(예를 들어 apache를 사용한 라우팅)에는 문서가 거의 없거나 전혀 없는 문제가 있다는 것을 깨달았습니다. angular 2의 문서화와 커뮤니티는 충분히 개발되지 않았기 때문에 angular 2의 가장 큰 함정입니다.

단기간에 사이트를 올릴 필요가 있는 경우는, 잘 알려진 각도 1을 사용하고, 보다 긴 프로젝트에 종사하고 있는 경우는, 새로운 문제를 조사할 수 있는 시간적 여유가 있다고 생각합니다(기여를 생각하면, 각도 2 커뮤니티에 주는 것이 좋습니다).

언급URL : https://stackoverflow.com/questions/34114593/angularjs-vs-angular