Angular

Concept

• Angular Home

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

The basic building blocks are NgModules, which provide a compilation context for components. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a root module conventionally named AppModule that enables bootstrapping, and typically has many more feature modules. Like JavaScript modules, NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules. For example, to use the router service in your app, you import the Router NgModule.

Every Angular application has at least one component, the root/top level component that connects a component hierarchy (component tree) 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. 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. Modules, components and services are classes that use decorators. These decorators mark their type and provide metadata that tells Angular how to use them. The metadata for a component class associates it with a template that defines a view. A template combines ordinary HTML with Angular directives and binding markup that allow Angular to modify the HTML before rendering it for display. The metadata for a service class provides the information Angular needs to make it available to components through dependency injection (DI).

draw.io diagram

Style Guide

• https://angular.io/guide/styleguide

Installation

npm install -g @angular/cli
ng // Angular cli
ng version // prints version

cd C:\Uwes
mkdir angular

Test Application

ng new my-app1
cd my-app1
ng serve --open
http://localhost:4200/

File Structure

my-app1\src\
  main.ts
my-app1\src\app
  app.component.ts

  app.module.ts

Resources

• Official Getting Started
• [1]