Getting Started with Angular 2 Step by Step using JavaScript

By Arvind Rai, October 17, 2016

This page will walk through getting started with Angular 2 step by step using JavaScript. We will run here a simple example explaining all the steps involved in it. To download angular 2 packages we are using Node.js and NPM. In angular 2 applications we will use three types of packages. These are features, polyfills and other. Feature packages are the angular core packages to run the application. Polyfill packages handle browser compatibility. To resolve all the packages, Node.js requires package.json file and we will discuss it here in our getting started example. In angular 2 example we need to create component and module template. Finally the angular template is bootstrapped and application runs. We are using a simple UI to display a message in our example using angular 2.

Install Node.js and NPM
Project Structure
Create package.json
Angular 2 Dependencies
Download Angular 2 Packages
Create Component
Create Module
Create Main JS File
Create UI and Styles
Output

Install Node.js and NPM

To work with angular 2, we need to make sure that Node.js version must be 4.x.x or higher and for NPM it must be 3.x.x or higher. Now follow the below steps.

1. Download latest version of Node.js using the link.
2. Install Node.js and upgrade npm version by running the command using command prompt as follows.

npm install npm@3.10.8 -g

Here 3.10.8 is target npm version. Find the link for the reference.

3. Use the following command to check the node and npm version.
node -v : It checks node version.
npm -v : It checks npm version.

Getting Started with Angular 2 step by step using JavaScript

Project Structure

Find the project structure of our demo project. In app folder we are creating separate JS files for angular 2 component and module.

angular-getting-started
       |
        --->app
            |
             --->app.component.js
             --->app.module.js
             --->main.js

        --->node_modules
        --->index.html
        --->package.json
        --->styles.css

node_modules folder contains angular 2 packages downloaded by Node.js.

Create package.json

To download all the angular 2 dependencies we are using node and npm. Node.js uses package.json file to take user input for angular 2 dependencies. In package.json we configure all angular 2 dependencies. Here we will discuss some important fields of package.json.

name and version: These two are the most important fields in package.json. These are the required fields and package will not install in the absence of these fields. name and version together form an identifier and must be unique. Whenever we do any changes in package, we need to change version, too.

scripts: It contains commands that run at various times in package life cycle. The key refers to event name and value is command that runs at that point.

dependencies : It maps a package name to a version range. Package name can be like myPackage, bootstrap, @angular/common etc. Version range can be like >=version, <version, <=version, ~version, ^version etc.

devDependencies : Here we define external test or documentation framework that we use in our module. If someone is using our module, then it is possible that they will not use our development dependencies, so it should be separate from dependencies field.

peerDependencies: This field is used to manage compatibility of our package with host or library. It is referred as plugin.

description: Description can be used in npm search.

keywords : keywords can also be used in npm search.

homepage : This field is used to assign URL of home page.

bugs : This field is used to assign issue tracker URL/Email to report bug if found in package.

license : We assign here our license.

author : Author is one person and we can assign name, email and URL.

contributors : It can be an array of persons.

files : List of files to be included in project.

Find the package.json used in our example. We need to put it in our project root folder and parallel to this file we need to create a folder named as node_modules that will contain all the downloaded packages after npm install.

package.json

{
  "name": "angular-demo-js",
  "version": "1.0.0",
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.25"
  }
}

Angular 2 Dependencies

There are three types of dependencies Features, Polyfills, and Other which we need to configure in package.json. Feature package is the bone of angular 2 framework and polyfill package handles different browser compatibility. First we will discuss feature packages used in our example.

@angular/core : It provides basic packages such as metadata decorators, component, directive, dependency injection etc.
@angular/common: It provides commonly used packages such as services, pipes etc.
@angular/compiler: It converts angular template into the code that runs the application.
@angular/platform-browser: It understands DOM and browser.
@angular/platform-browser-dynamic: It includes providers and bootstrap for the application that compile the angular template.

Now we will discuss some polyfill package here.
core-js : It provides the feature of ES2015 (ES6).
zone.js : It is a polyfill for zone specification for JavaScript language standards.
rxjs : This polyfill is used for observable specification for JavaScript language standards.

Download Angular 2 Packages

Find the steps to download angular 2 packages using Node.js and npm.
1. Go to the root folder of the project i.e angular-getting-started.
2. Make sure that project root folder contains package.json file and a folder named as node_modules.
3. Using command prompt go to root folder of the project and run the following command.

>npm install

All the required packages will be downloaded in node_modules folder.

Create Component

Find the syntax to use ng.core.Component.

var MyComponent = ng.core.Component({...}).Class({...})

The above code is used to declare a class as component and defines the metadata of the component. The metadata can be selector and template etc.
app.component.js

(function(app) {
  app.MyAppComponent =
    ng.core.Component({
      selector: 'hello-app',
      template: '<h1>Hello Angular 2 World!</h1>'
	  
    }).Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

Create Module

Find the syntax of ng.core.NgModule.

ng.core.NgModule({declarations: ..., 
                  imports: ...,
                  exports: ..., 
                  providers: ..., 
                  bootstrap: ...}).Class({ constructor: function() {}})

The above code defines a module in angular 2. It uses the metadata as declarations, imports, exports, providers and bootstrap.
app.module.js

(function(app) {
  app.MyAppModule =
    ng.core.NgModule({
      imports: [ ng.platformBrowser.BrowserModule ],
      declarations: [ app.MyAppComponent],
      bootstrap: [ app.MyAppComponent]
    }).Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

Create Main JS File

Find our main JS file. Using angular global ng object we call angular methods.
main.js

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic
      .platformBrowserDynamic()
      .bootstrapModule(app.MyAppModule);
  });
})(window.app || (window.app = {}));

document.addEventListener(): It attaches a given event to the document.
DOMContentLoaded : This is an event which is called when HTML document has been completely loaded and parsed. This event does not wait to load stylesheet, images etc.
platformBrowserDynamic (): It provides module for bootstrapping the application.
bootstrapModule() : It launches the application by bootstrapping the NgModule module. In our example it is MyAppModule.

Create UI and Styles

Find UI used in our example.
index.html

<html>
  <head>
    <title>Angular 2 Getting Started Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- Polyfill Packages-->
    <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/rxjs/bundles/Rx.js"></script>	
    <!-- Angular Feature Packages-->	
    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

    <!-- Our application packages -->
    <script src='app/app.component.js'></script>
    <script src='app/app.module.js'></script>
    <script src='app/main.js'></script>
  </head>
  <body>
    <hello-app>Please wait...</hello-app>
  </body>
</html>

Find the CSS file used in example.
styles.css

h1 {
  color: green;
  font-family:  sans-serif;
}

Output

Run index.html and we will get output as follows.

Now I am done. Happy Angular 2 learning!

References

QUICKSTART-JAVASCRIPT
ANGULAR CHEAT SHEET
NPM PACKAGES
package.json

POSTED BY

ARVIND RAI

Popular Tutorials: Java 8 | Spring 5 | Angular | Android