Angular is a leading framework for constructing client-side applications with HTML, CSS, and JavaScript. As a premier tool for creating dynamic web applications, Angular provides a structured approach to developing app components and modules, which we previously explored in terms of Angular CLI basics and project setup.
Understanding Angular Components
Angular adopts a component-based architecture, where applications are divided into independent, reusable components. Each component is responsible for rendering a portion of the page, enabling a dynamic and interactive user interface. Components are essentially the building blocks of Angular applications, comprising a template for the UI, styles for appearance, and a class for logic and data binding.
The Angular Root Component
Every Angular application begins with a root component, serving as the primary container under which other components are nested. The root component, typically found in the src/app/ directory, includes:
- Template: Defines the HTML structure displayed on the page;
- Style: Specifies CSS rules for the template’s HTML elements;
- Class: Holds the logic, properties, and methods affecting the template’s rendering.
Example of an Angular component structure:
| import { Component } from ‘@angular/core’; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.css’]})export class AppComponent { title = ‘Angular Expense Tracker’;} |
Delving into Angular Modules
Angular modules, or NgModules, organize related components, services, directives, and pipes into cohesive blocks. Each Angular application has at least one root module, responsible for bootstrapping the application and often including a root component. Modules can import functionality from other modules and export their components for use in other parts of the application.
The Angular Root Module
The root NgModule defines the application’s compilation context and is critical for bootstrapping the Angular app. Located in src/app/app.module.ts, the root module typically includes:
- Declarations: Lists the components, directives, and pipes belonging to the module;
- Imports: Brings in other modules required by the components in the current module;
- Bootstrap: Identifies the main application view, the root component.
Example of an Angular root module:
| import { BrowserModule } from ‘@angular/platform-browser’;import { NgModule } from ‘@angular/core’;import { AppComponent } from ‘./app.component’; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], bootstrap: [AppComponent]})export class AppModule {} |
Building an Expense Tracker Application
Creating Components and Modules
To illustrate these concepts, we’ll develop an expense tracker app. Let’s begin by creating a component to display a summary of expenses:
| ng generate component expenses-summary |
This command scaffolds a new component, adding it to the application’s module declarations. The component’s template might look like this:
| <!– expenses-summary.component.html –><div class=”expense-summary”> <h2>Monthly Expenses</h2> <p>Total for August: $500</p> <p>Total for September: $450</p></div> |
Implementing Nested Components
Angular allows for nesting components within others to build complex UIs. For our expense tracker, we can nest the expenses-summary component within a home component:
| ng generate component home |
Then, update the home component’s template to include the expenses-summary component:
| <!– home.component.html –><app-expenses-summary></app-expenses-summary> |
Angular 2: Bootstrapping Modules
Transitioning to Angular 2 introduces new bootstrapping methods. Unlike Angular 1.x, which relies on ng-app or angular.bootstrap, Angular 2 uses @NgModule for defining modules and requires manual bootstrapping of the application.
Bootstrapping Module Angular2
Angular 2+ versions necessitate the explicit bootstrapping of the root module, typically in the main.ts file, to kick-start the application. This approach provides more control over the initialization process, accommodating advanced scenarios such as server-side rendering and bootstrapping in a WebWorker.
Conclusion
This article has provided a foundational understanding of Angular components and modules through the development of an expense tracker application. Components enable the segmentation of UIs into manageable units, while modules offer a way to organize these components and related services. The next steps will involve data binding and further dynamic interaction within the expense tracker app.
