angular

Angular Playground

Command line

Angular has a command line tool allowing to create projects, adding components, serving the application and many more. See ng --help for more info

Big Picture

Typescript, super-set of Javascript, is used.

• Components: UI-Code consisting of HTML-template and Code, like Lego-Block
• Service: Reusable Code
• Modules: Organize Code

<img src=angular-elements.png"/>

Components

Consist of imports ```javascript import {Component} from '@angular/core' ```

Decorators

@Component({
 selector: 'app-customer',
 templateUrl: '../customers.component.html'
 }}

Class
export class CustomerComponent {
}

Module

Every app has a least a model, like a container for legos

Property and Event Binding

<h1 [hidden]="!isVisible">{{title}}</h1>
<button (click)="changeVisibility()">

<tr *ngFor="let cust of filteredCustomers" : Directive

Best practices

- Add lint - Protractor.js -> E2E-Tests - Karma -> Junit-Testing - .editconfig