Nome do Documento / Cliente / 13.03.17 / 11ISCTE FISTA’ 17 – Angular WorkShop
ANGULAR 2 Dive
WORKSHOP FISTA 2017
Alexandre Marreiros
Nome do Documento / Cliente / 13.03.17 / 22ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
ABOUT
Alexandre Marreiros
• Windows Platform Development Microsoft
MVP
• Microsoft Windows DevCamp Trainer
• Windows Insider
• CTO @ Innovagency
• Software Dev/Arch as Independent
• Technical Trainer and Speaker as
Independent
• Teacher @ EDIT
Contacts
@alexmarreiros
amarreiros@innovagency.com
www.innovagency.com
Digitalmindignition.com
Nome do Documento / Cliente / 13.03.17 / 33ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
STATE OF THE ART
Nome do Documento / Cliente / 13.03.17 / 44ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Nome do Documento / Cliente / 13.03.17 / 55ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Nome do Documento / Cliente / 13.03.17 / 66ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Nome do Documento / Cliente / 13.03.17 / 77ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Nome do Documento / Cliente / 13.03.17 / 88ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Nome do Documento / Cliente / 13.03.17 / 99ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Requirements
Nome do Documento / Cliente / 13.03.17 / 1010ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
REQUIREMENTS TO LEARN ANGULAR
Understand JavaScript nuclear concepts and principles
Nome do Documento / Cliente / 13.03.17 / 1111ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
JavaScript
Data types and data strutures
In JavaScript, there are 6 primitive data types, a primitive (primitive value, primitive data type) is data that is not an object and has no methods.
Primitives:
Null
In computer science, a null value represents a reference that points, generally intentionally, to a nonexistent or invalid object or address.
Undefined
A primitive value automatically assigned to variables that have just been declared or to formal arguments for which there are no actual
arguments.
Number
In JavaScript, Number is a numeric data type in the double-precision 64-bit floating point
String
In any computer programming language, a string is a sequence of characters used to represent text.
Object
Object refers to a data structure containing data and instructions for working with the data.
Nome do Documento / Cliente / 13.03.17 / 1212ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
JavaScript
Language
Is a function oriented language that is read by the browser javascript virtual machine in real time
Has as basic concept off interatio with the user the DOM tree that is the object representation off the HTML elements of a page
Is not object oriented but allow the usage off the object concept
var user = {
"first_name" : "Julien",
"last_name" : "Renaux"
}
console.log("My name is " + user["first_name"] + " " + user["last_name"]); // My name is Julien Renaux
Nome do Documento / Cliente / 13.03.17 / 1313ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
JavaScript
JavaScript Study Reference
https://developer.mozilla.org/en-US/docs/Web/JavaScript
Nome do Documento / Cliente / 13.03.17 / 1414ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Angular 2.0
Nome do Documento / Cliente / 13.03.17 / 1515ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
“Angular is a full modern webframework, that enable us to
build core apps over Web Stack”
John Papa
Nome do Documento / Cliente / 13.03.17 / 1616ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
“You write Angular applications by composing
HTML templates with Angularized markup,
writing component classes to manage those templates, adding
application logic in services, and boxing components and services
in modules.”
Angular Alliance
Nome do Documento / Cliente / 13.03.17 / 1717ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
What is
Angular
• Dynamic
• Rich
• Browser Loaded
• Modular Oriented
• Base platform for Web Development
• App development enabler
• SPA oriented
• API oriented
• Designed for Browser and Mobile
• Testable
• Not DOM loading Dependent
Nome do Documento / Cliente / 13.03.17 / 1818ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Language
Angular language support technologies
ES5 ES6 TypeScript Dart
No Compile
Compiled
JavaScript
based
Nome do Documento / Cliente / 13.03.17 / 1919ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Language
Angular language support technologies
ES5 ES6 TypeScript
No Types Support Types Support
Nome do Documento / Cliente / 13.03.17 / 2020ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Nome do Documento / Cliente / 13.03.17 / 2121ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
TypeScript
• Strong Type
• IDE Support
• Syntax checking
• PreCompiled
Nome do Documento / Cliente / 13.03.17 / 2222ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
https://www.typescriptlang.or
Nome do Documento / Cliente / 13.03.17 / 2323ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Angular Popular feacure
Fast Friendly
Modern
Nome do Documento / Cliente / 13.03.17 / 2424ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Angular differents to traditional Web Scripting
Initial Loads
Change Detection
Rendering
Nome do Documento / Cliente / 13.03.17 / 2525ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Angular general Architecture
Nome do Documento / Cliente / 13.03.17 / 2626ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Angular general Architecture
Nome do Documento / Cliente / 13.03.17 / 2727ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Angular Modules
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
NgModule is a decorator function with the following
properties:
declarations - the view classes that belong to this
module. Angular has three kinds of view classes:
components, directives, and pipes.
exports - the subset of declarations that should be
visible and usable in the component templates of
other modules.
imports - other modules whose exported classes are
needed by component templates declared in this
module.
providers - creators of services that this module
contributes to the global collection of services; they
become accessible in all parts of the app.
bootstrap - the main application view, called the root
component, that hosts all other app views. Only the
root module should set this bootstrap property.
Nome do Documento / Cliente / 13.03.17 / 2828ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Angular are build using a component approach
Angular are build using a components approach.
A Angular Component is a combination of:
A HTML Template
A class that controls all the behaviour of a portion
of the screen
Example off a declaration off a component
@Componet({
selector: ‘my-app’,
template: ‘<h1> Hi Angular </h1>’
})
Nome do Documento / Cliente / 13.03.17 / 2929ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Angular are build using a component approach
@Componet({
selector: ‘my-app’,
template: ‘<h1> Hi Angular </h1>’
})
@Component is ued to define the metadata object of a new component in Angular
- The selector indicates the place where the component should be displayed
- The template defines the way the componnt will work if you want to spare the logic off the component from
the render you can use templateurl as a way to point to a html file
Nome do Documento / Cliente / 13.03.17 / 3030ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Angular in Action
Let’s take a look in to Angular in action
Install node JS and grant that you have the right versions of
node and npm
Node –v >= v3.x.x.
Npn –v >= v4.x.x
• Noe power client development with a set off powerfull
tools
• Npn work as a way to quick install JavaScript Libraries
1
2
Go to
https://angular.io/docs/ts/latest/guide/learning-
angular.html
Lets start by quickstarting the initial project
Nome do Documento / Cliente / 13.03.17 / 3131ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Component Architecture
Angular Component inside out:
-A component controls a patch of screen called a view.
-A template is a form of HTML that tells Angular how to render
the component.
-Metadata tells Angular how to process a class.
Nome do Documento / Cliente / 13.03.17 / 3232ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Component Architecture
export class HeroListComponent implements OnInit {
heroes: Hero[];
selectedHero: Hero;
constructor(private service: HeroService) { }
ngOnInit() {
this.heroes = this.service.getHeroes();
}
selectHero(hero: Hero) { this.selectedHero = hero; }
}
Nome do Documento / Cliente / 13.03.17 / 3333ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Component Architecture
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
<li *ngFor="let hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</li>
</ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-
detail>
Nome do Documento / Cliente / 13.03.17 / 3434ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Component Architecture
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}
Nome do Documento / Cliente / 13.03.17 / 3535ISCTE FISTA’ 17 – Angular WorkShop
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
Angular Component Wrapup
Nome do Documento / Cliente / 13.03.17 / 3636ISCTE FISTA’ 17 – Angular WorkShop
Nome do Documento / Cliente / 13.03.17 / 3737ISCTE FISTA’ 17 – Angular WorkShop

Angular 2

  • 1.
    Nome do Documento/ Cliente / 13.03.17 / 11ISCTE FISTA’ 17 – Angular WorkShop ANGULAR 2 Dive WORKSHOP FISTA 2017 Alexandre Marreiros
  • 2.
    Nome do Documento/ Cliente / 13.03.17 / 22ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. ABOUT Alexandre Marreiros • Windows Platform Development Microsoft MVP • Microsoft Windows DevCamp Trainer • Windows Insider • CTO @ Innovagency • Software Dev/Arch as Independent • Technical Trainer and Speaker as Independent • Teacher @ EDIT Contacts @alexmarreiros amarreiros@innovagency.com www.innovagency.com Digitalmindignition.com
  • 3.
    Nome do Documento/ Cliente / 13.03.17 / 33ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. STATE OF THE ART
  • 4.
    Nome do Documento/ Cliente / 13.03.17 / 44ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
  • 5.
    Nome do Documento/ Cliente / 13.03.17 / 55ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
  • 6.
    Nome do Documento/ Cliente / 13.03.17 / 66ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
  • 7.
    Nome do Documento/ Cliente / 13.03.17 / 77ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
  • 8.
    Nome do Documento/ Cliente / 13.03.17 / 88ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
  • 9.
    Nome do Documento/ Cliente / 13.03.17 / 99ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Requirements
  • 10.
    Nome do Documento/ Cliente / 13.03.17 / 1010ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. REQUIREMENTS TO LEARN ANGULAR Understand JavaScript nuclear concepts and principles
  • 11.
    Nome do Documento/ Cliente / 13.03.17 / 1111ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. JavaScript Data types and data strutures In JavaScript, there are 6 primitive data types, a primitive (primitive value, primitive data type) is data that is not an object and has no methods. Primitives: Null In computer science, a null value represents a reference that points, generally intentionally, to a nonexistent or invalid object or address. Undefined A primitive value automatically assigned to variables that have just been declared or to formal arguments for which there are no actual arguments. Number In JavaScript, Number is a numeric data type in the double-precision 64-bit floating point String In any computer programming language, a string is a sequence of characters used to represent text. Object Object refers to a data structure containing data and instructions for working with the data.
  • 12.
    Nome do Documento/ Cliente / 13.03.17 / 1212ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. JavaScript Language Is a function oriented language that is read by the browser javascript virtual machine in real time Has as basic concept off interatio with the user the DOM tree that is the object representation off the HTML elements of a page Is not object oriented but allow the usage off the object concept var user = { "first_name" : "Julien", "last_name" : "Renaux" } console.log("My name is " + user["first_name"] + " " + user["last_name"]); // My name is Julien Renaux
  • 13.
    Nome do Documento/ Cliente / 13.03.17 / 1313ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. JavaScript JavaScript Study Reference https://developer.mozilla.org/en-US/docs/Web/JavaScript
  • 14.
    Nome do Documento/ Cliente / 13.03.17 / 1414ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Angular 2.0
  • 15.
    Nome do Documento/ Cliente / 13.03.17 / 1515ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. “Angular is a full modern webframework, that enable us to build core apps over Web Stack” John Papa
  • 16.
    Nome do Documento/ Cliente / 13.03.17 / 1616ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. “You write Angular applications by composing HTML templates with Angularized markup, writing component classes to manage those templates, adding application logic in services, and boxing components and services in modules.” Angular Alliance
  • 17.
    Nome do Documento/ Cliente / 13.03.17 / 1717ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. What is Angular • Dynamic • Rich • Browser Loaded • Modular Oriented • Base platform for Web Development • App development enabler • SPA oriented • API oriented • Designed for Browser and Mobile • Testable • Not DOM loading Dependent
  • 18.
    Nome do Documento/ Cliente / 13.03.17 / 1818ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Language Angular language support technologies ES5 ES6 TypeScript Dart No Compile Compiled JavaScript based
  • 19.
    Nome do Documento/ Cliente / 13.03.17 / 1919ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Language Angular language support technologies ES5 ES6 TypeScript No Types Support Types Support
  • 20.
    Nome do Documento/ Cliente / 13.03.17 / 2020ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
  • 21.
    Nome do Documento/ Cliente / 13.03.17 / 2121ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. TypeScript • Strong Type • IDE Support • Syntax checking • PreCompiled
  • 22.
    Nome do Documento/ Cliente / 13.03.17 / 2222ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. https://www.typescriptlang.or
  • 23.
    Nome do Documento/ Cliente / 13.03.17 / 2323ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Angular Popular feacure Fast Friendly Modern
  • 24.
    Nome do Documento/ Cliente / 13.03.17 / 2424ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Angular differents to traditional Web Scripting Initial Loads Change Detection Rendering
  • 25.
    Nome do Documento/ Cliente / 13.03.17 / 2525ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Angular general Architecture
  • 26.
    Nome do Documento/ Cliente / 13.03.17 / 2626ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Angular general Architecture
  • 27.
    Nome do Documento/ Cliente / 13.03.17 / 2727ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Angular Modules import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ], providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } NgModule is a decorator function with the following properties: declarations - the view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes. exports - the subset of declarations that should be visible and usable in the component templates of other modules. imports - other modules whose exported classes are needed by component templates declared in this module. providers - creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app. bootstrap - the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.
  • 28.
    Nome do Documento/ Cliente / 13.03.17 / 2828ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Angular are build using a component approach Angular are build using a components approach. A Angular Component is a combination of: A HTML Template A class that controls all the behaviour of a portion of the screen Example off a declaration off a component @Componet({ selector: ‘my-app’, template: ‘<h1> Hi Angular </h1>’ })
  • 29.
    Nome do Documento/ Cliente / 13.03.17 / 2929ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Angular are build using a component approach @Componet({ selector: ‘my-app’, template: ‘<h1> Hi Angular </h1>’ }) @Component is ued to define the metadata object of a new component in Angular - The selector indicates the place where the component should be displayed - The template defines the way the componnt will work if you want to spare the logic off the component from the render you can use templateurl as a way to point to a html file
  • 30.
    Nome do Documento/ Cliente / 13.03.17 / 3030ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Angular in Action Let’s take a look in to Angular in action Install node JS and grant that you have the right versions of node and npm Node –v >= v3.x.x. Npn –v >= v4.x.x • Noe power client development with a set off powerfull tools • Npn work as a way to quick install JavaScript Libraries 1 2 Go to https://angular.io/docs/ts/latest/guide/learning- angular.html Lets start by quickstarting the initial project
  • 31.
    Nome do Documento/ Cliente / 13.03.17 / 3131ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Component Architecture Angular Component inside out: -A component controls a patch of screen called a view. -A template is a form of HTML that tells Angular how to render the component. -Metadata tells Angular how to process a class.
  • 32.
    Nome do Documento/ Cliente / 13.03.17 / 3232ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Component Architecture export class HeroListComponent implements OnInit { heroes: Hero[]; selectedHero: Hero; constructor(private service: HeroService) { } ngOnInit() { this.heroes = this.service.getHeroes(); } selectHero(hero: Hero) { this.selectedHero = hero; } }
  • 33.
    Nome do Documento/ Cliente / 13.03.17 / 3333ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Component Architecture <h2>Hero List</h2> <p><i>Pick a hero from the list</i></p> <ul> <li *ngFor="let hero of heroes" (click)="selectHero(hero)"> {{hero.name}} </li> </ul> <hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero- detail>
  • 34.
    Nome do Documento/ Cliente / 13.03.17 / 3434ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Component Architecture @Component({ moduleId: module.id, selector: 'hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . . */ }
  • 35.
    Nome do Documento/ Cliente / 13.03.17 / 3535ISCTE FISTA’ 17 – Angular WorkShop Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Angular Component Wrapup
  • 36.
    Nome do Documento/ Cliente / 13.03.17 / 3636ISCTE FISTA’ 17 – Angular WorkShop
  • 37.
    Nome do Documento/ Cliente / 13.03.17 / 3737ISCTE FISTA’ 17 – Angular WorkShop

Notas do Editor

  • #27 @NgModule Load Components Bootstrapping Also called Angular Modules Every Angular app has at least one Angular module class, the root module, conventionally named AppModule. An Angular module, whether a root or feature, is a class with an @NgModule decorator.