Cheatography
https://cheatography.com
TypeScript-based free and open-source web application framework
https://angular.io
This is a draft cheat sheet. It is a work in progress and is not finished yet.
Architecture
Setup Angular |
sudo npm install -g @angular/cli
|
npm install --save @angular/material @angular/cdk @angular/animations hammerjs
|
Create New Project |
ng new {name} --style=scss
|
npm init
, create package.json |
Run |
ng serve
, run local dev server at localhost:4200 |
ng build
, build dist bundlers |
Modules are compound of |
-> Components |
-> Services |
Components
|
Generate Component |
$ ng generate component {name}
|
A component consist of |
𑂾 A component class (Typescript class) |
𑂾 A template |
𑂾 A css selector that indicates how the component will be integrated |
𑂾 Optional css styles applied to the template |
Services
Generate Service |
$ ng generate service {path}
|
|
|
Data Binding
|
|
Interpolation |
{{expression}}
displays on the template the value of a expression (a component's property). |
Property binding |
[property]="expression"
set value of expression for properties of template elements (html, material, etc.). |
E.g.: <img alt="item" [src]="itemImageUrl">
|
Event binding |
(event)="handler"
bind DOM events with handlers. |
Two way binding |
[(target)]="expression"
combines property with event bindings. Used in template driven forms; target is usually ngModel
. |
Forms
Template-Driven Forms |
|
|
|
Reactive Forms |
|
|
|
|
Routing
|
|
HTML5 History API |
Provide ability to modify a website's URL without a full page refresh |
pushState():
Add history entry |
replaceState()
: Modify history entry |
Routes |
{path: "/home", component: HomeComponent}
in router module |
<router-outlet></router-outlet>
inserts the navigation in app's template |
<a routerLing="path">click here</a>
links in template. path can be a string (like '/home') or an array (like ['/dish', dish.id]) |
More...
|
|
|
ng build
, build /dist folder ( ng build --help
) |
|
