Skip to content

Basics

Angular is an open-source JavaScript MVC framework well suited for enterprise-level projects. It is currently managed by Google.

Installation⚑

System Requirements for installing Angular:

  • Node.js - Active LTS or Maintenance LTS
  • NPM or Yarn

Install Angular CLI globally using Yarn (or NPM): yarn global add @angular/cli. Angular CLI is used to create project, generate application and library code. It also includes a server for running app locally.

Initialize Angular Application⚑

Angular Applications are generated with Angular CLI. The CLI app makes it easier to bootstrap any project. Here's how to generate boilerplate code for a new project: ng new APP_NAME.

Running the Application⚑

To run an application, simply navigate to the project directory and run ng serve --open. That's it.

Angular Concepts⚑

Angular is a platform and MVC framework for building client-side application using HTML and TypeScript.

The basic building blocks for an app is Component known as ngModule. These ngModules collectivelly define an Angular App. An App always has at least a root module that enables bootstrapping.

A Component:

  • defines View. A View is a set of screen elements
  • uses Services. A Service provides specific functionality not directly related to views
  • Service Providers can be injected into components as dependencies, making the codebase modular, reusable and efficient.

An NgModule is made-up of Views and Services

Modules⚑

  • ngModule declares a compilation context
  • ngModule associate its components with related code to form a functional units
  • an ngModule can import and export other ngModules

Modularity helps in keeping code clean and maintainable. It also allows developers to take advantages of framework-specific features such as Lazy Loading.

Components⚑

  • has at least one component, know as the root component
  • defines a class that contains application data and logic, and associated with an HTML

Angular identifies a component by using the @Component() decorator. Class that immediately follows the @Component decorator, is treated as a Component.

Template, Directives and Data Binding⚑

Angular supports two-way data binding

Templates combine HTML with Angular markup that can modify HTML elements before they are displayed.

  • Template Directives provide program logic
  • Binding markup connects application data and the DOM

Angular evaulates the directives and resolves binding syntax in the template to modify HTML elements and DOM. Angular does it before the view is displayed in the browser.

Services and Dependency Injection⚑

A class can be made available as a Service by calling @Injectable() decorator and immediately writing the class.

@Injectable decorator provides metadata that allows other providers to be injected as dependency.

A service class is not associated with any specific View, rather they are share by multiple views and injected as a dependency whenever necessary.