AngularJS2 TypeScript environment configuration

Previous: AngularJS2 JavaScript environment configuration

This section is used to create Angular TypeScript application, which is the official recommended to use, examples of this tutorial will also use TypeScript to write.

TypeScript developed by Microsoft is a free and open source programming language, which is a superset of JavaScript, expanding the JavaScript syntax.

If you do not know TypeScript, you can consult the following information:

TypeScript Getting Started Tutorial
TypeScript Chinese manual

Before this start, you need to make sure you have installed npm, if you do not understand or did not install npm npm can see our tutorial: NPM use presentation .

Since npm country visit the official website of the mirror is too slow, and here I use Taobao npm image, installation is as follows:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

After we do that we can use to install the module cnpm command:

$ cnpm install

Step 1: Create and configure projects

Create a directory

$ mkdir angular-quickstart
$ cd angular-quickstart

Create profile

Angular project requires the following profiles:

package.json mark the desired npm this project dependencies.
tsconfig.json defined TypeScript compiler how to generate JavaScript code from the project source files.
typings.json provides additional definition files for those TypeScript compiler does not recognize the library.
systemjs.config.js provides that where to find the application module information module loader, and register all the necessary dependencies.It also includes examples of documents need to use the back of the package. a

Create the following file in the angular-quickstart, the code is as follows:

package.json file:

{ "Name": "angular-quickstart ", "version": "1.0.0", "scripts": { "Start": "tsc && concurrently \" npm run tsc: w \ " \ "Npm run lite \" "," Lite ":" lite -server "," postinstall ":" typings install "," tsc ":" tsc "," tsc: w ":" tsc -w "," typings ":" typings " }, "License": "ISC ", "dependencies": { "@ Angular / common": " 2.0.0", "@ angular / compiler": "2.0.0", "@ angular / core": "2.0.0", "@ angular / forms": "2.0.0 "," @ angular / http " :" 2.0.0 "," @ angular / platform-browser ":" 2.0.0 "," @ angular / platform-browser-dynamic ":" 2.0.0 "," @angular / router ":" 3.0.0 ", " @ angular / upgrade ":" 2.0.0 "," core-js ":" ^ 2.4.1 "," reflect-metadata ":" ^ 0.1.3 "," rxjs ":" 5.0.0-beta.12 " ," systemjs ":" 0.19.27 "," zone.js ":" ^ 0.6.23 "," angular2-in-memory-web-api ":" 0.0 .20 "," bootstrap ":" ^ 3.3.6 " }, "DevDependencies": { "Concurrently": "^ 2.2.0" , "lite-server": "^ 2.2.2", "typescript": "^ 2.0.2", "typings": "^ 1.3.2" } }

tsconfig.json file:

{ "CompilerOptions": { "Target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny ": false } }

typings.json file:

{ "GlobalDependencies": { "Core-js": "registry : dt / core-js # 0.0.0 + 20160725163759", "jasmine": "registry: dt / jasmine # 2.2.0 + 20160621224255", "node": "registry: dt / node # 6.0.0 + 20160909174046 " } }

systemjs.config.js file:

/ * * * System configuration for Angular samples * Adjust as necessary for your application needs. * / (Function (Global) { System. Config ({ paths: { // Paths serve as alias 'Npm:': 'node_modules / ' }, // Map tells the System loader where to look for things map: { // Our app is within the app folder app: 'app', // angular bundles '@ Angular / core': ' npm: @ angular / core / bundles / core.umd.js',' @ angular / common ':' npm: @ angular / common / bundles / common.umd.js', '@ angular / compiler ':' npm: @ angular / compiler / bundles / compiler.umd.js ',' @ angular / platform-browser ':' npm: @ angular / platform-browser / bundles / platform-browser.umd.js ',' @ angular / platform- browser-dynamic ':' npm: @ angular / platform-browser-dynamic / bundles / platform-browser-dynamic.umd.js ',' @ angular / http ':' npm: @angular /http/bundles/http.umd.js ',' @ angular / router ':' npm: @ angular / router / bundles / router.umd.js ',' @ angular / forms ':' npm: @ angular / forms /bundles/forms.umd.js', // other libraries 'Rxjs': 'npm: rxjs ', 'angular2-in-memory-web-api': 'npm: angular2-in-memory-web-api',}, // packages tells the System loader how to load when no filename and / or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, Rxjs: { defaultExtension: 'js' }, 'Angular2-in-memory -web-api': { main: './index.js', defaultExtension: 'js' } } });}) (This) ;

Next we use cnpm command to install the dependencies:

$ cnpm install

After the successful implementation of the next angular-quickstart directory node_modules will generate a directory containing modules here we need this example, we can look at the directory structure of the project:

Step 2: Create the application

We NgModules the Angular applications organized into a number of functions related to code blocks.

Angular itself is split into a number of separate modules Angular, and we only need to import in the application section Angular needed.

Angular Each application requires at least aroot module (root module), for instance AppModule.

Next we create the app directory under angular-quickstart directory:

$ mkdir app
$ cd app

Then create app.module.ts file in the app directory, the code is as follows:

app.module.ts file:

import { NgModule } from '@ Angular / core'; import { BrowserModule } from '@ Angular / platform-browser' ; @ NgModule ({ imports: [ BrowserModule ] }) export class AppModule { }

Since QuickStart is a Web application running in the browser, so the root module needs to import BrowserModule from @ angular / platform-browser and imports added to the array.

Create component and add it to the application

Angular Each application has at least oneroot component, for instance AppComponent, app.component.ts file code is as follows:

app.component.ts file:

import { Component } from '@ Angular / core'; @ Component ({ selector: 'my-app', template: '<h1> My first Angular application </ h1>' }) export class AppComponent { }

Code analysis:

The above code fromangular2 / coreintroduces aComponentpack.
@ComponentIs Angular 2decorator,it will copy the metadata associated with the AppComponent component class.
my-appis a CSS selector, available in HTML tags, use as a component.
@viewcontains atemplate,how to tell Angular rendered view of the assembly.
exportspecified components can then use the documents.

Next we reopen app.module.ts file import new AppComponent, and add it to NgModule decorator declarations and bootstrap fields:

app.module.ts file:

import { NgModule } from '@ Angular / core'; import { BrowserModule } from '@ Angular / platform-browser' ; import { AppComponent } from './app.component'; @ NgModule ({ imports: [ BrowserModule ], Declarations: [ AppComponent ], Bootstrap: [ AppComponent ] }) export class AppModule { }

Part IV: Start the application

Next we need to tell Angular how to start the application.

Create main.ts file in the angular-quickstart / app directory, the code is as follows:

main.ts file:

import { platformBrowserDynamic } from '@ Angular / platform-browser- dynamic'; import { AppModule } from './app.module'; Const platform = platformBrowserDynamic ();. platform bootstrapModule (AppModule);

The above code initializes the platform, so you can run the code, and then start your AppModule on the internet.

Customize the application host page

Create index.html file in the angular-quickstart directory, the code is as follows:

index.html file:

<Html> <Head> <Title> Angular 2 examples - This tutorial (w3big.com) </ title> <Meta charset = "UTF-8"> <Meta name = "viewport" content = "width = device-width , initial-scale = 1"> <Link rel = "stylesheet" href = "styles.css"> <! - 1. Load Library -> <-! IE needs polyfill -> <Script src = "node_modules / core-js / client / shim.min.js"> </ script> <Script src = "node_modules / zone.js / dist / zone.js"> </ script> <Script src = "node_modules / reflect-metadata / Reflect.js"> </ script> <Script src = "node_modules / systemjs / dist / system.src.js"> </ script> <! - 2. Configure SystemJS -> <Script src = "systemjs.config.js"> </ script> <Script> System.import ( 'app' ) catch (function (err) {console.error (err);});. </ Script> </ Head> <! - The display Applications -> <Body> <My-app> Loading ... < / my-app> </ Body> </ Html>

Here noteworthy are:

JavaScriptlibraries: core-js is provided for older browsers fill libraries,zone.js andreflect-metadatarepository is Angular need, and SystemJS library is used to make the module loaded.
SystemJS configuration files and scripts, can be imported and run in the main file we just write the app module.
<My-app> tag is the application loading place

Add some style

We can set the style we need in styles.css file angular-quickstart directory:

styles.css file:

/ * Master Styles * / h1 { color: # 369 ; Font-family: Arial, Helvetica, sans-serif ; Font-size: 250% ;} h2, h3 { color: # 444 ; Font-family: Arial, Helvetica, sans-serif ; Font-weight: lighter ;} body { margin: 2 em ;}