AngularJS: Building blocks of AngularJS

By | November 10, 2018

angularjs-basics-building-elements

Angular is a framework for building client applications in HTML and TypeScript.

Building blocks of AngularJS

Modules

Every Angular app has a root module named AppModule, which provides the bootstrap mechanism that launches the application.

NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules.

Organizing your code into distinct functional modules helps in managing development of complex applications, and in designing for re-usability.

Components

Every Angular application has at least one component, the root component that connects a component hierarchy with the page document object model (DOM). Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment.

The @Component() decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata.

Templates, directives, and Data Binding

A template combines HTML with Angular markup that can 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 lets your app respond to user input in the target environment by updating your application data.
  • Property binding lets you interpolate values that are computed from your application data into the HTML.

Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports two-way data binding, meaning that changes in the DOM, such as user choices, are also reflected in your program data.

Your templates can use pipes to improve the user experience by transforming values for display. For example, use pipes to display dates and currency values that are appropriate for a user’s locale. Angular provides predefined pipes for common transformations, and you can also define your own pipes.

Services and Dependency Injection

For data or logic that isn’t associated with a specific view, and that you want to share across components, you create a service class. 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.

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 app.

Leave a Reply

Your email address will not be published. Required fields are marked *