Angular 2 can be written in JavaScript, TypeScript or DART. I am using TypeScript on all my examples.
TypeScript is Microsoft extension of JavaScript. It allows to add powerful type check and object-oriented features. TypeScript is superset of JavaScript and importantly, Angular 2 source is programmed with TypeScript.
Prerequisite on Angular 2 with TypeScript is to install npm. Because node.js installer come with npm, so we are using it to install npm. Take note that we don't code node.js.
npm is JavaScript package manager to share, reuse JavaScript. We use npm to download Angular 2 source files. To download and install Angular 2 with TypeScript, please follow the prerequisite in Angular 2 Quickstart page - https://angular.io/docs/ts/latest/quickstart.html#!#prereq.
You should have below folder structures after install Angular's sources.
- node_modules (folder to store Angular 2 source.)
- package.json (identifies npm package dependencies for the project)
- systemjs.config.js (defines how the TypeScript compiler generates JavaScript from the project's files.)
- tsconfig.json (provides information to a module loader about where to find application modules, and registers all the necessary packages.)
Now we going to create our first component.
First, we create index.html.
<html>
<head>
<!-- Angular 2 libraries -->
<script>
System.import('app') // This piece is calling app/main.ts where we write our application code.
.catch ( function(err){ console.error(err);} ); // We also include error checking.
</script>
<body>
<!-- This custom tab is where Angular 2 application will load. -->
<my-app>Loading...</my-app>
</body>
</head>
<html>
Second, we code Angular 2 on app/main.ts.
import {NgModule, Component} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
// This is component declarator, we called it metadata.
@Component ({
selector: 'my-app', // Custom tab in index.html that will load the component code.
template: '<h1>Hello Angular 2!</h1>' // HTML code going to load in selector.
})
class AppComponent { }
@NgModule ({
imports: [ BrowserModule ], // List down all component will be used.
declarations: [ AppComponent ], // Import dependencies.
bootstrap: [ AppComponent ] // Indicate first component to launch.
})
class AppModule {}
// Start the application in web browser.
platformBrowserDynamic().bootstrapModule(AppModule);
Enter command "npm start" to run the application.
BrowserModule - Module needed for running angular Website.
platformBrowserDynamic - Angular library needed to run the application.
NgModule - Group Angular code into blocks of functionally.
Component - Building block of Angular 2 Application and can be nested to one inside the other. Each component may have its own class file, html file and css file.
Follow the example, you should see Loading... then change to Hello Angular 2!.
Download Car Part Source:
https://github.com/htsiah/angular2-carparts
No comments:
Post a Comment