Angular 2 with it's features and how it's different from AngularJs 1.x.x

Angular, or AngularJS as it's officially known, is a front-end structural framework for dynamic web app development. It utilizes HTML as a template language which it then extends to define an application's components. The Angular framework provides data binding and dependency injection that minimizes the amount of code you have to write yourself.

Recently, Google HQ announced the final release version of Angular 2. Along with many new features, Angular has undergone quite a few changes that may give developers pause for thought.

Many new frameworks take advantage of the ability to create custom HTML tags. Angular 2 will be a huge learning curve for developers. It is written entirely in Typescript and meets the ES6 specification. And it's not an update for Angular 1.x. As it's rewritten and includes breaking changes.

Angular 2will be a big change for developers compared to 1.x. Component-based development and object orientation aremuch easier. Other functionalities such as scopesand controllers are canceled completely. Angular 2is entirely component based. Controllers and $scope are no longer used. Theyhave been replaced by components anddirectives. Components are directives with a template. This component is in HTMLcalled with the tag, the name of the selector withinthe HTML. All of thecomponents that are used must be made known via bootstrap. They also have tobe imported on the page.

There have been a lot of complaints from developers who found Angular's Release Candidate labeling confusing. In response to these concerns, and to make it easier to manage dependencies in future releases, Angular 2.0.0 is the first release to use semantic versioning, based on the MAJOR.MINOR.PATCH scheme as described by semver.

Angular 2 has been a long-time coming. Part of why the release took so long is that it is no longer just a web framework. Angular 2 is now a platform that encompasses a wide range of capabilities, including:

• Universal Server Rendering: Runs on top of a Node.js back end, which produces a server rendered view. This greatly improves perceived performance for first-time users of your application, thereby improving their overall experience.
• Command Line Interface: The new Command Line Interface (CLI) can generate components, routes, services and pipes via commands. The CLI will also create simple test shells for all of these.
• Mobile Toolkit: As the name implies, the mobile toolkit provides all the tools and techniques to build high-performance mobile apps using Angular CLI and Angular Mobile Toolkit. Web apps built using the mobile toolkit will load on any device, with or without an Internet connection and can take advantage of the searchability, shareability, and no-install-required features of the Web.
• TypeScript: Just as the Ruby language made learning Ruby on Rails a pleasure to learn and write, same way about TypeScript and Angular 2. In case you're not familiar, TypeScript is Microsoft's extension of JavaScript that allows the use of all ES2015 features and adds powerful type checking and object-oriented features.
• Templating: In Angular 2.0, the template compilation process will be asynchronous.As the code is based on the ES6 module spec, the module loader will load dependencies by simply referencing them in the component definition.
• Dynamic Loading: This is a feature which is missing from the current version of Angular. It will be addressed by Angular 2.0, which will let developers add new directives or controllers on the fly.

So the best way to learn is to compare with Angular 1.x and find out what's new in Angular 2. Lets find out difference between Angular 1.x and Angular 2 -

• Angular 1.x was not built with mobile support in mind, where Angular 2 is mobile oriented.
• Angular 2 provides more choice for languages. You can use any of the language from ES5, ES6, TypeScript or Dart to write Angular 2 code. Where, Angular 1.x has ES5, ES6 and Dart. Addition of TypeScript is a great step as TypeScript is awesome way to write JavaScript.
• AngularJS 1.x is easy to setup. All you need to do is to add reference of the library and you are good to go. Where AngularJS 2 is dependent of other libraries and it requires some efforts to set up it.
• Angular 1.x controllers and $scope are gone. We can say that controllers are replaced with "Components" in Angular 2. Angular 2 is component based.
• Angular 1.x has 2 ways to bootstrap angular. One using ng-app attribute and other via code. In Angular 2, say goodbye to ng-app. The only way to bootstrap angular is via code.
• Structural directives syntax is changed. ng-repeat is replaced with *ngFor. Notice that Asterisk(*) sign is used as prefix for structural directives, in is replaced with of and camelCase syntax is used.
• In Angular 2, local variables are defined using hash(#) prefix.
• To filter output in our templates in Angular 1.x, we use the pipe character (|) and one or more filters. Where in Angular 2 they are called pipes. The syntax remains same.
• Angular 2 uses camelCase syntax for built-in directives. For example, ng-class is now ngClass and ng-model is now ngModel.
• One of the major change in Angular 2 is, that it directly uses the valid HTML DOM element properties and events. Due to this, many of the available built-in directives in Angular 1.x are now no longer required. Like, ng-href, ng-src, ng-show and ng-hide. Angular 2 uses href, src and hidden properties to get the same output. And same goes with event based directives like ng-click and ng-blur. And in Angular 2, take the HTML event and wrap it with parentheses.
  
• In Angular 1.x, ng-bind is used for one way data binding, but with Angular 2 it is replaced with [property], where property is valid HTML DOM element property. Angular 2, one way data binding is achieved via wrapping the properties with square brackets.
• In Angular 1.x, ng-model is used for two way data binding, but with Angular 2 it is replaced with [(ngModel)].
• One of the advantage of Angular is Dependency Injection. With Angular 2 DI is there but now there is a different way to inject dependencies. As everything is class in Angular, so DI is achieve via constructor.
• In Angular 1.x, we use $routeProvider.when() to configuring routing. Where in Angular 2, @RouteConfig{(...}) is used. ng-view present in Angular 1.x is replaced with
• Angular 2 implements webstandards like components and it's provide better performance than Angular 1.