A Note from Infragistics: Angular (formerly Angular 2) represents a huge departure from Angular JS (formerly Angular 1). While Angular JS used a more traditional MVC architecture that relied primarily on Controllers which controlled the interaction between a Model and the View, Angular has taken a more self-contained, composable Component based approach.

While there was nothing necessarily wrong with the approach Angular JS took, the component-based architecture employed by Angular has proven to be a very flexible paradigm that is easily understood and applied by developers from a variety of backgrounds. Once you recognize the analogue between “Component” and “User Control” the vast array of reuse and compositional opportunities, and the power they provide, become apparent.

In this except from Angular Essentials — an eBook from Infragistics you can download free right now you’ll get a high-level introduction to Angular component architecture and the various facilities available in the platform to help you build complex applications for the modern web. 

Angular Application Structure

Angular uses Components extensively. A typical Angular application consists of components to define every part of the page. The components are added to Angular modules.

Think of an Angular application as a tree of components. These components are linked together. The top most component is the Root component which contains all other components, and is used by the Angular bootstrapper to start the application.

Here’s a typical Component tree in an Angular application:

 

Component tree structure in an Angular application

Every component is a self-sufficient piece of UI, screen, or route. A component is a combination of a view and its view-model. It uses Services to get the data and displays that data in views.

When the application is divided into multiple views and the views have to be loaded based on the current URL, then each route is handled with a component. The route invokes this component when it has to be loaded.

Angular applications are modular. Angular makes use of several ES6 modules to keep the source code modularized, and it uses its own module system to group a set of related Angular blocks together. It is important to understand that the purpose of the ES6 modular systems is different from that of the Angular modules system.

The ES6 module system helps keep the source files as lean as possible. Each file contains a component, a directive, a service, or any other block. These files export their objects using the export keyword, and they are imported by other modules using the import keyword. The third party libraries used in the application are also loaded as ES6 modules. On the other hand, the Angular modules are used to group a set of Angular blocks together. These modules can be used to split an application into multiple modules based on the functionality of a set of blocks. One module can access other modules to use their functionality.

Angular makes extensive use of Dependency Injection (DI) to load required objects into any code block. It provides a single API for DI, which comes with all the power needed for a complex application. The combination of modularity and DI makes Angular code much cleaner to read and to test.

An Angular application is built using several Components, Services, Directives, Pipes and other pieces. Let’s explore what each one does.

Directives

Directives are not new in Angular, but have been improved upon since Angular JS. The Directives architecture in Angular reduces the need for direct DOM manipulation by providing a better binding system. Unlike Angular JS, where a directive has to be named in camel case notation and used on the UI with dashed notation, Angular has a unified way of naming and using the directive.

Angular 2 has three types of directives:

Components
 

An Angular application starts with a component; every route is associated with a component and uses components to define different levels of the application. The components consist of an HTML template as well as the logic to build a view-model for this template. The HTML templates uses Angular’s binding syntax to bind the properties and methods of the view-model in the view. A component can load another component in its template and interact with it.

The components have life cycle hooks like ngOnInit(), ngOnDestroy() that allow the application to respond to key lifecycle events of the component.

Decorator Directives

Decorator directives extend the behavior of an existing HTML element or an existing component. These are the simplest kind of directives. They perform small sets of actions, but at times these small features are critical for business. A decorator directive can interact with its host via events. Using these events efficiently reduces the amount of DOM manipulation one needs to perform.

Structural Directives

The structural directives deal with the template rendered inside an element. They can manipulate the template, depending upon the need. It doesn’t manipulate the DOM inside the target directly, rather it uses the ViewComponentRef service provided by Angular to add or remove elements inside the target. This behavior makes the directive platform agnostic.

Change Detection

At the heart of every front-end framework is a technique to detect changes made to the objects. Whenever the values of objects are bound on the UI change, the framework needs to be notified so that it can update the UI to reflect these changes. This technique is called Change Detection. Angular brings a much more powerful and efficient way to detect changes on the objects. It comes with a built-in change detection mechanism, and allows the applications built on the framework to use a third party technique as well. The framework has an open end that allows the use of objects that provide a better mechanism to detect changes.

Services

Services are simple ES6 or TypeScript classes which perform an operation like fetching data from an API, maintaining a WebSocket connecting to interact with the server, handling business logic or any reusable logic. A service can be injected into another service, a component, a directive, or any Angular code block. Services help in achieving Single Responsibility Principle (SRP) and keeping the code cleaner.

Forms

Accepting user inputs is one of the most essential parts of any application. At times, it becomes a challenge to handle the user inputs when the business needs many fields to be filled in by the user and has a lot of validations to perform. Angular provides good support for Forms. A form in an Angular application that can either be driven by a template or by a model.

Routing

The framework that supports Single Page Application development allows switching the views on the client side without refreshing the whole page. It updates a portion of the page and changes the URL so that one can bookmark it, and come back to the specific view instead of starting the navigation again from the first page. This is called client side routing. Like every SPA framework, Angular supports routing. Angular has a router called Component Router, which is named so because it loads components.

Modules

As mentioned earlier, modules in Angular are used to group a set of related components, directives, pipes, and services together. Angular’s module system is different from the ES6 module system. The ES6 module system encapsulates the contents of a file, and the Angular 2 module system encapsulates a set of Angular blocks. Here are some features of a module:

• The blocks added to a module can be used inside the module.
• A module can import one or more modules to use the code from that module.
• An Angular library can make use of a module to export its functionality to rest of the world.
• An Angular application bootstraps with a module.
• A module can declare one or more of its components as bootstrap components.
• Execution of the module will begin with the bootstrapped component.

Conclusion

Angular comes with a number of new features, as well as improved versions of some Angular JS features. Each of these features is designed with ease of use and ease of maintenance in mind. We will dive deeper into each of these concepts as we move forward.

We hope you’ve enjoyed this sample of the Angular Essentials eBook. You can download the full book, and be sure to check out our new sample application and lessons that demonstrate how to apply the information you just learned as well as how Ignite UI for JavaScript Angular Components can help you write amazing high-performing applications for any line of business application. And be sure to get your 30-day free trial of Ignite UI for JavaScript!