Create an angular 2 app from scratch

My previous post talks about the software requirements in order to create an angular 2 app. With all that in place, let us create our very first angular 2 app.

Create a folder for your project, say – AngularApp1.

Open Visual Studio Code and open your project folder. Now we are good to start adding files and work on our 1st Angular 2 app.

Add the following files in sequence

Package and configuration files

tsconfig.json – It is the typescript compiler configuration file that is added to guide the compiler as it generates JavaScript files.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

tsconfig.json file is permitted to be completely empty, which compiles all files in the containing directory and subdirectories with the default compiler options.

package.json– It lists the packages that the app depends on and defines the useful scripts.

Angular.IO recommends a comprehensive starter-set of packages as specified in the below sections

  • dependencies – packages listed here are essential to run the application. They come in 3 categories
    • Features– Feature packages provide our application with framework and utility capabilities.
    • Polyfills– Polyfills plug gaps in the browser’s JavaScript implementation.
    • Other– Other libraries that support the application such as bootstrap for HTML widgets and styling.
  • devDependencies – packages listed here are necessary only to develop the application. They do not have to be deployed with the production application although there is no harm in doing so.
{
  "name": "angular2app",
  "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-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}
  • Scripts – They do the following
    • npm start – runs the compiler and a server at the same time, both in “watch mode”
    • npm run tsc – runs the TypeScript compiler once
    • npm run tsc:w – runs the TypeScript compiler in watch mode; the process keeps running, awaiting changes to TypeScript files and recompiling when it sees them
    • npm run lite – runs the lite-server, a light-weight, static file server with excellent support for Angular apps that use routing
    • npm run typings – runs the typings tool separately
    • npm run postinstall – called by npm automatically after it successfully completes package installation. This script installs the TypeScript definition files defined in typings.json

There are other possible package choices and one may add and subtract to meet the application needs. However, this is the recommended set because

  • they work well together and
  • they include everything that is required to build and run most application

 

typings.json – It identifies the typescript definition files – d.ts files.

  • Typescript type definition files (d.ts files) are used to tell the compiler about the libraries that are loaded.
  • Typescript-aware editors leverage these same definition files to display type information about library features.
{
  "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"
  }
}

The typings tool is used to fetch the typescript type definition files. It is installed with npm and npm script is added to run that tool automatically after npm installation completes. Also, it is listed among the devDependencies in the package.json.

setup3

setup4

systemjs.config.jsIt is the SystemJS configuration file.

  1. It is used to load the application and library modules. (It is being referred in the index.html file)
  2. The importcall tells SystemJS to import the main file (main.js after transpiling main.ts). Main is the file where Angular will launch the application. Other modules are loaded upon request either by an import statement or by Angular itself.
  3. When Angular calls the bootstrapfunction in ts, it reads the AppComponent metadata, finds the “my-app” selector, locates an element tag named my-app, and renders our application’s view between those tags.
/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

Package Installation

The packages listed in package.json are installed by following the below steps

  1. Run the command prompt as administrator
  2. Traverse to the project folder
  3. Run the command – npm install
  4. It will create a folder called “node_modules” that will have all the listed packages.

The Visual Studio Code will show the below solution structure as of now.

setup5

If you expand the node_modules folder, all the packages can be seen that were installed.


 

Now, with all the configuration in place, we can start creating the app

  • Create an “app” folder in Visual Studio Code
  • Create the “Component” file – app/app.component.ts. This is the “ROOT” component of the application that is responsible to host the client user experience
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App..</h1>'
})

export class AppComponent { }
      1. Import Statement is used to reference the things that are needed from a module or library
      2. Component is a decorator function that takes a metadata object as argument and allows to associate that metadata with the component class. The metadata object has 2 fields as of now
        1. Selector – It specifies a CSS selector for an HTML element that represents the component. Angular will create and display an instance of “AppComponent” wherever it encounters a selector element in the host HTML.
        2. Template – Template is HTML that tells Angular how to render this component’s view.
      3. Component Class – This is the class that can have properties and logic as and when required. It is exported so that it can be imported elsewhere.

 

  • Create the main file – app/main.ts. This is used to tell Angular to load the root component.

 

import { bootstrap } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';

bootstrap(AppComponent);
  1. Two things to launch the application are
    1. Angular browser’s “bootstrap” function
    2. Application’s root component “AppComponent
  2. Then call bootstrap with AppComponent

 

  • Add index.html – This file defines the web page that hosts the application

 

<html>
  <head>
    <title>Angular 2 App</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) 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>
    <script src="http://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>

    
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app/main').catch(function(err){ console.error(err); });
    </script>
  </head>

  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>
  1. Libraries are loaded using scripts
  2. Configuration file for SystemJS that loads the application and library modules. A script is written which imports and run the “app” module. It refers to the main
  3. The  tag in the  which is where the view (created in component) is displayed.

 

  • Adding styles – Create a file styles.css with minimal styles that is being used in index.html
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}

We have completed the coding, let us have a look how our solution structure looks now.

setup6

As it is evident, our app folder contains multiple files other than our ts files. It contains the transpiled JavaScript files which will be used to render the application.

Build and run the app

  1. Open command prompt using administrator privilege and traverse to the folder where the angular project resides.
  2. Enter the command: npm start. It runs two parallel node processes
    1. The TypeScript compiler in watch mode
    2. A static server called lite-server that loads index.html in a browser and refreshes the browser when application files change
  3. Browser tab will open and display the page in a few moments.

et voila!!

setup7

And the angular2 app is ready!!!

Advertisements

2 thoughts on “Create an angular 2 app from scratch

  1. Pingback: Software setup for angular 2 app | My Learnings

  2. Pingback: Create basic SharePoint Add In using Angular 2 | My Learnings

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s