How to Create Angular 2 Application Using System.JS

The best way to learn angular 2, is to create an example Angular 2 application from scratch. The AngularJS (Angular 1 ) application was very easy to create and start. But in case of Angular 2, you need to set up lots of configuration files and libraries before getting up and running

In this tutorial let us learn how to create a simple angular 2 application from scratch. If you are new to angular 2 you should look at the Introduction to Angular 2 and Installing and getting started with Angular 2  Tutorials.

There are many possible scenarios, by which you can create Angular 2 Application. We have discussed few of them in this following tutorial

1. Create Angular 2 Application using Angular 2 CLI
2. Create Angular 2 Application using Webpack

How to Create Angular 2 Application Using SystemJS

In this tutorial, we are going to build a simple application for an ABC Bank Ltd. which just displays “Hello & Welcome to ABC Bank Ltd. “

Setting up an Angular 2 Application

The Setting up and angular 2 application requires the following steps

1. Create an Application folder
2. Create Configuration file
3. Install Angular 2 , Typescript, System.JS and other dependencies
4. Create First Component
5. Create a root Angular module
6. Bootstrap our application
7. Create the index.html
8. Run the application

1. Create an Application Folder

Open a command prompt and create a folder GettingStarted. Then open Visual Studio Code and open the folder

2. Create Configuration file

Before we start to code, we need to configure the npm, Typescript & System.JS. We discussed these topics in our previous tutorial Installing and getting started in Angular2

NPM Configuration file ( Package.json )

Package.json file contains the metadata about modules required for our Angular Application. It contains a list of external dependencies that are used in our application. The npm ( node package manager) uses these files to install the required dependencies.

The Sample Package.json is listed below. Create file named Package.json in the root folder and copy the following content

Typescript Configuration file

Typescript requires two configuration files. One is tsconfig.json, which must be present in the root folder. The second file is typings.json which contains the Typescript definition file

Goto to the root folder of the project and create the tsconfig.json file. Copy the following content

Next, create the typings.json file and copy paste the following

Systemjs.config.js (Module loader)

The Angular 2 Applications needs module loader to load the application & associates modules dynamically. This is done using the SystemJs. The SystemJs has its own configuration file, which it uses to load the application

Create Systemjs.config.js in the root folder of the application and copy the following.

3. Install the Angular2 libraries, Typescript & SystemJs

The final step is to run the npm package manager to install the dependencies. Right click and select Open the Command prompt. You can also Open the command prompt directly and go to the root folder of the application

Type the following command

If the installation is successful, you will see the Node_modules & typings folders under the root folder. You may see many warning & errors ignore them. You can also run the npm installer again in case any issues.

If the typings folder does not appear then just run the following command in npm shell

If you still face problems in installing then run the following command in npm shell

Then try running the npm install again

4. Create your first Component

The next step is to create a Component file. First Create an App Folder under the root folder. Create bank.component.ts inside the app directory. Copy the following code

The Component is the most important part of the angular 2. It controls the region of the screen or View. It consists of three main parts one is class, a class decorator, and an import statement

Component class

A component is a simple class. The class is defined using the Export keyword so that it can be used in other parts of the application

@Component decorator

The BankComponent class is then, decorated with @Component decorator attribute. The class decorator provides Metadata about the component class. The Angular uses this Metadata to create the view

The Metadata above has two fields. The selector & template.

Template

The template field is plain HTML that tells angular what to display. In the example, above it displays “Hello & Welcome to ABC Bank Ltd” inside H1 tag

Selector

The selector tells angular, where to display. In the example above selector is “bank-app”.  The selector (bank-app) is replaced by the HTML template, when Angular renders the view.

Import

Since we are using the @Component decorator, we need to tell the Angular , where to find it. The @component decorator is available in @angular/core module. Hence we need to refer it our class. This is done using the import method. As follows.

5. Create the root Angular Module

The Angular 2 applications are modular. Each feature of the application must be developed using small packets based on a feature and are grouped into modules. The every angular application must have at least one module called as root Module.

Create a file under the app folder with the name bank.module.ts. This is the main module of our application.

First, create a BankModule class. Note that we are using the export keyword so that this module can be used in other modules. You can include any relevant codes in the class, but right now we leave it blank.

@NgModule

We need to tell angular that this class is an Angular Module. We can do this by decorating the class with @NgModule Decorator as shown below.

@NgModule passes Metadata to angular by using the fields imports, declarations & bootstrap.

Imports Metadata tells angular, the modules required by this module. The BankModule requires BrowserModule

Declaration Metadata lists the components, directives , services etc that are part of this module. We have only one component in our example, hence we list it here.

Bootstrap Metadata identifies the root component for the module. Angular loads this component, when it loads the module. In our example, BankComponent must be loaded when the application is loaded. Hence that is listed here

6. Bootstrap our application

Now we need to tell angular to load our root module.This requires us to create another javascript module with the following code

In the above code, we import platformBrowserDynamic . This function contains necessary methods to bootstrap the angular application. The bootstrapper must know the location of our BankModule. Hence in the next line, we import the BankModule. Finally, we invoke the bootstrapModule(BankModule) to start our BankModule Application

7. Create the Index.html

Finally, we need to create our root an HTML file, i.e. index.html. Create the index.html file in the root folder and copy the content.

bank-app CSS Selector

You will see that we have added bank-app CSS Selector inside the body tag of our index.html

This is where Angular 2 loads our application. Scroll back to and take a look at the bank.controller.ts. In the @Component decorator, we have used ‘bank-app’ in the selector field. The Html inside the template field is placed inside the ‘bank-app’ CSS selector inside the index.html

System.js

Note that we have loaded the SystemJs javascript. SystemJs is responsible loading the required javascript file required by our angular Application. This is done by invoking the import method and bootstrapping the SystemJS.

8. Run and Application

Finally, we are ready to roll. Right click on and select Open the command Prompt and enter the following command

npm creates the instance of the lite server and loads the index.html in the browser. You will see “Hello & Welcome to ABC Bank Ltd” displayed.

Conclusion

We have successfully built our first angular 2 application. In the next tutorial, let us look at how Angular 2 Bootstraps works in little more detail.