Architecture Overview

Angular is a modern framework for building client-side applications in HTML and Typescripts. It was written in TypeScript. Its functionality is derived by a set of TypeScript Libraries that you import into the application.

The NgModules are the building blocks of an angular application, which provides a compilation context for components, thus an angular application is defined by sets of NgModules. An application must always have at least a root module on which the application is bootstrapped.

Some key points to note in Angular:

• Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.
• Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.

Components and Services are simply classes, sometimes with decorators that mark their type and provide metadata which tell angular how to use them.

• In a component, metadata defines the view of a template. A template is a combination of HTML and Angular Directives and probably with some binding markups which allows angular to modify the HTML before rendering it for display.
• In a Service Class metadata provides the information Angular needs to send to the components via dependency injection (DI)

An application?s view is typically a set of components arranged hierarchically from header to footer. Angular comes bundled with a Router service which helps in defining navigation paths across views

Module

In Angular a module is a set of related components, which may be defined for specific functionality in the application domain.

Every Angular application has a root module, conventionally called the AppModule, which provides a bootstrap mechanism that launches the application. Angular Application is typically made up of sets of functional modules.

Just like in Core JavaScript modules, NgModules can import functionalities from other modules and also export its functionalities. A good example is the Router module, which is imported when the route service is required in our application.

By carefully organizing our applications into modules, some features like Lazy loading can easily be implemented.

Components

An Angular application must have at least one component, the root component which connects a component hierarchy with the page document object model (DOM). An Angular component is composed of a class for the application data and logic and also an HTML template which defines the view to be displayed in the target environment.

Templates, Directives and Data Binding:

A template is a combination of HTML and Angular markups. Angular Markups can be used to modify HTML elements before they are displayed.

Template directives provide program logic, and binding markup connects your application data and the DOM. There are two types of data binding:

• Event binding: This lets your application respond to user input in the target environment by updating your application data on the fly.
• Property binding: This lets you interpolate values that are computed from your application data into the HTML.

In Angular, before a view is displayed, the directives and the binding syntax in the template are evaluated and the HTML and DOM modified according to the program data and logic.

Two-way data binding is also supported in Angular, thus changes in the DOM such as user preferences are reflected in the program data.

Piping Feature can also be used to improve the user experience of an Angular application. With Pipes, dates and currency can be displayed based on user location.

Services and dependency injection

When data or logic is not associated with a specific view, and that you want to share across components, a service class can be created. A service class definition is immediately preceded by the @Injectable() decorator. The decorator provides the metadata that allows your service to be injected into client components as a dependency.

Dependency injection (DI) lets you keep your component classes lean and efficient. They don't fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.

Routing

The Angular Router NgModule provides a service that lets you define a navigation path among the different application states and view hierarchies in your application. It is modeled on the familiar browser navigation conventions:

• Enter a URL in the address bar and the browser navigates to a corresponding page.
• Click links on the page and the browser navigates to a new page.
• Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen.

The router maps URL-like paths to views instead of pages. When a user performs an action, such as clicking a link, that would load a new page in the browser, the router intercepts the browser's behavior, and shows or hides view hierarchies.

If the router determines that the current application state requires particular functionality, and the module that defines it hasn't been loaded, the router can lazy-load the module on demand.

The router interprets a link URL according to your app's view navigation rules and data state. You can navigate to new views when the user clicks a button or selects from a drop box, or in response to some other stimulus from any source. The router logs activity in the browser's history, so the back and forward buttons work as well.

To define navigation rules, you associate navigation paths with your components. A path uses a URL-like syntax that integrates your program data, in much the same way that template syntax integrates your views with your program data. You can then apply program logic to choose which views to show or to hide, in response to user input and your own access rules.

Overview

In this tutorial, we have learnt the basics about the main building blocks of an Angular application. Let's take a quick recap of some of the Angular concepts we discussed.

• A component and template define an Angular view.
  A decorator on a component class adds the metadata, including a pointer to the associated template.
  Directives and binding markup in a component's template modify views based on program data and logic.
• The dependency injector provides services to a component, such as a router service that lets you define navigation among views.

Previous: Angular workspace and project file structure
Next: Introduction to services and dependency injection