Outils du site
La bigamie, c'est quand on a deux femmes, la monotonie c'est quand on a qu'une. [Inconnu]
Panneau latéral
56-tools:angular
Ceci est une ancienne révision du document !
Table des matières
Angular
Angular client
Angular with Pug
Ressources
https://blog.angularindepth.com/
https://material.angular.io/components/categories
test dialog: https://stackblitz.com/edit/angular-sqspai?file=app%2Fdialog-overview-example-dialog.html
Tri table example
Data binding
[(ngModel)] | Two-way data binding. |
[property] | Property binding. |
(event) | Event binding |
Interpolation
{{variable}} interpolation. Les deux formes ci-dessous sont équivalentes:
<img src=“{{heroImageUrl}}”> is the interpolated image.<img [src]=“heroImageUrl”> is the property bound image.
Property binding [property]
It flows a value in one direction, from a component's data property into a target element property.
You cannot use property binding to pull values out of the target element.
You can't bind to a property of the target element to read it. You can only set it.
Event binding (event)
Les deux formes ci-dessous sont équivalentes:
<button (click)=“onSave()”>Save</button><button on-click=“onSave()”>Save</button>
two-way data binding [(ngModel)]
You often want to both display a data property and update that property when the user makes changes.
Template reference variables ( #var )
variable locale qui peut être utilisée par la suite :
<input #phone placeholder="phone number"> <!-- phone refers to the input element; pass its `value` to an event handler --> <button (click)="callPhone(phone.value)">Call</button>
Input and Output properties
An Input property is a settable property annotated with an @Input() decorator. Values flow into the property when it is data bound with a property binding [property].
Exemple:
- Declaration:
@Input() hero: Hero; - Usage:
<app-hero-detail [hero]=“selectedHero”></app-hero-detail> - Autre forme d'écriture:
bind-hero=“selectedHero”
An Output property is an observable property annotated with an @Output() decorator. The property almost always returns an Angular EventEmitter. Values flow out of the component as events bound with an event binding (event).
Components
Remember that all components are directives.
Directives
There are three kinds of directives in Angular:
- Components directives: with a template.
- Structural directives: change the DOM layout by adding and removing DOM elements.
- Attribute directives: change the appearance or behavior of an element, component, or another directive.
Testing
https://psamsotha.github.io/angular/2016/12/16/angular2-testing-karma-systemjs.html
https://jasmine.github.io/api/edge/matchers.html
https://github.com/mgechev/angular-performance-checklist
https://blog.oasisdigital.com/2017/angular-runtime-performance-guide/
Exemples et tests
Dernière modification : 2018/04/04 02:03