Angular 2+ foundations

Webpack has become the defacto standard when building Angular applications, you can check an introduction to Webpack post here on the Angular documentation.

System.js System was heavily used in the beginning whilst Angular was being built and during the release candidate stages before official release, however the team have switched to advocating Webpack instead due to it being much more powerful.

Angular CLI The Angular CLI was built to help scaffold new projects, create components and help with deployment. Underneath it utilises Webpack for you.

The basic building blocks of an Angular application are NgModules, which provide a compilation context for components.

An Angular app is defined by a set of NgModules.

An app always has at least a root module that enables bootstrapping, and typically has many more feature modules.

Components define views, which are sets of screen elements.

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.

Both components and services are simply classes, with decorators that mark their type and provide metadata that tells Angular how to use them.

Metadata is a way of processing the class. A class will be a class unless we tell Angular that is a Component, Service etc. Decorators that mark their type and provide the metadata that tells Angular how to use them.

The metadata for a component class associates it with a template that defines a view.

The metadata for a service class provides the information Angular needs to make it available to components through dependency injection (DI).

Angular provides the Router service to help you define navigation paths among views.

An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities.

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.

Organising your code into distinct functional modules helps in managing development of complex applications. This technique lets you take advantage of lazy-loading—that is, loading modules on demand—

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

A template combines ordinary HTML with Angular directives and binding markup that allow Angular to modify the HTML before rendering it for display.

Angular |-- App1 | |-- Module (root App BS module) | |-- * View * (n) | +-- Component | +-- Template | |-- Service (n) | |-- Module (n) |-- App2 (n)