Benutzer:MovGP0/Angular/Modules

aus Wikipedia, der freien Enzyklopädie
   MovGP0        Über mich        Hilfen        Artikel        Weblinks        Literatur        Zitate        Notizen        Programmierung        MSCert        Physik      


Modules

  • Ein Modul wird mit dem @ngModule-Attribut ausgezeichnet
  • Importiert und exportiert
    • Komponenten (Elemente mit UI; Klasse mit @Component-Attribut)
    • Services (Klassen ohne UI)
    • Pipes (Klasse mit @Pipe-Attribut)
index.html
<!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>
app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: 'app.html'
})
export class AppComponent { name = 'Angular'; }
app/app.module.ts
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 { }
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);