...
Het duurde even tot ik de beginnende kneepjes van Angular in de hand had. Dit kwam wel vrij snel door de grote hoeveelheid documentatie die Angular aanbied. Voor bijna elk component dat Angular aanbiedt zijn er tientallen voorbeelden over hoe je het zou kunnen gebruiken. Hierdoor was het maken van het prototype zeer gemakkelijk en vanzelfsprekend. Het enige wat iets lastig was, was het feit dat het maken van pagina's iets uitgebreider was dan met bijvoorbeeld Vue.js.
| Code Block |
|---|
| language | js |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| title | prototype angular |
|---|
|
<div class="container">
<h1> Dashboards </h1>
<ul *ngFor="let dashboard of dashboards">
<li> Auto: {{ dashboard.car }} coureur: {{ dashboard.driver }} <button>kijk mee</button></li>
</ul>
</div> |
| Code Block |
|---|
| language | js |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| title | prototype angular |
|---|
|
import { Component } from '@angular/core';
import dashboardData from './json/dashboard.json';
interface dashboard {
ID: Number;
car: String;
driver: String;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'prototype';
// @ts-ignore
dashboards: dashboard[] = dashboardData;
} |
Omdat angular ook een google API integratie hebben we hier ook een prototype voor gemaakt
| Code Block |
|---|
| theme | Eclipse |
|---|
| title | angular ts |
|---|
|
import { Component, OnInit } from '@angular/core';
import {FormControl} from "@angular/forms";
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
tabs = ['First', 'Second', 'Third'];
selected = new FormControl(0);
addTab(selectAfterAdding: boolean) {
this.tabs.push('New');
if (selectAfterAdding) {
this.selected.setValue(this.tabs.length - 1);
}
}
removeTab(index: number) {
this.tabs.splice(index, 1);
}
}
|
...