Recommended
More Related Content
What's hot
What's hot (12)
Similar to Itsjustangular
Similar to Itsjustangular (20)
More from cagataycivici
Recently uploaded
Recently uploaded (20)
Itsjustangular
- 1. LETS GET STARTED ITS JUST ANGULAR
- 2. BIO CAGATAY CIVICI ▸ FOUNDER OF PRIMETEK ▸ EL DESARROLLADOR ▸ JSF EG - APACHE MYFACES ▸ PRIMEFACES ▸ PRIMEUI - PRIMEELEMENTS ▸ PRIMENG ▸ SPEAKER (JavaOne, Devoxx …)
- 4. PERFORMANCE
- 5. TOOLING
- 6. ADOPTION
- 7. 1 VS 2+ MAY 2016
- 8. COMMUNITY
- 10. CORE
- 15. 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>
- 16. 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>
- 17. CORE TEMPLATE SYNTAX AND BINDING
- 18. CORE TEMPLATE SYNTAX AND BINDING ▸ {{property}} ▸ [value]="property", [value]="10", [value]="'10'" ▸ [(value)]="property" ▸ (click)="onButtonClick($event)" ▸ [ngClass]="{'ui-disabled':disabled,'ui-active':active}"
- 19. CORE STRUCTURAL DIRECTIVES import {Component,OnInit} from '@angular/core'; @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']; }
- 20. 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">
- 21. FORMS
- 22. FORMS TEMPLATE DRIVEN - NGMODEL <input type"text" [(ngModel)]="user">
- 23. FORMS NGMODEL import {Component,OnInit} from '@angular/core'; @Component({ selector: 'my-component', template: `<input type="text" [(ngModel)]="user"> }) export class MyComponent implements OnInit { user: string; }
- 24. FORMS MODEL DRIVEN - REACTIVE <input type"text" formControlName="user">
- 25. FORMS MODEL DRIVEN - REACTIVE <form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)"> <input pInputText type="text" formControlName="firstname" placeholder="Required"/> </form> @Component({ selector: 'my-component', templateURL: 'my.component.html' }) export class MyComponent implements OnInit { userform: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.userform = this.fb.group({ 'user': new FormControl('', Validators.required), }); }}
- 27. 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; }); } }
- 28. DEPENDENCY INJECTION INJECTION import {Component,OnInit} from '@angular/core'; 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); } }
- 30. MODULAR MODULES
- 31. 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
- 32. MODULAR NGMODULE import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [ CommonModule, ], declarations: [ ComponentA1, ComponentA2 ], exports: [ ComponentA1 ] }) export class ModuleA { }
- 33. MODULAR NGMODULE import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {ModuleA} from 'modulea.module'; @NgModule({ imports: [ CommonModule, ModuleA ], declarations: [ ComponentB1, ComponentB2 ] }) export class ModuleB { }
- 34. MODULAR MODULAR APPS import {NgModule} from '@angular/core'; 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 { }
- 35. ROUTER
- 37. 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 {NgModule} from '@angular/core'; import {AppRoutes} from './app.routes'; @NgModule({ imports: [ AppRoutes, //…
- 38. ROUTER ROUTERLINK <a [routerLink]="['/']">Home</a> <a [routerLink]="['/create']">Create</a> <a [routerLink]="['/detail']">Detail</a>
- 40. DEMO
- 41. PRIMENG
- 42. UI PRIMENG 70+ UI COMPONENTS MIT LICENSE THEMES AND TEMPLATES PRO SUPPORT
- 44. DEMO
- 45. MORE STUFF
- 46. ADVANCED LAZY ROUTES - LOAD ON DEMAND INDEX (SPA) MAIN CREATE DETAIL CONFIRM SYSTEMJS WEBPACK ?
- 47. ADVANCED COMPILER JIT AOT DEV PROD COMPILE ON BROWSER COMPILE ON BUILD SLOWER FAST BIGGER BUNDLE SMALLER BUNDLE
- 48. 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
- 49. WRAP UP TIPS ▸ Webpack instead of System.js ▸ Use CLI ▸ AOT and Lazy loading for Production ▸ Use PrimeNG
- 50. 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?