Dev Configs

Typescript

The application is implemented using typescript 1.8.10.

Because all elements in Typescript aren't yet properly initiated using a plain SystemJS import, we have to use frankwallis/plugin-typescript@^4.0.5 in order to process Typescript to Javascript.

Typescript allows type checking of variables by either using a class or interface. In order to differentiate between the two, all interfaces have prefix of capital I. e.g node management interface name INodeManagement

We also use DefinitivelyTyped for some of the NPM packages we use: angular, angular-cookies and jquery.

In index.ts we aggregate exports for a given folder to a single point of access. This avoids long path references when accessing child exports.

#Angular

The application is currently using two versions of angular 1.5.7 and 2.0.0-rc.4. The Angular router being used is 3.0.0-beta.2.

It uses systemjs to import the Angular files into the application.

We explicitly import Angular 1.x first to avoid the angular is not defined-error when the application is being loaded. This can be seen in index.html, System.import('angular')

For Angular 1.x code the $scope is only used for notifications and watch functions, other variables are bound to the controller.

Please note we use the controllerAs syntax when defining components and directives. For directives/components we don't have a link() function, instead we make use of the $onInit() function that is placed on controller.

Every component/directive is placed in its own folder. All component specific files are placed in this folder. Example structure of an about component:

• about.component.ts contains logic for angular 2.x component
• about.routes.ts contains an array with a route object
• about.view.html contains dom html for the about component
• index.ts used to export routes in about.routes.ts

#JSPM

The application uses jspm ^0.17.0-beta.13 beta version, this is due to support of typescript and plugin-Typescript to ensure proper module resolution when compiling typescript on the fly.

For Angular 2.x packages, package.json has to be overridden by providing the location of typings, otherwise they will not be found. e.g

      "npm:@angular/[email protected]": {
        "main": "bundles/core.umd.js",
        "meta": {
          "bundles/core.umd.js": {
            "typings": "core/index.d.ts"
          }
        }
      }