❮ Angularjs2 Architecture Angularjs2 Tutorial ❯

Angular 2 TypeScript Environment Configuration

This section uses TypeScript to create Angular applications, which is the official recommendation. The examples in this tutorial will also be written in TypeScript.

TypeScript is a free and open-source programming language developed by Microsoft. It is a superset of JavaScript, extending its syntax.

If you are not familiar with TypeScript, you can refer to the following resources:

Before starting, you need to ensure that you have npm installed. If you haven't installed npm or are unfamiliar with it, you can check our tutorial: NPM Introduction.

Due to the slow access to the npm official mirror in China, I use the Taobao npm mirror. The installation method is as follows:

$ npm install -g cnpm --registry=https://registry.npmmirror.com

After execution, we can use the cnpm command to install modules:

$ cnpm install

Step 1: Create and Configure the Project

Create Directory

$ mkdir angular-quickstart
$ cd angular-quickstart

Create Configuration Files

An Angular project requires the following configuration files:

package.json Marks the npm dependencies required for this project.
tsconfig.json Defines how the TypeScript compiler generates JavaScript code from the project source files.
typings.json Provides additional definition files for libraries that the TypeScript compiler cannot recognize.
systemjs.config.js Provides information to the module loader about where to find application modules and registers all required dependency packages. It also includes packages needed for examples later in the documentation.

Create the following files in the angular-quickstart directory with the following code:

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.3.4",
    "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 the cnpm command to install the dependencies:

$ cnpm install

After successful execution, a node_modules directory will be generated under the angular-quickstart directory, which contains the modules required for this example. We can take a look at the project's directory structure:

Step 2: Create the Application

We organize the Angular application into functional blocks of code using NgModules.

Angular itself is split into several independent Angular modules, so we only need to import the required parts of Angular into our application.

Every Angular application requires at least one root module, which in this example is AppModule.

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

$ mkdir app
$ cd app

Then, create the app.module.ts file under the app directory with the following code:

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, the root module needs to import BrowserModule from @angular/platform-browser and add it to the imports array.

Create a Component and Add it to the Application

Every Angular application has at least one root component, which in this example is AppComponent. The app.component.ts file contains the following code:

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 code imports the Component package from angular2/core.
@Component is a decorator in Angular 2 that associates metadata with the AppComponent class.
my-app is a CSS selector that can be used in an HTML tag to represent a component.
@view contains a template that tells Angular how to render the component's view.
export specifies that the component can be used outside the file.

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

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 { }

Step 4: Start the Application

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

Create the main.ts file under the angular-quickstart/app directory with the following code:

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, allowing your code to run, and then starts your AppModule on that platform.

Define the Host Page for the Application

Create the index.html file under the angular-quickstart directory with the following code:

index.html File:

<html>

<head>
    <title>Angular 2 Example - tutorialpro.org(tutorialpro.org)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfills for older browsers -->
    <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>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Here are some noteworthy points:

JavaScript libraries: core-js is a polyfill library for older browsers, zone.js and reflect-metadata libraries are required by Angular, and the SystemJS library is used for module loading.
SystemJS configuration file and script, which import and run the app module we just wrote in the main file.
The <my-app> tag is where the application loads.

Adding Some Styles

We can set the styles we need in the styles.css file in the 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: 2em;
}

Step 6: Compile and Run the Application

Open a terminal window and enter the following command:

npm start

Visit http://localhost:3000/, the browser displays the result:

This completes the creation of our first Angular2 application, with the final directory structure being:

The source code used in this article can be downloaded in the following way, excluding the node_modules and typings directories.

Source Code Download ```

❮ Angularjs2 Architecture Angularjs2 Tutorial ❯

Angular 2 TypeScript Environment Configuration

Step 1: Create and Configure the Project

Create Directory

Create Configuration Files

package.json File:

tsconfig.json File:

typings.json file:

systemjs.config.js file:

Step 2: Create the Application

app.module.ts File:

Create a Component and Add it to the Application

app.component.ts File:

app.module.ts File:

Step 4: Start the Application

main.ts File:

Define the Host Page for the Application

index.html File:

Adding Some Styles

styles.css File:

Step 6: Compile and Run the Application

`styles.css` File: