SPS1

Užitočne Linky

Angular CLI
Stiahnuť Visual Code
W3Schools Angular online tutorial

What is Angular?

Angular (commonly referred to as "Angular 2+" or "Angular v2 and above") is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

AngularJS as it says is a Superheroic JavaScript MVW framework. It assists with running single-page applications. Its goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

AngularJS takes declarative programming to whole new level. It adapts and extends traditional HTML to better serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views.

Angular requires Node.js version 8.x or 10.x.

Get NodeJS

Elements of Angular

Module

Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.

var app = angular.module('moduleName', ['some.Module']);

View

Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.

Controller

A module is a collection of services, directives, controllers, filters, and configuration information. Angular application consists of modules, modules can require as dependency other modules.

Data types

There are four major AngularJS data types (I'm joking, it's TypeScript, actually):

Booleans

let isDone: boolean = false;

Numbers

let decimal: number = 6;

let hex: number = 0xf00d;

let binary: number = 0b1010;

let octal: number = 0o744;

Strings

let color: string = "blue";

color = 'red';

Arrays

let list: number[] = [1, 2, 3];

Array<elemType>

let list: Array<number> = [1, 2, 3];

Tuples

// Declare a tuple type

let x: [string, number];

// Initialize it

x = ["hello", 10]; // OK

// Initialize it incorrectly

x = [10, "hello"]; // Error

Enums

enum Color {Red, Green, Blue}

let c: Color = Color.Green;

let notSure: any = 4;

notSure = "maybe a string instead";

notSure = false; // okay, definitely a boolean

Void

function warnUser(): void {

                    console.log("This is my warning message"console.log(;

                    }

Objects

More types
And some more about types
And some more types again

Important stuff

There is a special

We write FOR in HTML tag:*ngFor="let p of CLASS""
Example for IF:

@Component({

                   selector: 'ng-if-simple',

                    template: `

                    <button (click)="show = !show">{{show ? 'hide' : 'show'}}

                    show = {{show}}

                    <br>

                    <div *ngIf="show">Text to show</div>

                    `

                    })

                    class NgIfSimple {

                    show: boolean = true;

                    }

Vypis do konzoly: console.log("")


                Buttons
                    Button in HTML:

                    <button mat-button>Click me!</button>
                    Button in TS:

                    
                    import {Component} from '@angular/core';   

                    @Component({

                    selector: 'button-overview-example',

                    templateUrl: 'button-overview-example.html',

                    styleUrls: ['button-overview-example.css'],

                    })

                    export class ButtonOverviewExample {}


                
                 
Task 1
    Create a new application.
    
    npm install -g @angular/cli
        

    ng new my-app
    
    
    
Task 2
    Change the title name on the main page.
    
    
Task 3
    Add to your page a table

Task 4
    Create new component which will represent table
    
    
Task 5
Create new component which will display the string you write in the field    
    
Task 6
Create new component which will display the current time
    
        
        Create new variable and define it's type:
        
        private NAME: type;
        OnInit: A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive. Define an ngOnInit() method to handle any additional initialization tasks.
        ngOnInit:A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
        OnDestroy: ngOnDestroy
        
        The only difference between arrow functions and functions declared with function is that this has lexical binding in arrow functions instead of the confused morass of binding in regular functions. More about arrow functions
                 
                 
    
    

                
BONUS TASK
Create an app TODO-list app