Angular 2 development environment

In this chapter, let's look at the development environment for Angular 2.

• Angular uses TypeScript, which is the primary language for developing Angular applications.

• TypeScript is a super JavaScript collection that is migrated to TypeScript, and code written in TypeScript is less prone to run-time errors.

To set up your development environment:

Step (1): Create a project folder in your local drive by typing the following command at the command prompt.

mkdir angular2-demo
cd angular2-demo

Create a profile

Step (2): You need to create tsconfig.json, which is the TypeScript compiler profile. /b10> It instructs 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 the project folder angular2-demo, as follows:

{
  "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 JavaScript libraries extend JavaScript environments with features and syntaxes that are not itself recognized by the TypeScript compiler. /b10> The typings.json file is used to identify the TypeScript definition file in the Angular application.

In the code above, there are three types of files, as follows:

• core-js : It brings ES2015 / ES6 functionality to our ES5 browser.

• Jasmine: This is the type of Jasmine test framework.

• node: It is used to refer to the code of objects in the nodejs environment.

These types are used to develop larger Angle applications.

Step (4): Add the package.json file to your angular2-demo project folder using the following code:

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

package.json will contain the packages required for our app. /b10> These packages are installed and maintained using npm (node package manager). /b11> To install npm click here.

Step (5): To install the package, run the following npm command at the command prompt.

npm install

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

Create our first Angler 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 named app / at the location of the Angular application component in the project folder. You can create a folder using the following command:

mkdir app
cd app

Step (7): The file you created needs to be saved with the .ts extension. Use the following code to create a file named environment_app.component.ts in your app/folder:

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 imports components and View from angular2/core

• @Component is an Angel 2 decorator that allows you to associate metadata with component classes.

• my-app can be injected as an HTML tag and as a component.

• @view contains a template that tells Angular how to render the view.

• Export specifies that this component will be available outside the file.

Step (8): Next, create a environment_main.ts file using the following code:

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

bootstrap(AppComponent);

• environment_main.ts file tells Angular to load the component.

• To launch the application, we need to import Thengular browser boot function and the root component of the application.

• After importing, bootstrap is called by passing the root component type, or AppComponent.

Step (9): Now use the following code to create an index in your project folder angular2-demo / .html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/es6-shim.min.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/system-polyfills.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/angular2-polyfills.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/system.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/typescript.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/Rx.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}}
      });
      System.import('/app/environment_main')
            .then(null, console.error.bind(console));
    </script>
  </head>
<body>
   <my-app>Loading...</my-app>
</body>
</html>

Angular will use our components to launch the app in a browser and place it in a specific .html the index.

Compile and run

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

npm start

The above command runs two parallel node processes, as follows:

• The TypeScript compiler is in watch mode

• Lite-server (static server) loads in the browser and refreshes the browser when the application file changes.

Later, the browser tab opens and displays the following output: