extrategy
aiutiamo aziende e startup a raggiungere i propri obiettivi di business utilizzando internet, la tecnologia e un approccio lean
It's not really a ES6 superset...😩
photo by ngBook-2
function greetText(name: string): string {
return "Hello " + name;
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<app-hello-world></app-hello-world>
<app-hello-world>
<search-bar></search-bar>
<results></results>
</app-hello-world>
<app-hello-world>
<search-bar></search-bar>
<results [list]="myResults"></results>
</app-hello-world>
<app-hello-world>
<search-bar (onSearch)="search($event)"></search-bar>
<results [list]="myResults"></results>
</app-hello-world>
@Injectable
export default class Logger {
log(param){
console.log(param);
}
}
@Injectable
export default class Logger {
log(param){
console.log(param);
}
}
import { Component, OnInit } from '@angular/core';
import Logger from './logger';
@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {
constructor(private logger: Logger) { }
ngOnInit() {
}
}
npm install -g angular-cli
ng new PROJECT_NAME
ng g component NAME
ng g service NAME
ng g pipe NAME
ng g directive NAME
ng test
ng build
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'celsius'
})
export class CelsiusPipe implements PipeTransform {
transform(value: any, args?: any): any {
//°C = K − 273,15
const kelvin = parseFloat(value);
if(isNaN(kelvin)){
return 0;
}
return kelvin - 273.15
}
}
<span>{{temperature | celsius}}</span>
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
<p [myHighlight]>I am yellow!</p>
<div *ngIf="false">never displayed</div>
<div *ngIf="a > b">displayed if a is more than b</div>
<div *ngIf="str === 'yes'">displayed if str holds the string "yes"</div>
<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
Uses fixed white text on blue background
</div>
.bordered {
border: 1px dashed black; background-color: #eee;
}
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>
<!-- on the component this.cities = ['Miami', 'Sao Paulo', 'New York']; -->
<div class="ui list" *ngFor="let c of cities">
<div class="item">{{ c }}</div>
</div>
<input
type="text"
placeholder="Product Name"
[(ngModel)]="productName">
A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a user experience similar to that of a desktop application.
Wikipedia
Photo by Microsoft
Before you commit to a framework, make sure you could write it.Â
Uncle Bob
const routes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'detail',
component: DetailComponent,
}
];
<a routerLink="/detail">Go To Detail</a>
this.router.navigate(['/detail'])
@Injectable()
export class LoggedInGuardService implements CanActivate{
constructor(
private router: Router,
private currentUserService: CurrentUserService) { }
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot) {
if(!this.currentUserService.get()){
this.router.navigate(['/login']);
return false;
}
return true;
}
}
const routes: Routes = [
{
path: 'protected',
component: ProtectedComponent,
canActivate:[LoggedInGuardService]
}
];
By extrategy