Sie sind auf Seite 1von 4

Angular 2.

Quick reference

npm install Node command to install packages

Typescript command to install typescript


tsd install
packages

touch <filename> Create empty file

Typescript compiler command to compile


tsc
typescript file to javascript

Provide your type definition file


/// <reference path="<path>" /> (.tsd)/typescripts(.ts) /other packages path to
import classes/modules/components

Import classes/components/constants/services
to use in current class using this syntax.
Remember to provide correct filename with
import {<name of component>} from relative path in from without .ts/.js extension.
'<filename>'; For example, if you have PhoneService.ts file
with PhoneService class defined, use below
syntax
import {PhoneService} from 'PhoneService';

Apply @Component annotation to class to


make it Component. In html you can use your
@Component({ component by giving selector name.
selector: 'my-app' 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 annotation provide user interface


@View({ defination for your component. You can
template: '<h1>Hello {{ name }}</h1>' provide inline html as a string in template
}) property or separate html file in templateUrl
property

Components business logic is defined here.


This is simple typescript class. You can mark
class MyAppComponent {
any typescript class as component by
}
annotating @Component and @View
attributes over that class.
Angular2 heavily use DI (Depedency injection).
bootstrap is responsible for injecting
Components, Services etc into your
bootstrap(MyAppComponent);
application/Component hierarchy.
Inject class/component/services into bootstrap
and later you can resolve them in constructor.

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
<script>System.import('app');</script> 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.

Starts local server on current directory.If you


directly open your website html page without
http-server
starting server, you might get Cross origin
Request Serving error.

live-server static server with live reload feature

Compile the project in the given directory. The


directory needs to contain a tsconfig.json file
tsc -p src -w to direct compilation.

Refer all typescript compiler option.


@Component({ Inject FriendService class into Component and
... child components.
appInjector: [FriendsService] You must import FriendsService first before
}) injecting.

@View({
Include directives into your component. First
...
import all directives you want to use in your
directives: [NgFor, NgIf]
components template/templateUrl.
})

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).
(event)
A controller function is then assigned to the
event name: (event)="controllerFn()".

e.g. <input (keyup)="myControllerMethod()">

you can make element references available to


other parts of the template as a local variable
using the #var syntax.
#html-element local reference

e.g. <input #myname (keyup)>


<p>{{myname.value}}</p>

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
*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

equivalent to ng-If in angular 1.x


It displays element if condition holds true else
*ng-if
given html tag doesnt get rendered in DOM
e.g. <p *ng-if="names.length > 3">
<div class="message" [ng-class]="{error:
errorCount > 0}">
NgClass
Please check errors.
</div>

If NgForm is bound in a component, <form>


NgForm elements in that component will be upgraded
to use the Angular form system.

ng-model binds an existing domain model to a


form control. For a two-way binding, use [(ng-
NgModel
model)] to ensure the model updates in both
directions.

The NgSwitch directive is used to conditionally


swap DOM structure on your template based
on a scope expression. Elements within
NgSwitch
NgSwitch but without NgSwitchWhen or
NgSwitchDefault directives will be preserved at
the location as specified in the template.

An injectable service for executing work inside


NgZone
or outside of the Angular zone.

WARNING: this pipe uses the


Internationalization API. Therefore it is only
DatePipe
reliable in Chrome and Opera browsers.
expression | date[:format]
Formats a date value to a string based on the
requested format.

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
Title 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)