SlideShare una empresa de Scribd logo
1 de 117
Descargar para leer sin conexión
ANGULAR ( YES
ANGULAR 2 )
1
About me
Google Developer Expert
Telerik Developer Expert
Fullstack developer at Digital McKinsey
@chris_noring
2 . 1
SPA VS NORMAL
HOME PAGE
3 . 1
NORMAL PAGE
3 . 2
3 . 3
PAGE SUMMARY
3 . 4
Good at rendering pages, fast
SEO, search engine optimization, is easy
Good for ecommerce systems showing different
product pages
Page flickers on loading a page
3 . 5
SPA
SINGLE PAGE APPLICATION
3 . 6
3 . 7
SPA SUMMARY
3 . 8
When you want a client on the web, think timesheet,
benefit system, excel etc..
More like a client than a page, it's fast
SEO is hard, there are no pages to index, there are
solutions though
Navigation is done by switching content, NO PAGE
FLICKERING
Rerender part of the page only, with received JSON
3 . 9
PROBLEMS TO SOLVE
IN AN APP
4 . 1
Problems to solve in an app
4 . 2
Collecting/Presenting and validating data from
Forms
Navigation, your app will have more than one view
How to read/write data from an API
Styling - selecting a CSS framework
4 . 3
TYPESCRIPT
5 . 1
It's typed javascript
5 . 2
Variables and types
5 . 3
ES5
var a = 3;
var b = 'a string';
var c = false;
5 . 4
Typescript
let a:number = 3; // will be a number
let b:string = 'a string'; // will be a string
let c:boolean = false; // will be a boolean
let d; // will be supertype any
a = "some string" // not ok
c = 4 // not ok
5 . 5
Functions
5 . 6
ES5
function add(a,b) {
return a + b;
}
add(1,3) // 4
add('some','string') // somestring
5 . 7
Typescript
function add(a:number,b:number):number {
return a + b;
}
add(1,3) // 4
add('some','string') // compile time error
5 . 8
Classes
5 . 9
ES5
function Hero(name){
this.name;
}
Hero.prototype.getName = function(){
return this.name;
}
5 . 10
Typescript
class Hero {
private name:string;
constructor(name:string) {
this.name = name;
}
}
getName(){
return this.name;
}
var hero = new Hero('Arthur')
5 . 11
Or even shorter
5 . 12
Typescript
Creates the backing fields for you and accessor level.
class Hero {
constructor(
private name:string,
private description:string) {}
}
getName(){
return this.name;
}
let hero = new Hero('Arthur')
5 . 13
Interfaces
5 . 14
Typescript
Forces class to adhere to protocol
interface ICharacter {
name:string;
getName():string;
speak();
}
class Player implements ICharacter{
name:string;
getName():string{
return 'string';
}
speak(){
}
}
5 . 15
Inheritance
5 . 16
ES5
function Character(name){
this.name = name;
}
function Character.prototype.method = function(){}
function Player(name){
Character.call(this,name); // call super class constructor
}
Player.prototype = Object.create(Character.prototype); // inherits
var player = new Player('Arthur')
player.method();
5 . 17
Typescript
class Character{
constructor(protected name:string) {}
method(){}
}
class Player extends Character{
constructor(name:string){
super( name );
}
}
let player = new Player('Arthur')
player.method();
5 . 18
ANGULAR
BUILDING BLOCKS
6 . 1
Component
Structural Directives
Pipes ( filters )
Service
Module
6 . 2
COMPONENT
A PIECE OF FUNCTIONALITY WITH ITS OWN HTML
TEMPLATE, STYLING AND BACKING CLASS
6 . 3
Has a selector, template ( + a bunch more properties )
and a backing class
@Component({
selector : 'hello-world',
template : `
<div>{{title}}</div>
`
})
class HelloWorldComponent{
title:string;
constructor() { this.title = 'hello world'; }
}
//usage
<hello-world>
6 . 4
SERVICE
WHERE YOUR DATA COMES FROM
6 . 5
service.ts
@Inject() is what makes it available for components
@Inject()
class Service {
getData():string { return 'some data' }
}
6 . 6
Service is injected into component constructor
import { Service } from './service';
@Component({
selector : 'hello-world',
template : `
<div>{{title}}</div>
`
})
class HelloWorldComponent{
title:string;
constructor( private service:Service) {
this.title = this.service.getData();
}
}
6 . 7
MODULE
A MODULE IS A CONTAINER THAT HOLDS EVERYTHING
LIKE COMPONENTS, SERVICES ETC.
6 . 8
app.module.ts
A module decorates a class
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, // general helpers like if, loops etc
FormsModule, // dealing with forms
HttpModule // dealing with fetching data
],
providers: [
Service
],
bootstrap: [AppComponent]
})
export class AppModule {}
6 . 9
import : what modules we depend on
providers: what services we want other components
to be able to use
bootstrap : what component is considered the
starting point
declarations: what components does this module
consist of
6 . 10
STRUCTURAL
DIRECTIVES
6 . 11
*ngFor
@Component({
selector : 'product-list',
template : `
<div *ngFor="let product of products">{{product.name}}</div>
`
})
class ProductListComponent{
products = [{name : 'DVD'}, {name : 'CD'}];
}
6 . 12
*ngIf="boolean"
Only renders something in the DOM if condition is true
<div *ngIf="product">{{ product.title }}</div>
<div *ngIf="!product">No product is selected</div>
6 . 13
*[ngSwitch]
<div [ngSwitch]="color">
<div *ngSwitchCase="'blue'">I'm feeling blue</div>
<div *ngSwitchCase="'red'">I'm angry</div>
<div *ngSwitchCase="'green'">I'm happy</div>
</div>
6 . 14
INTRODUCING
BINDINGS
6 . 15
interpolation
expression
<div>{{ product.name }}</div>
<div>{{ 1+1 }}</div>
6 . 16
Property binding [attribute] = propertyInComponent
<div [title]="tooltip">
class Component {
tooltip:string;
}
6 . 17
[class.classToApply]="boolean"
Sets one class
<div [class.setThisClass]="basedOnThisCondition"></div>
<!-- possible outcome is -->
<div class="setThisClass"></div>
<!-- or -->
<div class=""></div>
6 . 18
[ngClass]="{classToApply: boolean, anotherClass:
boolean...}
Has the pontential to set more than one class
<div [ngClass]="{selected: isSelected} "></div>
6 . 19
[style.property]="boolean"
Sets one property
<div [style.color]="isRed ? 'red' : 'green'"></div>
<!-- possible outcome is -->
<div class="setThisClass"></div>
<!-- or -->
<div class=""></div>
6 . 20
(event)=method()
<button (click)="save()" ></button>
class Component{
save(){
console.log('save');
}
}
6 . 21
[(ngModel)]="propertyOnComponent"
This one is called "banana in a box"
<input [(ngModel)]="product.name">
<!-- shorthand for the following -->
<input [value]="product.name"
(input)="product.name = $event.target.value">
class ProductComponent {
product:Product;
}
6 . 22
Pipes
6 . 23
A pipe is a way to format your data or filter a collection
of data
6 . 24
Formatting a list, ordering
<div *ngFor="let product of products | sort">
6 . 25
transform method, takes array as input
@Pipe({
name: "sort"
})
export class ProductSortPipe {
transform(array: Array<Product>, args: string): Array<Product>
array.sort((a: Product, b: Product) => {
if (a.title.toLowerCase() < b.title.toLowerCase()) {
return -1;
} else if (a.title.toLowerCase() > b.title.toLowerCase()) {
return 1;
} else {
return 0;
}
});
return array;
}
6 . 26
Transform method, takes a value as input
@Pipe({
name: "bananas"
})
export class BananasPipe{
transform(val, ...args){
return `${val}, is bananas B A N A N A S`
}
}
6 . 27
<div>
{{ 'This shit' | bananas }}
</div>
This shit, is bananas B A N A N A S
6 . 28
LET'S BUILD AN APP
7 . 1
Can also scaffold components, pipes etc, run tests etc..
npm install -g @angular/cli
ng new PROJECT-NAME
ng serve
7 . 2
show a list of items
7 . 3
usage, feed it data
@Component({
selector : 'app',
template : `<product-list>`
})
export class AppComponent {
products: Product[];
constructor(){
this.products = [ { name : 'Star Wars Episode IV' } ];
}
}
<product-list [products]="products" >
7 . 4
Defining our list component, @Input()
@Component({
selector : 'product-list',
template : `
<div *ngFor="let product of products">
{{ product.name }}
</div>
`
})
export class ProductListComponent {
@Input() products: Product[]; // input
}
7 . 5
create an item and add to list
7 . 6
<product-list [products]="products" >
<create-item (create)="create($event)"></create-item>
@Component({
selector : 'app'
})
export class AppComponent{
products: Product[]; selected
create(name:string) {
this.products = [
...this.products,
Object.assign({}, { name : name })
];
}
}
7 . 7
And Create Product Component
@Component({
selector : 'create-item',
template : `
<div>
<input type="text" [(ngModel)]="product" >
<button (click)="save()">Save</button>
</div>`
})
export class CreateProductComponent {
product:string;
@Output create = new EventEmitter();
save(){
this.create.emit( product );
this.product = '';
}
7 . 8
Update product, mark product as done
7 . 9
AppComponent, add 'selection' and 'update'
cabability
@Component({
selector : 'app'
})
export class AppComponent{
products: Product[];
update(product:Product) {
this.products = [
...this.products.filter( p => p.id !== product.id ),
Object.assign({}, product)
}
select(product:Product){ this.selectedProduct = product; }
}
<product-list (select)="select($event)" [products]="products" >
<create-item (create)="create($event)"></create-item>
<edit-product [product]="selectedProduct" (update)="update($event)"
7 . 10
Updating product list, give it selection ability
@Component({
selector : 'product-list',
template : `
<div *ngFor="let product of products">
{{ product.name }} <button (click)="select.emit(product)">
</div>
`
})
export class ProductListComponent {
@Input() products: Product[]; // input
@Output() select = new EventEmitter<Product>();
}
7 . 11
Edit product component
@Component({
selector : 'edit-product',
template : `<div>{{ product.name }}<button (click)="update.emit
})
export class EditProductComponent {
@Input() product:Product;
@Output() update = new EventEmitter<Product>();
}
7 . 12
remove item from list
7 . 13
Updating App Component, adding 'remove'
@Component({
selector : 'app'
})
export class AppComponent{
products: Product[];
remove(product:Product){
this.products = this.products.filter( p => p.id !== product
}
}
<product-list [products]="products" (remove)="remove($event)" ></
7 . 14
Updating Product list
@Component({
selector : 'product-list'
})
export class ProductListComponent{
@Output() remove = new EventEmitter<Product>();
}
7 . 15
SUMMARY SO FAR
@Input is used for input data to a component
@Output is used for invoking methods tied to the
component
We should have a dedicated component per action
7 . 16
ADDING EXTERNAL
DATA SOURCE
8 . 1
We usually get our data from an API, back comes JSON
8 . 2
There are two choices in Angular, RxJS Observables or
Promises
8 . 3
Http Service
8 . 4
import { Http, Response } from '@angular/http';
@Injectable()
export class Service{
baseUrl:string = 'http://swapi.co/api/';
constructor(private http:Http){}
private getHeroes():Observable<Hero[]>{
return this.httpService
.get(`${this.baseUrl}people/`)
.map( res => res.json())
.map( this.mapHeroes );
}
private mapHeroes(json):Hero[]{
return json.results
8 . 5
We are dealing with Observables, they deal with
requests in three steps
8 . 6
1) Fetch data
2) Transform data
3) Subscribe + Handle errors
this.httpService
.get(`${this.baseUrl}people/`)
.map( res => res.json())
.map( this.mapHeroes )
.subscribe(fnData, fnError)
8 . 7
The promise way
8 . 8
private getHeroes():Observable<Hero[]>{
return this.httpService
.get(`${this.baseUrl}people/`)
.map( res => res.json())
.map( this.mapHeroes )
.toPromise()
.then(fnData, fnError);
}
8 . 9
Subscription vs async pipe
8 . 10
@Component({
template : `
<div *ngFor="let hero of heroes | async">
{{ hero.name }}
</div>
`
})
export class AppComponent{
heroes$:Observable<Hero[]>;
constructor( service:Service){
this.heroes = service.getHeroes()
}
}
8 . 11
Async pipe handles subscribe and unsubscribe
8 . 12
Without async pipe
8 . 13
OnInit, OnDestroy, we need to setup
subscribe/unsubscribe
@Component({
template : `
<div *ngFor="let hero of heroes">
{{ hero.name }}
</div>
`
})
export class AppComponent implements OnInit, OnDestroy{
heroes:Hero[];
subscription;
constructor( service:Service){
}
ngOnInit(){
this.subscription = service.getHeroes().subscribe( data =>
8 . 14
No async pipe, you need to handle unsubscribe ( to
clean up ), generally more boiler plate
8 . 15
ROUTING
9 . 1
Your app will most likely consist of multiple views,
routing is about defining those views and learn to
navigate between them
9 . 2
Setting base href=""
<base href="">
9 . 3
Defining your routes
9 . 4
{ path : ComponentToHandlePath }
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'products', component: ProductContainerComponent },
{ path: 'products/:id', component: ProductDetailComponent },
// capture the rest
{ path: '**', component: PageNotFoundComponent }
];
9 . 5
Setup routes
9 . 6
RouterModule.forRoot( routes )
@NgModule({
declarations: [
// ...declarations
],
imports: [
// ... modules
// setup route
RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
9 . 7
Creating an outlet, where the content should be
rendered
9 . 8
header here
<router-outlet></router-outlet>
footer here
9 . 9
Routing by links
9 . 10
<div>
<a routerLink="/" routerLinkActive="active">Home</a> |
<a routerLink="/products" routerLinkActive="active">Products
</div>
9 . 11
Routing programatically
9 . 12
import { Router } from '@angular/router';
@Component({})
export class ListComponent{
gotoDetail(){
this.router.navigate(['/products', 1]);
}
}
9 . 13
Accessing route parameters
9 . 14
route.params.subscribe( param => do something )
export class ProductDetailComponent {
product:Product;
constructor(
private router:Router,
private route:ActivatedRoute,
private productService: ProductService
){
this.route.params
.switchMap( param => this.productService.getProduct(param.
.subscribe( data => this.product = data )
}
}
9 . 15
Route guards, aka security
9 . 16
canActivate = serviceThatHandlesAuthorization
{
path : 'admin',
component: AdminComponent,
canActivate : [AuthGuard]
}
9 . 17
CanActivate true/false
export class AuthGuard implements CanActivate {
canActivate(){
console.log('Admin Component Can activate'); // talk to an
return false;
}
}
9 . 18
FORMS
10 . 1
There are two different ways to handle forms,
Template Forms and Reactive Forms
10 . 2
Template forms
10 . 3
Pristine = not touched
Invalid = data validation error
Dirty = user has entered data
10 . 4
ngSubmit, triggered by button or input type="submit"
Creating a reference to ngForm means we can see if its
valid
<form (ngSubmit)="heroForm.valid && submit()" #heroForm="ngForm"
<div>
<h3>Form</h3>
Pristine <strong>{{ heroForm.pristine }}</strong> <br>
Invalid <strong>{{ heroForm.invalid }}</strong> <br>
Dirty <strong>{{ heroForm.dirty }}</strong> <br>
</div>
<div><button>Save</button></div>
{{ heroForm.valid }}
</form>
10 . 5
formName.controls.fieldName.errorType, will give the
error if set e.g heroForm.controls.name.errors = true
<div>
<input [(ngModel)]="hero.title"
#name ="ngModel"
name="name"
minlength="2"
required >
</div>
valid {{ name.valid }} <br>
pristine {{ name.pristine }} <br>
All errors {{ heroForm.controls.name.errors | json }}
10 . 6
Further reading & Learning
angular.io
angular.io/resources Rxjs 5 Ultimate
https://ultimateangular.com/
Free book on Angular 2, https://codecra .tv/
London Javascript ( my group 1700 members )
https://www.meetup.com/London-Javascript/
Everything showed today is here :
https://github.com/so chris/Angular2-demo
11
Thank you
12

Más contenido relacionado

La actualidad más candente

ReactJs presentation
ReactJs presentationReactJs presentation
ReactJs presentationnishasowdri
 
How to perform debounce in react
How to perform debounce in reactHow to perform debounce in react
How to perform debounce in reactBOSC Tech Labs
 
Exploring Angular 2 - Episode 2
Exploring Angular 2 - Episode 2Exploring Angular 2 - Episode 2
Exploring Angular 2 - Episode 2Ahmed Moawad
 
Quick start with React | DreamLab Academy #2
Quick start with React | DreamLab Academy #2Quick start with React | DreamLab Academy #2
Quick start with React | DreamLab Academy #2DreamLab
 
Redux training
Redux trainingRedux training
Redux trainingdasersoft
 
"Migrate large gwt applications - Lessons Learned" By Harald Pehl
"Migrate large gwt applications - Lessons Learned" By Harald Pehl"Migrate large gwt applications - Lessons Learned" By Harald Pehl
"Migrate large gwt applications - Lessons Learned" By Harald PehlGWTcon
 
Workshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionWorkshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionVisual Engineering
 
Hidden Docs in Angular
Hidden Docs in AngularHidden Docs in Angular
Hidden Docs in AngularYadong Xie
 
Intro to React
Intro to ReactIntro to React
Intro to ReactTroy Miles
 
«От экспериментов с инфраструктурой до внедрения в продакшен»​
«От экспериментов с инфраструктурой до внедрения в продакшен»​«От экспериментов с инфраструктурой до внедрения в продакшен»​
«От экспериментов с инфраструктурой до внедрения в продакшен»​FDConf
 
Implement react pagination with react hooks and react paginate
Implement react pagination with react hooks and react paginateImplement react pagination with react hooks and react paginate
Implement react pagination with react hooks and react paginateKaty Slemon
 
Building scalable applications with angular js
Building scalable applications with angular jsBuilding scalable applications with angular js
Building scalable applications with angular jsAndrew Alpert
 
An introduction to Angular2
An introduction to Angular2 An introduction to Angular2
An introduction to Angular2 Apptension
 

La actualidad más candente (20)

Typescript barcelona
Typescript barcelonaTypescript barcelona
Typescript barcelona
 
React on es6+
React on es6+React on es6+
React on es6+
 
ReactJs presentation
ReactJs presentationReactJs presentation
ReactJs presentation
 
React и redux
React и reduxReact и redux
React и redux
 
How to perform debounce in react
How to perform debounce in reactHow to perform debounce in react
How to perform debounce in react
 
Exploring Angular 2 - Episode 2
Exploring Angular 2 - Episode 2Exploring Angular 2 - Episode 2
Exploring Angular 2 - Episode 2
 
React js
React jsReact js
React js
 
Quick start with React | DreamLab Academy #2
Quick start with React | DreamLab Academy #2Quick start with React | DreamLab Academy #2
Quick start with React | DreamLab Academy #2
 
Redux training
Redux trainingRedux training
Redux training
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
 
"Migrate large gwt applications - Lessons Learned" By Harald Pehl
"Migrate large gwt applications - Lessons Learned" By Harald Pehl"Migrate large gwt applications - Lessons Learned" By Harald Pehl
"Migrate large gwt applications - Lessons Learned" By Harald Pehl
 
Workshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionWorkshop 19: ReactJS Introduction
Workshop 19: ReactJS Introduction
 
Hidden Docs in Angular
Hidden Docs in AngularHidden Docs in Angular
Hidden Docs in Angular
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
«От экспериментов с инфраструктурой до внедрения в продакшен»​
«От экспериментов с инфраструктурой до внедрения в продакшен»​«От экспериментов с инфраструктурой до внедрения в продакшен»​
«От экспериментов с инфраструктурой до внедрения в продакшен»​
 
Implement react pagination with react hooks and react paginate
Implement react pagination with react hooks and react paginateImplement react pagination with react hooks and react paginate
Implement react pagination with react hooks and react paginate
 
Day 5
Day 5Day 5
Day 5
 
React with Redux
React with ReduxReact with Redux
React with Redux
 
Building scalable applications with angular js
Building scalable applications with angular jsBuilding scalable applications with angular js
Building scalable applications with angular js
 
An introduction to Angular2
An introduction to Angular2 An introduction to Angular2
An introduction to Angular2
 

Similar a Angular 2 introduction

Angular JS2 Training Session #2
Angular JS2 Training Session #2Angular JS2 Training Session #2
Angular JS2 Training Session #2Paras Mendiratta
 
Vue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and VuexVue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and VuexChristoffer Noring
 
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksmwbrooks
 
JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"GeeksLab Odessa
 
Javascript unit testing, yes we can e big
Javascript unit testing, yes we can   e bigJavascript unit testing, yes we can   e big
Javascript unit testing, yes we can e bigAndy Peterson
 
Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.tothepointIT
 
ActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group PresentationActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group Presentationipolevoy
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Eliran Eliassy
 
Protractor framework – how to make stable e2e tests for Angular applications
Protractor framework – how to make stable e2e tests for Angular applicationsProtractor framework – how to make stable e2e tests for Angular applications
Protractor framework – how to make stable e2e tests for Angular applicationsLudmila Nesvitiy
 
Step By Step Guide For Buidling Simple Struts App
Step By Step Guide For Buidling Simple Struts AppStep By Step Guide For Buidling Simple Struts App
Step By Step Guide For Buidling Simple Struts AppSyed Shahul
 
"Full Stack frameworks or a story about how to reconcile Front (good) and Bac...
"Full Stack frameworks or a story about how to reconcile Front (good) and Bac..."Full Stack frameworks or a story about how to reconcile Front (good) and Bac...
"Full Stack frameworks or a story about how to reconcile Front (good) and Bac...Fwdays
 
Hands on SPA development
Hands on SPA developmentHands on SPA development
Hands on SPA developmentShawn Constance
 
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)James Titcumb
 
Twanda.Malcolm12-6-16back.jpgTwanda.Malcolm12-6-16barchart.docx
Twanda.Malcolm12-6-16back.jpgTwanda.Malcolm12-6-16barchart.docxTwanda.Malcolm12-6-16back.jpgTwanda.Malcolm12-6-16barchart.docx
Twanda.Malcolm12-6-16back.jpgTwanda.Malcolm12-6-16barchart.docxmarilucorr
 
Angular directive filter and routing
Angular directive filter and routingAngular directive filter and routing
Angular directive filter and routingjagriti srivastava
 

Similar a Angular 2 introduction (20)

Angular JS2 Training Session #2
Angular JS2 Training Session #2Angular JS2 Training Session #2
Angular JS2 Training Session #2
 
Play 2.0
Play 2.0Play 2.0
Play 2.0
 
Vue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and VuexVue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and Vuex
 
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
 
AngularJs-training
AngularJs-trainingAngularJs-training
AngularJs-training
 
Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2
 
JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"JSLab. Алексей Волков. "React на практике"
JSLab. Алексей Волков. "React на практике"
 
Javascript unit testing, yes we can e big
Javascript unit testing, yes we can   e bigJavascript unit testing, yes we can   e big
Javascript unit testing, yes we can e big
 
Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.
 
ActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group PresentationActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group Presentation
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
 
Practica n° 7
Practica n° 7Practica n° 7
Practica n° 7
 
Protractor framework – how to make stable e2e tests for Angular applications
Protractor framework – how to make stable e2e tests for Angular applicationsProtractor framework – how to make stable e2e tests for Angular applications
Protractor framework – how to make stable e2e tests for Angular applications
 
Step By Step Guide For Buidling Simple Struts App
Step By Step Guide For Buidling Simple Struts AppStep By Step Guide For Buidling Simple Struts App
Step By Step Guide For Buidling Simple Struts App
 
"Full Stack frameworks or a story about how to reconcile Front (good) and Bac...
"Full Stack frameworks or a story about how to reconcile Front (good) and Bac..."Full Stack frameworks or a story about how to reconcile Front (good) and Bac...
"Full Stack frameworks or a story about how to reconcile Front (good) and Bac...
 
Hands on SPA development
Hands on SPA developmentHands on SPA development
Hands on SPA development
 
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
 
Twanda.Malcolm12-6-16back.jpgTwanda.Malcolm12-6-16barchart.docx
Twanda.Malcolm12-6-16back.jpgTwanda.Malcolm12-6-16barchart.docxTwanda.Malcolm12-6-16back.jpgTwanda.Malcolm12-6-16barchart.docx
Twanda.Malcolm12-6-16back.jpgTwanda.Malcolm12-6-16barchart.docx
 
Angular directive filter and routing
Angular directive filter and routingAngular directive filter and routing
Angular directive filter and routing
 
Going web native
Going web nativeGoing web native
Going web native
 

Más de Christoffer Noring (20)

Azure signalR
Azure signalRAzure signalR
Azure signalR
 
Game dev 101 part 3
Game dev 101 part 3Game dev 101 part 3
Game dev 101 part 3
 
Game dev 101 part 2
Game dev 101   part 2Game dev 101   part 2
Game dev 101 part 2
 
Game dev workshop
Game dev workshopGame dev workshop
Game dev workshop
 
Deploying your static web app to the Cloud
Deploying your static web app to the CloudDeploying your static web app to the Cloud
Deploying your static web app to the Cloud
 
IaaS with ARM templates for Azure
IaaS with ARM templates for AzureIaaS with ARM templates for Azure
IaaS with ARM templates for Azure
 
Learning Svelte
Learning SvelteLearning Svelte
Learning Svelte
 
Ng spain
Ng spainNg spain
Ng spain
 
Angular Schematics
Angular SchematicsAngular Schematics
Angular Schematics
 
Design thinking
Design thinkingDesign thinking
Design thinking
 
Keynote ijs
Keynote ijsKeynote ijs
Keynote ijs
 
Ngrx slides
Ngrx slidesNgrx slides
Ngrx slides
 
Kendoui
KendouiKendoui
Kendoui
 
Angular mix chrisnoring
Angular mix chrisnoringAngular mix chrisnoring
Angular mix chrisnoring
 
Rxjs vienna
Rxjs viennaRxjs vienna
Rxjs vienna
 
Rxjs marble-testing
Rxjs marble-testingRxjs marble-testing
Rxjs marble-testing
 
Rxjs ngvikings
Rxjs ngvikingsRxjs ngvikings
Rxjs ngvikings
 
Rxjs swetugg
Rxjs swetuggRxjs swetugg
Rxjs swetugg
 
Angular modules in depth
Angular modules in depthAngular modules in depth
Angular modules in depth
 
Finjs - Angular 2 better faster stronger
Finjs - Angular 2 better faster strongerFinjs - Angular 2 better faster stronger
Finjs - Angular 2 better faster stronger
 

Último

Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 

Último (20)

Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 

Angular 2 introduction