7 Answers 7 Sorted by:

Let me preface by saying, Im assuming you and everyone who will be reading this is already comfortably with Angular 1 (now referred to as AngularJS, as opposed to simply Angular for the newer versions). That being said, lets get into some of the additions and key differences in Angular 2+.

• They added an angular cli. You can start a new project by running ng new [app name]. You can serve your project by running ng serve learn more here: https://github.com/angular/angular-cli
• Your angular code is written in ES6 Typescript and it compiles at runtime to Javascript in the browser. To get a full grasp on this I recommend checking out some the resource list I have at the bottom of my answer.
• Project Structure In a basic structure, you will have a app/ts folder where youll be doing most your work and a app/js Youll find in the app/js folder files with a .js.map extension. They “map” your “.ts” files to your browser for debugging as your browser cannot read native typescript.

Update: Its out of beta. The project structure changed a bit, in most cases and if youre using the angular cli, youll be working in the src/app/ folder. In a starter project, youll have the following.

app.component.css: CSS file you should use specific to the component.html

app.component.html: A view (variable declared in the app.component.js)

app.component.spec.ts: used for testing app.component.ts

app.component.ts: Your code that binds to app.component.html

app.module.ts: This it what kicks off your app and where you define all plugins, components, services, etc. This is the equivalent of the app.js in Angular 1

index.ts used to define or export project files

Additional information: Pro tip: you can run ng generate [option] [name] to generate new services, components, pipes, etc.

Also the tsconfig.json file is important as it defines TS compile rules for your project.

If youre thinking I have to learn a whole new language?… Uh… kinda, TypeScript is a superset of JavaScript. Dont be intimidated; its there to make your development easier. I felt like I had a good grasp on it after just a few hours playing with it, and had it all down after 3 days.

• You bind to your HTML similarly like how you would if in an Angular 1 directive. So variable like $scope and $rootScope have been deprecated.

This one you may have been implied. Angular 2 is still a MV* but youll be using components as a way to bind code to your templates, for instance, take the following

Here think of the import statement as your dependency injection in a v1 controller. You use import to import your packages, where the import {Component} says youll be making a component youd like to bind to your HTML.

Notice the @Component decorator you have a selector and template. Here think of the selector as your $scope that you use like you use v1 directives where the name of the selector is what you use to bind to your HTML like so

Where is the name of your custom tag youll use that will act as a placeholder for whats declared in your template. i.e.)

. Whereas this would look like the following in v1:

HTML

JS

Also can you add something between these tags to generate a loading message, like this:

Then it will display “Loading…” as the loading message.

Note that whats declared in template is the path or the raw HTML youll be using in your HTML in your selector tag.

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

HTML

In v1 this would look something like

JS

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 Ive heard from the development team if youd like to update your v1 project to v2 youll just be going through and deleting deprecated blobs and replace your $scopes with selectors. I found this video helpful. Its 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

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 Id 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 Bostons 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 to understand the comparison of Angularjs vs Angular.

Angular proved to have lots of benefits over Angularjs:

• Angular is entirely component based but AngularJs is a scope based.
• Better change detection
• Ahead of Time compilation (AOT) improves rendering speed.
• TypeScript is primarily used for developing Angular applications.
• Angular has better performance than Angularjs.
• Angular has a more powerful templating system than Angularjs.
• Angular has simpler APIs, lazy loading, and easier debugging.
• Angular is much more testable than Angularjs.
• Angular provides nested components.
• Angular 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 ( ES67, 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 reactelm and flux and redux as JS frameworks.

angular 2 is going to be awesome, thats for no doubt.

No framework is perfect. You can read about flaws in Angular 1 here and here. But that doesnt 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 its 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.

Angular 2 is much better than 1, at least in what it offers: support for web components, using typescript, performance and overall simplicity of the interface, was the reason I decided to start a project using angular 2. However, from the get go, I realized there are issues in angular 2 (e.g. routing with apache) for which very little or no documentation is available, 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 quickly for a short deadline use the well known angular 1, if youre 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.

Angular vs AngularJS | Difference Between Angular And AngularJS | Angular Training | Simplilearn

What is the difference between Angular JS and Angular 2+?

It is very confusing, but to sum it up, AngularJS is an old version. Angular is the newer version and since everyone is migrating to Angular. I would suggest you learn Angular instead of AngularJS. AngularJS typically refers to Angular 1, or the original angular which has some differences between Angular 2+.

What is the difference between angularcli and AngularJS?

AngularCLI is a tool used to generate angular components, They are not comparable. What you might mean, is what is the difference between Angular and AngularJS. The answer to this question is that AngularJS is the first version of Angular. It works with javascript and it is still getting supported but it is not compatible with Angular.

Is AngularJS compatible with JavaScript?

The answer to this question is that AngularJS is the first version of Angular. It works with javascript and it is still getting supported but it is not compatible with Angular. I’d suggest you start with Angular (Can also be called Angular2 or Angular4). It is very confusing, but to sum it up, AngularJS is an old version.

What is angular 2?

Angular 2 is built on the ‘Typescript’. Typescript is an open-source programming language, managed by Microsoft. Angular 2 is completely different from AngularJS. AngularJS had features like controllers, $scope, $scope variables, etc. However, in Angular 2, these features were replaced by new features namely components and directives.