Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Unwrapping AngularJS 2

DZone's Guide to

Unwrapping AngularJS 2

Angular 2 is here! After two years in the making, take a look at what the latest version of Angular has to offer.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Now it’s official. The complete new version of Angularjs is now officially available. Six years back in 2010, Google first launched AngularJS, a new way to develop web applications. Then, in September 2014, Google announced that a new version was going to be released with a complete rewrite. Now, after the final release of AngularJS 2, this is what they have to say:

“Angular 1 first solved the problem of how to develop for an emerging web. Six years later, the challenges faced by today’s application developers, and the sophistication of the devices that applications must support, have both changed immensely. With this release, and its more capable versions of the Router, Forms, and other core APIs, today you can build amazing apps for any platform. If you prefer your own approach, Angular is also modular and flexible, so you can use your favorite third-party library or write your own.”

This clearly says that this version is much improved and contains many advanced features. Watch this video of the press conference that was held on Sept. 14 this year, expressing the excitement of the launch:

Why AngularJS 2 Over AngularJS 1?

Now the obvious question is why would you switch to Angularjs 2 from Angularjs 1?  Right now 1.3 million developers use Angularjs 1 and 480K developers already use Angularjs 2. Here are the reasons that we found out at ValueCoders why Angularjs 2 is better than the previous version.

Template Basics

Templates are a user-facing part of an Angularjs app and are written in HTML. They made some major changes in the basic templates as well.This includes Bindings, Filters, and local variables. For more: Read the technical details. 

Template Directives

Angularjs 1 offers more than 70 built-in directives for templates. In AngularJS 2, many of them are not necessary. They have created some equivalents in this new version. For more: Read the technical details. 

Filters/Pipes

Angular 2 pipes offer formatting and transformation for data in the template, like Angular 1 filters. Hence, there are many built-in filters in Angular 1 have corresponding pipes in Angular 2. For more: Read the technical details. 

Modules/Controllers/Components

In both Angular 1 and 2, Angular modules help to organize your application into cohesive blocks of functionality. In the previous version, you write the code that provides the model and the methods for the view in a controller. In Angular 2, you build acomponent. Because a lot Angular 1 code is in JavaScript, JavaScript code is shown in the Angular 1 column. The Angular 2 code is shown using TypeScript. For more: Read the technical details. 

Style Sheets

Style sheets give your app a nice look. In Angular 1, you specify the style sheets for your entire app. As the app grows over time, the styles for the many parts merge, which can cause unexpected results. In Angular 2, you can still define style sheets for your entire app. However, now you can also encapsulate a style sheet within a specific component. For more: Read the technical details. 

There are a bunch of new toys in AngularJS 2 to play with. Its developer community is also pretty strong, and it’s worthwhile to switch from the previous version to the new one.

This post was originally published by ValueCoders

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
new ,angular ,angularjs

Published at DZone with permission of Mantra Malhotra, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}