Contenu connexe Similaire à Itsjustangular (20) Plus de cagataycivici (11) 2. BIO
CAGATAY CIVICI
▸ FOUNDER OF PRIMETEK
▸ EL DESARROLLADOR
▸ JSF EG - APACHE MYFACES
▸ PRIMEFACES
▸ PRIMEUI - PRIMEELEMENTS
▸ PRIMENG
▸ SPEAKER (JavaOne, Devoxx …)
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>
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">
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);
}
}
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 { }
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,
//…
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
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?
