Angular 2 - SPLessons
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Angular 2 Overview

Angular 2 Overview

shape Introduction

Web and mobile applications can be developed using angular platform. The Angular 2 is not only an update for Angular 1.x but also have many breaking changes and had been re-written completely in TypeScript in order to meet the ES 6 specification. Following are some of the major topics covered.
  • Angular 2 in action.
  • Anatomy of Angular 2 Application.
  • Advantages and disadvantages of AngularJS.

Angular 2 in action

shape Description

Angular 1 applications have spread like wild fire on the web, establishing Angular as a core framework in many company's toolbox. As the web evolved, so did Angular - into Angular 2. It's a full and modern web framework that enables us to create powerful applications. Simply stated, Angular is a JavaScript framework for building client-side applications using HTML, CSS and a programming language such as JavaScript. Why Angular? The figure below demonstrate why to use angular framework. Angular makes HTML more expressive. It powers up HTML with features such as if conditions, for loops and local variables. Angular has powerful data binding and can easily display fields from data model, track changes and process updates from the user. Angular promotes modularity by design. Applications become a set of building blocks making it easier to create and reuse content and Angular has built-in support for communication with a back-end service. This makes it easy for our web applications to integrate with a back-end service to get in post data or execute server side business logic. Why Angular 2? The figure below demonstrate the use of angular 2 framework. Angular 2 is built for speed. It has faster initial loads, faster change detection and improved rendering times. Angular 2 is modern. It takes advantage of features provided in the latest JavaScript standards and beyond such as classes, modules and decorators yet it supports both green field and legacy browsers, Edge, Chrome, Firefox and Internet Explorer. Angular 2 has a simplified API. It has fewer built-in directives to learn, simpler binding and a lower overall concept count and Angular 2 enhances the productivity to improve day to day workflow.

Anatomy of Angular 2 Application

shape Description

In Angular 2, an application is comprised of a set of components and some services that provide functionality across those components. Component Each component is comprised of a template which is the HTML for the user interface fragment to finding a view for the application. Add to that a class for the code associated with the view. The class contains the properties or data elements available for use in the view and methods which perform actions for the view such as responding to a button click. A component also has metadata which provides additional information about the component to Angular. It is this metadata that identifies the class as an Angular component. So a component is a view defined with a template, its associated code defined with a class and additional information defined with metadata. The figure below explain the structure of a component. Module All the components can be pulled together into an application by defining angular modules. The Angular modules help in organizing the application into cohesive blocks of functionality. Every Angular application has at least one Angular module called the Application's root Angular module. An application can have any number of additional Angular modules including feature modules that consolidate the components for a specific application feature. The figure below explain the structure of root module in angular.

Advantages and disadvantages of AngularJS

shape Advantages

Following are few advantages of Angular 2
  • AngularJS have a huge community has it was developed by Google by which developers can tackle the changes by discussion.
  • AngularJS have a great MVC, AngularJS strings the app together automatically instead of splitting them into multiple MVC components.
  • The great advantage of AngularJS is its unit testing ready.

shape Disadvantages

Following are few disadvantages of Angular 2
  • Developer have several ways to do the similar thing with AngularJS and is hard to find the better way for a programmer.
  • The UI get lagged if the watchers exceed to 2000 because of its huge data grids and lists, which is a big draw back.

Summary

shape Key Points

  • Mobile and web apps can be developed using AngularJS.
  • HTML can be made more expressive using the AngularJS.
  • Angular 2 is built for Speed and have simplified API.
  • Angular 2 is comprised with a set of components and services.