Itsjustangular

LETS GET STARTED
ITS JUST ANGULAR

BIO
CAGATAY CIVICI
▸ FOUNDER OF PRIMETEK
▸ EL DESARROLLADOR
▸ JSF EG - APACHE MYFACES
▸ PRIMEFACES
▸ PRIMEUI - PRIMEELEMENTS
▸ PRIMENG
▸ SPEAKER (JavaOne, Devoxx …)

CORE
LANGUAGES
TYPESCRIPT
JAVASCRIPT
DART

<html>
<head>
<!- scripts —>
</head>
<body>
<my-app>Loading…</my-app>
</body>
</html>

CORE
@COMPONENT
import {Component,Input} from '@angular/core';
@Component({
selector: 'helloworld',
template: ``<div>Hello {{name}}</div>`
})
export class HelloWorldComponent {
@Input() text: string;
}
<helloworld text="Prime"></helloworld>

CORE
@COMPONENT TREE
import {Component,OnInit} from '@angular/core';
import {HelloWorldComponent} from '../helloworld.component';
@Component({
selector: 'my-app',
template: `<h1>Welcome to MyApp</h1>
<helloworld [text]="user></helloworld>`
})
export class AppComponent implements OnInit {
user: string;
ngOnInit() {
this.user = //load user
}
}
<my-app></my-app>

CORE
TEMPLATE SYNTAX AND BINDING

CORE
TEMPLATE SYNTAX AND BINDING
▸ {{property}}
▸ [value]="property", [value]="10", [value]="'10'"
▸ [(value)]="property"
▸ (click)="onButtonClick($event)"
▸ [ngClass]="{'ui-disabled':disabled,'ui-active':active}"

CORE
STRUCTURAL DIRECTIVES
@Component({
selector: 'my-component',
template: `<div *ngIf="active">…</div>
<ul>
<li *ngFor="let item of items">
{{item}}
</li>
</ul>`
})
export class MyComponent implements OnInit {
active: boolean;
items: string[] = ['Omega','Poseidon','Icarus','Atlantis','Ultima'];
}

CORE
@DIRECTIVE
import {Directive} from '@angular/core';
@Directive({
selector: 'tooltip'
})
export class TooltipDirective {
@Input text: string;
@HostListener('mouseenter', ['$event'])
onMouseEnter(e: Event) {
this.show();
}
show() {
//create tooltip and show
}
}
<input text="text" tooltip text="Username">

FORMS
TEMPLATE DRIVEN - NGMODEL
<input type"text" [(ngModel)]="user">

FORMS
NGMODEL
@Component({
template: `<input type="text" [(ngModel)]="user">
})
user: string;
}

FORMS
MODEL DRIVEN - REACTIVE
<input type"text" formControlName="user">

FORMS
MODEL DRIVEN - REACTIVE
<form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)">
<input pInputText type="text" formControlName="ﬁrstname" placeholder="Required"/>
</form>
@Component({
templateURL: 'my.component.html'
})
userform: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.userform = this.fb.group({
'user': new FormControl('', Validators.required),
});
}}

DEPENDENCY INJECTION
@INJECTABLE
import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Car} from '../domain/car';
@Injectable()
export class CarService {
constructor(private http: Http) {}
getUser() {
return this.http.get('/cars/list')
.toPromise()
.then(res => <Car[]> res.json().data)
.then(data => { return data; });
}
}

DEPENDENCY INJECTION
INJECTION
import {Car} from '../domain/car';
import {CarService} from '../service/carservice';
@Component({
templateUrl: 'showcase/demo/datatable/datatabledemo.html'
})
export class DataTableDemo implements OnInit {
cars: Car[];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.loadCars().then(cars => this.cars = cars);
}
}

MODULAR
MODULES
MODULE A
COMPONENT X
COMPONENT Y
MODULE B
COMPONENT M
COMPONENT N
MODULE C
COMPONENT T
DIRECTIVE H
B IMPORTS A
B IMPORTS C

MODULAR
NGMODULE
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
@NgModule({
imports: [
CommonModule,
],
declarations: [
ComponentA1,
ComponentA2
],
exports: [
ComponentA1
]
})
export class ModuleA { }

MODULAR
NGMODULE
import {CommonModule} from '@angular/common';
import {ModuleA} from 'modulea.module';
@NgModule({
imports: [
CommonModule,
ModuleA
],
declarations: [
ComponentB1,
ComponentB2
]
})
export class ModuleB { }

MODULAR
MODULAR APPS
import {FormsModule} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserModule
],
declarations: [
AppComponent,
HomePageComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }

ROUTER
ROUTER
INDEX
(SPA)
MAIN
CREATE
DETAIL
CONFIRM

ROUTER
ROUTES AND ROUTERMODULE
import {Routes,RouterModule} from '@angular/router';
import {ModuleWithProviders} from '@angular/core';
import {MainViewComponent} from './app/view/mainview.component';
import {CreateViewComponent} from './demo/view/createview.component';
import {DetailViewComponent} from './demo/view/detailview.component';
export const routes: Routes = [
{path: '', component: MainViewComponent},
{path: 'create', component: CreateViewComponent},
{path: 'detail', component: DetailViewComponent},
];
export const AppRoutes: ModuleWithProviders = RouterModule.forRoot(routes);
import {AppRoutes} from './app.routes';
@NgModule({
imports: [
AppRoutes,
//…

ROUTER
ROUTERLINK
<a [routerLink]="['/']">Home</a>
<a [routerLink]="['/create']">Create</a>
<a [routerLink]="['/detail']">Detail</a>

ROUTER
LOCATION STRATEGY
http://www.mypp.com/create
REGULAR
http://www.mypp.com/#/create
HASH

UI
PRIMENG
70+ UI COMPONENTS MIT LICENSE
THEMES AND TEMPLATES PRO SUPPORT

ADVANCED
LAZY ROUTES - LOAD ON DEMAND
INDEX
(SPA)
MAIN
CREATE
DETAIL
CONFIRM
SYSTEMJS
WEBPACK ?

ADVANCED
COMPILER
JIT AOT
DEV PROD
COMPILE ON BROWSER COMPILE ON BUILD
SLOWER FAST
BIGGER BUNDLE SMALLER BUNDLE

MORE
FEATURES TO FOLLOW UP
ANIMATION API
(TRIGGERS, STATE…)
OBSERVABLES
(RXJS)
STYLING
(VIEWENCAPSULATION)
TESTING
(JASMINE,KARMA,
PROTRACTOR…)
SECURITY
(CANACTIVATE…)
CHANGE DETECTION
(PUSH VS REGULAR)
SERVER RENDERING

WRAP UP
TIPS
▸ Webpack instead of System.js
▸ Use CLI
▸ AOT and Lazy loading for Production
▸ Use PrimeNG

QUESTIONS?
- Is it stable?
- Should I use it?
- vs React vs Vue?
- Which UI Lib to choose?
- Should I upgrade?
- Should I do backend instead?

Itsjustangular

More Related Content

Itsjustangular