Angular Application Modularity

JavaScript Modules vs. NgModuleslink

JavaScript and Angular use modules to organize code, and though they organize it differently, Angular apps rely on both.

• JavaScript modules
  In JavaScript, modules are individual files with JavaScript code in them. To make what’s in them available, you write an export statement, usually after the relevant code, like this:

  export class AppComponent { ... }

  Then, when you need that file’s code in another file, you import it like this:

  import { AppComponent } from './app.component';

  JavaScript modules help you namespace, preventing accidental global variables.

• NgModules
  NgModules are classes decorated with @NgModule. The @NgModule decorator’s imports array tells Angular what other NgModules the current module needs. The modules in the imports array are different than JavaScript modules because they are NgModules rather than regular JavaScript modules. Classes with an @NgModule decorator are by convention kept in their own files, but what makes them an NgModule isn’t being in their own file, like JavaScript modules; it’s the presence of @NgModule and its metadata.

  import NgModule from JavaScript Module @angular/core
  import { NgModule } from '@angular/core';

  The AppModule generated from the Angular CLI demonstrates both kinds of modules in action:

  /* These are JavaScript import statements. Angular doesn’t know anything about these. */
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
   
  import { AppComponent } from './app.component';
   
  /* The @NgModule decorator lets Angular know that this is an NgModule. */
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [     /* These are NgModule imports. */
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

  The NgModule classes differ from JavaScript module in the following key ways:

  1. An NgModule bounds declarable classes only. Declarables are the only classes that matter to the Angular compiler.
  2. Instead of defining all member classes in one giant file as in a JavaScript module, you list the module's classes in the @NgModule.declarations list.
  3. An NgModule can only export the declarable classes it owns or imports from other modules. It doesn't declare or export any other kind of class.
  4. Unlike JavaScript modules, an NgModule can extend the entire application with services by adding providers to the @NgModule.providers list.

• Bootstrapping
  An NgModule describes how the application parts fit together. Every application has at least one Angular module, the root module that you bootstrap to launch the application. By convention, it is usually called AppModule.

  After the import statements is a class with the @NgModule decorator.

  The @NgModule decorator identifies AppModule as an NgModule class. @NgModule takes a metadata object that tells Angular how to compile and launch the application.

  • declarations—this application's lone component.
  • imports—import BrowserModule to have browser specific services such as DOM rendering, sanitization, and location.
  • providers—the service providers.
  • bootstrap—the root component that Angular creates and inserts into the index.html host web page. The default CLI application only has one component, AppComponent, so it is in both the declarations and the bootstrap arrays.

---

Angular Glossary

• Ahead-of-time (AOT) compilation
  The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. This is the best compilation mode for production environments, with decreased load time and increased performance.
  By compiling your application using the ngc command-line tool, you can bootstrap directly to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle.

• Class decorator
  A decorator statement immediately before a class definition that declares the class to be of the given type, and provides metadata suitable to the type.

  The following class types can be declared:

  • @Component
  • @Directive
  • @Pipe
  • @Injectable
  • @NgModule

• Data binding ^Youtube
  Data binding allow apps to display data values to a user and respond to user actions (such as clicks, touches, and keystrokes).

  In data binding, you declare the relationship between an HTML widget and data source and let the framework handle the details. Data binding is an alternative to manually pushing application data values into HTML, attaching event listeners, pulling changed values from the screen, and updating application data values.

  Read about the following forms of binding in the Template Syntax page:

  • Interpolation.
  • Property binding.
  • Event binding.
  • Attribute binding.
  • Class binding.
  • Style binding.
  • Two-way data binding with ngModel.

---

---

Module Vs Component:^Youtube

Components control views (html). They also communicate with other components and services to bring functionality to your app.

Modules consist of one or more components. They do not control any html. Your modules declare which components can be used by components belonging to other modules, which classes will be injected by the dependency injector and which component gets bootstrapped. Modules allow you to manage your components to bring modularity to your app.