Scribd Logo
Upload

Welcome to Scribd!

  • 138 views

    Lab1 Angular PDF

    Uploaded by

    Sana Bargaoui

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Lab1 Angular PDF

    Uploaded by

    Sana Bargaoui
    138 views8 pages

    Original Title

    Lab1 Angular.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    138 views8 pages

    Lab1 Angular PDF

    Uploaded by

    Sana Bargaoui

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 8

    Formation Angular

    Lab 1 Components

    Lab 1.1: Basics

    1. Build the app using the CLI:

    Enter the following command, which will create a new Angular app in a
    folder called Start and will also create and spew out lots of files:

    ng new components-ex1 --inline-template --inline-style

    2. Start ng serve: Use the following code:

    cd components-ex1
    ng serve

    3. Open app:

    Launch your web browser and browse to localhost:4200.

    You should see the text “welcome to app!” as shown in Figure below. That
    means your project is running.

    4. Edit component:

    Edit the file src/app/app.component.ts and change it to the following:


    import { Component } from '@angular/core';
    @Component({
    selector: 'app-root',
    template: `
    <h1>
    {{title}}
    </h1>
    <p>
    Length: {{title.length}}
    </p>

    <p>

    Reversed: {{getReversed(title)}}
    </p>
    `,

    styles: [] })

    export class AppComponent {


    title = 'welcome to app!';
    getReversed(str: string){
    let reversed = '';
    for (let i=str.length-1;i>=0;i--){
    reversed += str.substring(i,i+1);
    }
    return reversed;
    }
    }

    Your app should be working at localhost:4200. Note how the template uses
    two expressions: one to show the length of the title and another to reverse the
    title using a method in the class.
    Lab 1.2: One way Data Binding

    This component will list some cars and let you click the View button to view
    an article about the car, as shown in Figure below

    1. Build the app using the CLI:

    Enter the following command:


    ng new components-ex2 --inline-template --inline-style
    2. Start ng serve:

    Use the following code:

    cd components-ex2

    ng serve

    3.Open app:

    Open your web browser and browse to localhost:4200. You should see
    the text “welcome to app!” That means your project is running. 


    4.Edit component:

    Edit the file src/app/app.component.ts and change it to the following: 


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

    import { Car } from './car';


    @Component({
    selector: 'app-root',
    template: `
    
 <ul>
    <li *ngFor="let car of _cars">
    
<span [attr.id]="car.id" [attr.data-desc]="car.make + ' 
' + car.model"
    [attr.data-article]="car.article">
    {{car.year}}&nbsp;{{car.make}} {{car.model}} <button
    (click)="showCar($event)">View</button></span>
    </li> </ul>

    `,
    styles: []

    })

    export class AppComponent {


    _cars = [
    new Car('car1', 2002, 'bmw', 'm3',
    'https://en.wikipedia.org/wiki/BMW_M3'),
    new Car('car2', 2017, 'acura', 'nsx',
    'https://en.wikipedia.org/wiki/Honda_NSX'),
    new Car('car3', 2016, 'chevy', 'camaro',
    'https://en.wikipedia.org/wiki/Chevrolet_Camaro')
    ];

    showCar(event){
    const desc = event.target.parentElement.dataset.desc;
    if (window.confirm('If you click "ok" you would be redirected to an
    article about the ' + desc + '. Cancel will load this website ')){
    window.location.href=event.target.parentElement.
    dataset.article;
    }
    }

    5. Create class:

    Create the file src/app/car.ts and change it to the following:

    export class Car {


    constructor(
    private _id: string,
    private _year: number,
    private _make: string,
    private _model: string,
    private _article: string){
    }

    public get id() : string {

    return this._id;
    }

    public get year() : number {


    return this._year;
    }

    public get make() : string {


    return this._make;
    }

    public get model() : string {


    return this._model;
    }

    public get article() : string {


    return this._article;
    }

    Lab 1.3: Two ways Data Binding


    This is a component that changes foreground and background colors when the
    user changes their input, as shown in Figure below : 


    5. 1. Build the app using the CLI:

    Enter the following command:


    ng new components-ex3 --inline-template --inline-style 



    2. Start ng serve:

    Use the following code:

    cd components-ex3

    ng serve

    6.Open app:

    Open your web browser and browse to localhost:4200. You should see the
    text “welcome to app!” That means your project is running. 


    7.Edit module:

    Edit the file src/app/app.module.ts and change it to the following: 
 import {


    BrowserModule } from '@angular/platform-browser';

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


    
 import { AppComponent } from './app.component';
    import { FormsModule } from '@angular/forms';
    
 @NgModule({
    declarations: [
    
 AppComponent
    ],
    
 imports: [
    BrowserModule,
    FormsModule
    
 ],
    providers: [],
    bootstrap: [AppComponent]
    
 })
    export class AppModule { }
    

    8. Edit component:

    Edit the file src/app/app.component.ts and change it to the following: 



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

    
 @Component({
    selector: 'app-root',
    template: `
    <p>
    Foreground: <input [(ngModel)]="fg" />
    </p>
    <p>
    Background: <input [(ngModel)]="bg" />
    </p>
    <div [ngStyle]="{'color': fg, 'background-color': bg,
    'padding': '5px'}">
    Test
    </div>
    `,
    styles: []
    })
    export class AppComponent {
    fg = "#ffffff";
    bg = "#000000";
    }

    
 Lab 1.4: Event Handling


    This component accepts input in a textbox, captures the input event, and
    displays the input in both upper and lower-case, as shown in Figure below:

    1. Build the app using the CLI: Enter the following command:
ng new
    components-ex400 --inline-template --inline-style

    2. Start ng serve: Use the following code: cd components-ex400

    ng serve

    3. Open app: Launch a web browser and navigate to localhost:4200. You


    should see “welcome to app!”

    4. Edit class: Edit app.component.ts and change it to the following:


    import { Component, AfterViewInit, ViewChild } from
    '@angular/core';

    @Component({
    selector: 'app-root',
    template: `
    <input #input type="text" (input)="textInput($event)"
    value=""/>
    <hr>
    Upper-Case: {{upperCase}}
    <br/>
    Lower-Case: {{lowerCase}}
    `,
    styles: [] })

    export class AppComponent implements AfterViewInit{


    upperCase: string= '';
    lowerCase: string = '';
    @ViewChild('input') inputBox;
    s
    textInput(event){
    this.upperCase = event.target.value.toUpperCase();
    this.lowerCase = event.target.value.toLowerCase();
    }

    ngAfterViewInit() {
    this.inputBox.nativeElement.focus()
    s}

    You might also like