Quelltext der Seite Benutzer:MovGP0/Angular/Modules

{{Benutzer:MovGP0/Vorlagen/ECMAScript}}

== Modules ==
* Ein Modul wird mit dem <code>@ngModule</code>-Attribut ausgezeichnet 
* Importiert und exportiert
** Komponenten (Elemente mit UI; Klasse mit <code>@Component</code>-Attribut)
** Services (Klassen ohne UI)
** Pipes (Klasse mit <code>@Pipe</code>-Attribut)

;index.html
<syntaxhighlight lang="typescript">
<!DOCTYPE html>
<html>
  <head>
    <title>...</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://unpkg.com/core-js/client/shim.min.js"></script> <!-- Polyfills -->
    <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script> <!-- für async-->
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script> <!-- für Dependency Injection -->
    <script src="systemjs.config.js"></script> <!-- Dependency Injection Configuration -->
    <script>
      System.import('main.js').catch(function(err){ console.error(err); }); // bootstrapping 
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>
</syntaxhighlight>

;app/app.component.ts
<syntaxhighlight lang="typescript">
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: 'app.html'
})
export class AppComponent { name = 'Angular'; }
</syntaxhighlight>

;app/app.module.ts
<syntaxhighlight lang="typescript">
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ], // app needs to run in the browser
  declarations: [ AppComponent ], 
  bootstrap:    [ AppComponent ] // the module which bootstraps the application's html
})
export class AppModule { }
</syntaxhighlight>

;main.ts
<syntaxhighlight lang="typescript">
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
</syntaxhighlight>