Angular - Jump Start

Weslen Breno B. Soares

Instituto Metrópole Digital – UFRN
weslenbreno@gmail.com
O que é o Angular ?

2
 O que é o Angular ?

● Um framework Javascript

3
 O que é o Angular ?

● Um framework Javascript
● Open Source

4
 O que é o Angular ?

● Um framework Javascript
● Open Source
● Google

5
 O que é o Angular ?

● Um framework Javascript
● Open Source
● Google
● Typescript

6
 Typescript

● Um superconjunto do Javascript

7
 Typescript

● Types
var nome: string = 'Angular';
var idade: number = 17;
var jubilado: boolean = true;

var jobs: Array<string> = ['IBM', 'Microsoft', 'Google'];

var jobs: string[] = ['Apple', 'Dell', 'HP'];
enum Role {Employee, Manager, Admin};
var role: Role = Role.Employee;
var something: any = 'as string';
something = 1;
something = [1, 2, 3];

8
 Typescript

● Classes
class Person {

first_name: string;
last_name: string;
age: number;

consctructor(){}

greet() {
console.log("Hello", this.first_name);
}
}

9
 Typescript

● Interfaces
interface Callback {
(error: Error, data: any): void;
}

function callServer(callback: Callback) { interface Action{

callback(null, 'hi'); type: string;
} }

callServer((error, data) => console.log(data)); // 'hi' let a: Action = {

callServer('hi'); type: 'literal'
}

10
 Typescript

● Decorators

11
 Angular CLI

● Ferramenta criada para agilizar o

desenvolvimento no Angular

12
 Angular CLI

● Ferramenta criada para agilizar o

desenvolvimento no Angular
● Estrutura de um projeto com o
angular-cli

13
 Components

● Partes de uma aplicação

14
Components

15
 Component

● Anotações

@Component({
selector: 'app-post-list',
})
class PostListComponent {

16
 Template

● Parte visual do componente

@Component({
selector: 'app-post-list',
template: `
<div class="post-list">
(Uma lista de posts aqui)
</div>`
})

17
 Styles

● Adicionando estilos

@Component({
selector: 'app-post-list',
templateUrl: './post-list.component.html',
styleUrls: ['./post-list.component.css']
})

18
 Data Binding

● Interpolação
● Property
● Event
● Class
● Style
● Two Way

19
 Interpolação

● Apresentando os dados do
componente no template ou
expressões
@Component({
selector: 'app-hello',
template: `<p>Hello, {{name}}!</p>`,
})
export class HelloComponent {
name: string;

constructor() {
this.name = 'World';
}
}

20
 Property Binding

<img [src]="heroImageUrl">

<button [disabled]="isUnchanged">Cancel is disabled</button>

<hero-detail [hero]="currentHero"></hero-detail>

21
 Event Binding

<button (click)="onClickMe()">Click me</button>

22
 Class Binding

<!-- toggle the "special" class on/off with a property -->

<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to `class.special` trumps the class attribute -->

<div class="special" [class.special]="!isSpecial">Not so special</div>

23
 Style Binding

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>

<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

24
 Directives

● NgIf
● NgFor
● NgSwitch

25
 NgIf

● Recebe uma expressão booleana e

mostra ou não uma parte do DOM

<p *ngIf="true">
Expression is true and ngIf is true.
This paragraph is in the DOM.
</p>

<p *ngIf="false">
Expression is false and ngIf is false.
This paragraph is not in the DOM.
</p>

26
 NgFor

● Repete parte do DOM de acordo com o

tamanho do array
<ul>
<li *ngFor="let hero of heroes">{{hero.name}}</li>
</ul>

27
 NgSwitch

● Mostra parte do DOM a partir de um

valor

<div [ngSwitch]="hero?.emotion">
<happy-hero *ngSwitchCase="'happy'" [hero]="hero"></happy-hero>
<sad-hero *ngSwitchCase="'sad'" [hero]="hero"></sad-hero>
<unknown-hero *ngSwitchDefault [hero]="hero"></unknown-hero>
</div>

28
 Input

● Passando dados para um componente

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

@Component({
selector: 'app-hello',
template: '<p>Hello, {{name}}!</p>',
})
export class HelloComponent {
@Input() name: string;
}

<app-hello name="World"></app-hello>
<app-hello [name]="helloName"></app-hello>

29
 Módulo de funcionalidade

● Modularizando o app

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

import { CommonModule } from '@angular/common';

@NgModule({
imports: [ CommonModule],
exports: [ CommonModule],
declarations: []
})
export class SharedModule { }

30
 Services

● Responsáveis pela lógica

● DRY
● Testes

31
Dependency Injection

32
 Routing

● Roteamento Simples
● Roteamento com módulos
● Módulo de rotas
● Rotas Filhas

33
 Roteamento Simples

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [

{ path: 'component-one', component: ComponentOne },
{ path: 'component-two', component: ComponentTwo }
];

export const routing = RouterModule.forRoot(routes);

34
 RouterLink

<a routerLink="/component-one">Component One</a>

35
 Rotas filhas

export const routes: Routes = [

{ path: '', redirectTo: 'product-list', pathMatch: 'full' },

{ path: 'product-list', component: ProductList },
{ path: 'product-details/:id', component: ProductDetails,
children: [
{ path: '', redirectTo: 'overview', pathMatch: 'full' },
{ path: 'overview', component: Overview },
{ path: 'specs', component: Specs }
]
}
];

imports: [RouterModule.forChild(routes)]

36
Dúvidas ?

37