Benutzer:MovGP0/Angular/Modules
< Benutzer:MovGP0 | Angular
| MovGP0 | Über mich | Hilfen | Artikel | Weblinks | Literatur | Zitate | Notizen | Programmierung | MSCert | Physik |
|
|
Modules
[Bearbeiten | Quelltext bearbeiten]- 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)
- Komponenten (Elemente mit UI; Klasse mit
- 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);
|}