Typescript compiler command to compile typescript file to javascript
///
Provide your type definition file (.tsd)/typescripts(.ts) /other packages path to import classes/modules/components
import {} from '';
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 tag will include your compoent. Selector string is kind of ID for component and case sensitive.
@View({ template: '
Hello {{ name }}
' })
@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');
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 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. Refer all typescript compiler option.
@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.
#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.
{{myname.value}}
*ng-for
equivalent to ng-repeat in angular 1.x. Render lists from component in html.
{{ name }}
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.
