AngularJS vs Angular

AngularJS vs Angular

---

몇 달 전에 저는 Angular를 공부하기로 결정했습니다. 내가 발전하고 그것을 사용하여 응용 프로그램을 만들 때 Angular 2가 개발자 미리보기에 있다는 것을 알고 있으므로 릴리스되기까지는 시간 문제입니다. Angular 2는 Angular 1과 호환되지 않으며 많은 변경 사항이 있으므로 Angular 1.x로 계속 개발하거나 Angular 2 개발을 시작하는 것이 더 낫습니까?시장에서 항상 최신 버전이나 최신 언어를 사용해야 할 필요는 없지만이 경우 앱이 여전히 작기 때문에 문제없이 변경할 수 있습니다.

---

제가 당신을 가정하고 있는데이 글을 읽는 것 모두가 이미 편안하게 각도 1 인, 말함으로써 서문 보자 (

지금이라 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"파일을 브라우저에 "매핑"합니다.

업데이트

: 베타 버전이 아닙니다. 대부분의 경우 프로젝트 구조가 약간 변경되었으며 각도 클리를 사용하는 경우

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.js

Angular 1 과 같습니다.프로젝트 파일을 정의하거나 내보내는 데 사용되는 index.ts

추가 정보 :

프로 팁 :

ng generate [option] [name]

새로운 서비스, 구성 요소, 파이프 등을 생성하기 위해 실행할 수 있습니다 .또한

tsconfig.json

파일은 프로젝트의 TS 컴파일 규칙을 정의하므로 중요합니다.

내가 완전히 새로운 언어를 배워야

한다고 생각한다면 ? ... 어 ... 일종의 TypeScript는 JavaScript의 상위 집합입니다. 협박하지 마십시오. 개발이 더 쉬워집니다. 나는 단지 몇 시간 동안 그것을 가지고 놀고 난 후에 그것을 잘 이해하고 3 일 후에 그것을 모두 가지고 있다고 느꼈습니다.

4. 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에 바인딩하는 데 사용 하는 이름입니다.

$scope

 

directives

 

selector

 

<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> 

Then it will display "Loading..." as the loading message.

Note that what's declared in template is the path or the raw HTML you'll be using in your HTML in your selector tag.

---

A fuller implementation of Angular 1 would look more like this:

HTML

<h1 ng-controller="myCtrl">{{hello}}</h1>

In v1 this would look something like

JS

angular.module('controller', [])



.controller('myCtrl', function( $scope) {
    $scope.hello = "Hello World!"
})

This is what I really like about v2. I found directive was a steep learning curve for me in v1 and even when I had them figured out I often had the CSS render not how I intended. I find this is way simpler.

V2 allows for easier scalability of your app since you can break up your app up easier than you could in v1. I like this approach as you can have all your working parts in one file as opposed to having several in angular v1.

What about converting your project from v1 to v2?

---

From what I've heard from the development team if you'd like to update your v1 project to v2 you'll just be going through and deleting deprecated blobs and replace your $scopes with selectors. I found this video helpful. It's with some of the Ionic team that are working side by side with the angular team as v2 has a stronger focus on mobile https://youtu.be/OZg4M_nWuIk Hope this helps.

UPDATE: I updated by adding examples as official implementations of Angular 2 have surfaced.

UPDATE 2: This still seems to be a popular question so I just thought I'd some resource I found very helpful when I started working with angular 2.

Helpful Resources:

For more on ES6, I recommend checking out The New Boston's ECMAScript 6 / ES6 New Features Tutorials - YouTube Playlist

To write Typescript functions and see how they compile to Javascript check out the Typescript language Playground

To see a function by function breakdown of what the Angular 1 equivalence is in Angular 2 see the Angular.io - Cookbook -A1 A2 Quick Reference

---

It might help you for know about Angular 1 vs Angular 2.

The Angular 2 proved to have lots of benefits over Angular 1:

• It is entirely component based.
• Better change detection
• Ahead of Time compilation (AOT) improves rendering speed.

• TypeScript can be used for developing Angular 2 applications

• Angular 2 has better performance then Angular 1.

• Angular 2 has a more powerful templating system then Angular 1.

• Angular 2 has simpler APIs, lazy loading, easier debugging.

• Angular 2 is much more testable then Angular 1.

• Angular 2 provides nested components.

• Angular 2 provides a way to execute more than two systems together.

• And So On..

---

Angular 2 and Angular 1 is basically a different framework with the same name.

angular 2 is more ready for the current state of web standards and the future state of the web ( ES6\7, immutiablity, components, shadow DOM, service workers, mobile compatibilty, modules, typescript and so on and so on... )

angular 2 killed many main features in angular 1 like - controllers, $scope, directives (replaced with @component annotations), the module definition, and much more, even simple things like ng-repeat has not left the same as it was.

any way, change is good, angular 1.x had it flaws, and angular 2 is more ready for the future web requirements.

to sum things up - i do not recommend you to start an angular 1.x project now - this is probably the worst time to do so as you will have to migrate later to angular 2, i you set youre mind about angular than choose angular 2, google has already launched a project with angular 2, and by the time you finish the project angular 2 should already be in the spotlight. if you want something stabler, you can think about react\elm and flux and redux as JS frameworks.

angular 2 is going to be awesome, that's for no doubt.

---

No framework is perfect. You can read about flaws in Angular 1 here and here. But that doesn't mean it is bad. The question is what problem are you solving. If you want to roll out a simple app quickly, which is lightweight, with limited data binding usage then go ahead with Angular 1. Angular 1 was built 6 years back to solve rapid prototyping which it does pretty well. Even if your use case is complex still you can use Angular 1 but then you should be aware of nuances and best practices around building a complex web app. If you are developing an app for learning purpose I would suggest to move to Angular 2 as that is where the future of Angular is.

---

The one stand-out feature in Angular v2 and also in ReactJs is that they both have embraced the new Web-Components architecture of development. What this means is that we can now create independent Web-Components and plug-and-play them to any website in the world that has the same technology stack of the this Web-Component. Cool! yeah very cool. :)

The other most prominent change in Angular v2 is that it's primary development language is none other than TypeScript. Although TypeScript belongs to Microsoft, and it is a superset of JavaScript of 2015 (or ECMAScript6/ES6), but it has some features that are very promising. I would recommend the readers to checkout TypeScript in a bit detail (which is fun of-course) after reading this tutorial.

Here I would say that the guys trying to interrelate Angular v1 and Angular v2 further confuse the readers, and in my humble opinion, Angular v1 and Angular v2 should be treated as two different frameworks. In Angular v2, we have Web-Components' concept of developing web applications, while in Angular v1 we have to play with Controllers, and (sadly or luckily) no controllers are present in Angular v2.

---

One thing to notice is angular2 is using typescript.

I did angular1 with cordova in my intern and now i am doing a angular 2. I think angular2 will be the trend as it more structured in my opinion but the cons is that there are few resources to refer when you have problem or difficulties. angular 1.x has tons of personalized directives that can be super easy to use.

Hope it helps.

---

Angular 2 is much better than 1, atlist in what it offers, support for web components, using typescript, preformance and overall simplicity of the interface, was the reason i decided to start a project using angular 2. how ever from the get go i realized there are a issues in angular 2 (from exmple routing with apache) that very little or none documentation is available for, so the documentation and community of angular 2 is the biggest pitfall for angular 2, as it isnt developed enough.

I would say, if you need to raise a site quick for a short deadline use the well known angular 1, if your in a longer project and can afford the time to investigate new issues (that you might be the first to encounter, which could be a bonus if you think of the contribution you might give to the angular 2 community) than go with angular 2.

참고URL : https://stackoverflow.com/questions/34114593/angularjs-vs-angular