Angular 2 was released in late 2016 and brought Angular into the modern web with its desktop and mobile applications. If you build Web applications, chances are you’ve heard of Angular, the popular JavaScript framework for building full-featured, client-side, browser-based applications. The recent release of Angular 2 (September 2016) brought Angular into the modern Web and expanded its reach into mobile and desktop applications.
So what’s all of the Angular 2 excitement about? How is it different from every other JavaScript framework out there? Is it worth learning? What’s there to love?
Here are six reasons to love Angular 2.
The Web has changed significantly during these past five years. With ECMAScript (ES) 2015, we have modules, classes and arrow functions. Angular 2 leverages these features to make its coding patterns more consistent and easier to learn.
Add to that Typescript, a language that is a superset of JavaScript and provides static typing and interfaces. By leveraging TypeScript for Angular development, we get great tooling such as type checking, safer refactorings and inline code documentation.
These features enhance our development and editing experience and help us reason about, debug and better understand our code.
Consistent coding patterns
One of the best things a framework can do for developer productivity is have a consistent set of coding patterns, and Angular does just that. Let’s talk about three of them: classes, built-in dependency injection and the MVVM (model-view-view/model) pattern.
Angular 2 uses ES classes and a set of annotations, called decorators, to build all of the key Angular constructs. Want to build an Angular component? Create a class and add the appropriate decorator. Want to build a custom pipe filter? Create a class and add the appropriate decorator. Building an Angular module? Create a class and add the appropriate decorator. Building a service? Well, for a service we … build a class and add the appropriate decorator. You get the idea here. Angular 2 provides a very consistent coding pattern for building up the pieces of the application.
Another coding pattern Angular 2 leverages is the power of dependency injection (DI). To use any of the built in Angular services, such as HTTP or Router, we simply inject the service into any class that needs the service. Angular implements constructor-based dependency injection, so to inject a service we simply pass that service as an argument to the class constructor. That’s it. And when we build our own custom services, we inject them using the same technique.
Angular also takes advantage of common architectural patterns. When building client-side applications there are often three pieces to the puzzle: the user interface, the code that supports and controls that user interface and the model containing the data for that interface. Angular 2 clearly separates these three pieces using the model-view-view/model, or MVVM, pattern.
The view is defined in a template that contains the HTML for a specific component. The template can layout a page, any part of a page, or define a reusable set of user interface elements.
The model is defined as properties of the component class. For example, we define a hero property that models a superhero. We use an interface to define the details of that hero property, identifying the specific data elements associated with that hero such as hero name, alter ego and special powers.
The view/model is the class that manages both the view and the model. This is the code that calls services to retrieve data, reacts to user interactions on the view such as hiding or showing elements and calls services to save user entries.
By taking advantage of these common patterns, Angular 2 makes development easier and more productive.
Angular 2’s data binding makes this process easy. Simply bind HTML elements in the template to the model properties in the class and the data will automatically appear in the view. And if the user can change the values, Angular 2 supports two-way data binding. So any change the user makes to the data in the view automatically updates the model properties in the class.
In addition to data binding, Angular 2 supports property binding. This allows us to control the document object model (DOM) by binding HTML properties to component class properties. For example, we bind the HTML hidden property of an image element to a component class property such as hideImage. When the component class property is set to true, the image element is automatically hidden. When the component class property is set to false, the image element automatically appears.
And lastly, Angular 2 supports event binding. This means we can react to any event from the view, including HTML events such as click, third party component events or our own custom events. We simply bind the event to a method in the component class. When the event occurs, the method is executed.
These extensive binding features make it easy to display data, obtain user entries, control the DOM and react to events.
One view does not an application make. Most client-side Web applications provide many views to support all of their functionality. There may be a view for a welcome page, a hero list page, a hero detail page and a hero edit page. Then sets of views for villains or jobs. We need to display the correct view at the correct time. That is the purpose of routing.
Angular 2 provides full-featured routing. With Angular we define a route to each page of the application. Then we activate the appropriate route based on the user’s actions. We can pass data to routes, so we can tell the hero detail page to display the details for the hero with an id of 42.
We can guard routes so that a user cannot access a route without a login or only if they are an administrator. We can prevent leaving an edit page until the user confirms they want to save or cancel their changes. We can pre-load data before displaying a page.
Angular 2 supports child routes for navigating within a specific route. For example, we navigate to a detail page and from that page navigate to child routes for a technical specifications page or more information page. This is also useful when displaying tabs of information within a page.
We can even lazy load specific routes so the code for the route is not downloaded to the browser and loaded unless the user accesses the features associated with that route. So if we have admin features for example, those features are not loaded until the user requests to access the admin features.
Together, these many features make Angular 2 routing very flexible and powerful.
Size and performance are somewhat related when working with a Web-based application. A smaller component improves startup performance both on download time and compile time in the browser. One of the key goals for Angular 2 is to minimize size and maximize performance.
Minimizing the size of the download is achieved in several ways. First, we can make the size of each component as small as possible. Second, the components are organized into Angular modules in such a way that logical groupings can be downloaded together. And third, lazy loading of routes only downloads the Angular modules required to display the user-selected route. As the user moves to other routes, the needed content is downloaded, and routes the user never use are never downloaded unnecessarily.
Then there is the Ahead of Time (AoT) compiler. With AoT, the compiler runs once at build time. The browser then downloads the pre-compiled version of the application and renders the application immediately, without the need to compile it first in the browser. Plus there is no need to download the Angular compiler, dramatically reducing the application download size.
Angular 2 executes faster, has less work to do and has a low memory footprint.
The documentation for Angular 2, at angular.io, is extensive and varied. It includes a quickstart guide for getting you up to speed quickly with Angular 2. It includes a user guide and an API reference. It provides documentation on more advanced features, and a cookbook with recipes for common tasks such as form validation and dependency injection.
But the best part for learning Angular 2 is the tutorial. It provides a step-by-step code-along experience introducing all of the basic features of Angular 2. Or, if you would prefer a live online classes or classroom training join myTectra : Angular 2
Read more in the post below, which was originally published here on CIO.com.
Placement Assistance, Best Price and 24/7 Customer Care.
No Comments Yet
Let us know what you think