Angular 2 is latest javascript framework re-written by Google from scratch. Visit Angular2 official website for detailed information.
Here is the quick reference of keywords, components, concepts and other useful things of Angular 2.
npm install
|
Node command to install packages
|
tsd install
|
Typescript command to install typescript packages
|
touch <filename>
|
Create empty file
|
tsc
|
Typescript compiler command to compile typescript file to javascript
|
/// <reference path="<path>" />
|
Provide your type definition file (.tsd)/typescripts(.ts) /other packages path to import classes/modules/components
|
import {<name of component>} from '<filename>';
|
Import classes/components/constants/services to use in current class using this syntax. Remember to provide correct filename with relative path in ‘from’ without .ts/.js extension.
For example, if you have PhoneService.ts file with PhoneService class defined, use below syntax
import {PhoneService} from 'PhoneService';
|
@Component({
selector: 'my-app'
})
|
Apply @Component annotation to class to make it Component. In html you can use your component by giving selector name.
For example, in html <my-app></my-app> tag will include your compoent.
Selector string is kind of ID for component and case sensitive.
|
@View({
template: '<h1>Hello {{ name }}</h1>'
})
|
@View annotation provide user interface defination for your component. You can provide inline html as a string in ‘template’ property or separate html file in ‘templateUrl’ property
|
class MyAppComponent {
}
|
Component’s business logic is defined here. This is simple typescript class. You can mark any typescript class as component by annotating @Component and @View attributes over that class.
|
bootstrap(MyAppComponent);
|
Angular2 heavily use DI (Depedency injection). bootstrap is responsible for injecting Components, Services etc into your application/Component hierarchy.
Inject class/component/services into bootstrap and later you can resolve them in constructor.
|
<script>System.import('app');</script>
|
Starting point of angular2 application is marked with this script.
For example, System.import(‘app’) will try to find ‘app.ts’ file and will load component ‘MyAppComponent’. In html, when browser try to render <my-app> tag, it will search ‘MyAppComponent’ component for selector ‘my-app’ and will render ‘template’ or ‘templateUrl’ html definition.
|
http-server
|
Starts local server on current directory.If you directly open your website html page without starting server, you might get Cross origin Request Serving error.
|
live-server
|
static server with live reload feature
|
tsc -p src -w
|
Compile the project in the given directory. The directory needs to contain a tsconfig.json file to direct compilation.
|
@Component({
...
appInjector: [FriendsService]
})
|
Inject FriendService class into Component and child components.
You must import FriendsService first before injecting.
|
@View({
...
directives: [NgFor, NgIf]
})
|
Include directives into your component. First import all directives you want to use in your component’s template/templateUrl.
|
(event)
|
You can make your application respond to user input by using the event syntax.
The event syntax starts with an event name surrounded by parenthesis: (event).
A controller function is then assigned to the event name: (event)="controllerFn()".
e.g. <input (keyup)="myControllerMethod()">
|
#html-element local reference
|
you can make element references available to other parts of the template as a local variable using the #var syntax.
e.g. <input #myname (keyup)>
<p>{{myname.value}}</p>
|
*ng-for
|
equivalent to ng-repeat in angular 1.x.
Render lists from component in html.
<li *ng-for="#name of names">
{{ name }}
</li>
The way to read this is:
*ng-for : create a DOM element for each item in an iterable like an array
#name : refer to individual values of the iterable as 'name'
of names : the iterable to use is called 'names' in the current controller
|
*ng-if
|
equivalent to ng-If in angular 1.x
It displays element if condition holds true else given html tag doesn’t get rendered in DOM
e.g. <p *ng-if="names.length > 3">
|
NgClass
|
<div class="message" [ng-class]="{error: errorCount > 0}">
Please check errors.
</div>
|
NgForm
|
If NgForm is bound in a component, <form> elements in that component will be upgraded to use the Angular form system.
|
NgModel
|
ng-model binds an existing domain model to a form control. For a two-way binding, use [(ng-model)] to ensure the model updates in both directions.
|
NgSwitch
|
The NgSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression. Elements within NgSwitch but without NgSwitchWhen or NgSwitchDefault directives will be preserved at the location as specified in the template.
|
NgZone
|
An injectable service for executing work inside or outside of the Angular zone.
|
DatePipe
expression | date[:format]
|
WARNING: this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera browsers.
Formats a date value to a string based on the requested format.
|
Title
|
A service that can be used to get and set the title of a current HTML document.
Since an Angular 2 application can't be bootstrapped on the entire HTML document (<html> tag) it is not possible to bind to the text property of the HTMLTitleElement elements (representing the <title> tag). Instead, this service can be used to set and get the current title value.
getTitle()
setTitle(newTitle: string)
|
Updated cheat sheet to follow soon.
Thanks!
