Angular 2 - Environment

In this chapter let us study about Angular 2 development environment.

• Angular uses TypeScript which is a primary language for developing of Angular applications.
• The TypeScript is a super set of JavaScript which is migrated to TypeScript and code written in TypeScript makes less prone to run time errors.
  

To setup development environment follow the below steps:
Step(1): Create a project folder in your local drive by typing below commands in the command prompt.

mkdir angular2-demo
cd angular2-demo

Creating Configuration Files

Step(2): You need to create tsconfig.json which is the TypeScript compiler configuration file. It guides the compiler to generate JavaScript files.

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Step(3): Create a typings.json file in your project folder angular2-demo as shown below:
typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

A large number of libraries of the JavaScript extends JavaScript environment with features and syntax which is not natively recognized by the TypeScript compiler. The typings.json file is used to identify TypeScript definition files in your Angular application.
In the above code, there are three typing files as shown below:

• core-js: It brings ES2015/ES6 capabilities to our ES5 browsers.
• jasmine: It is the typing for Jasmine test framework.
• node: It is used for the code that references objects in the nodejs environment.

These typings are used in development of larger Angular applications.
Step(4): Add package.json file to your angular2-demo project folder with the below code:
package.json

{
  "name": "angular2-demo",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

The package.json will contain the packages that our apps require. These packages are installed and maintained with npm (Node Package Manager). To install npm click here.
Step(5): To install packages, run the below npm command in command prompt.

npm install

Error messages in red may appear while installing npm, just ignore them.

Creating Our First Angular Component

A component is the fundamental concept of Angular. A component is a class that controls a view template - a part of a web page where information to the user is displayed and user feedback is responded. Components are required to build Angular apps.

Step(6): Create a sub-folder called app/ inside your project folder to the place Angular app components. You can use the below command to create the folder:

mkdir app
cd app

Step(7): The files which you create need to be saved with .ts extension. Create a file called environment_app.component.ts in your app/ folder with the below code:
environment_app.component.ts

import {Component, View} from "angular2/core";

@Component({
   selector: 'my-app'
})

@View({
  template: '<h2>My First Angular 2 App</h2>'
})

export class AppComponent {

}

• The above code will import the Component and View package from angular2/core.
• The @Component is an Angular 2 decorator that allows you to associate metadata with the component class.
• The my-app can be used as HTML tag to injecting and can be used as a component.
• The @view contains a template that tells Angular how to render a view.
• The export specifies that, this component will be available outside the file.

Step(8): Next, create environment_main.ts file with the below code:
environment_main.ts

import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./environment_app.component"

bootstrap(AppComponent);

• The environment_main.ts file tells Angular to load the component.
• To launch the application, we need to import both Angular's browser bootstrap function and root component of the application.
• After importing, the bootstrap is called by passing the root component type i.e. AppComponent.

Step(9): Now create a index.html in your project folder angular2-demo/ with the below code:
index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}},
        map: { 'app': './angular2/src/app' }
      });
      System.import('app/environment_main')
            .then(null, console.error.bind(console));
    </script>
  </head>
<body>
   <my-app>Loading...</my-app>
</body>
</html>

Angular will launch the app in the browser with our component and places it in a specific location on index.html.

Compile and Run

Step(10): To run the application, type the below command in a terminal window:

npm start

The above command runs two parallel node processes as listed below:

• TypeScript compiler in the watch mode
• The lite-server (static server) loads the index.html in a browser and refreshes the browser as application files change.

After few moments, a browser tab will get open with the following output: