Category Archives: JavaScript

XML Config File Load Angular

config.json file:

This is the file we want to load information from. This needs to be globally accessible so will need to be put in a directory under assets.

{
    "apiUrl":"http://localhost:9000",
    "readerUrl": "http://localhost:8088"
}

main.ts file:

This loads are new config file.

import {Config} from "./app/app.config";

Config.loadInstance('assets/config/config.json')
    .then(() => {
        platformBrowserDynamic().bootstrapModule(AppModule);
    });

app.module.ts file:

This gets the instance and provides it.

import {Config} from "./app.config";

providers: [
        {provide: Config, useFactory: () => Config.getInstance('assets/config/config.json')},
]

app.config.ts file:

This is the main config code.

import {Injectable} from "@angular/core";

@Injectable()
export class Config {

    private static cache = {};

    constructor(private data: any) { }

    public static loadInstance(jsonFile: string) {
        return new Promise((resolve, reject) => {
            var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
            xobj.open('GET', jsonFile, true);
            xobj.onreadystatechange = () => {
                if (xobj.readyState == 4) {
                    if (xobj.status == 200) {
                        this.cache[jsonFile] = new Config(JSON.parse(xobj.responseText));
                        resolve();
                    }
                    else {
                        reject(`Could not load file '${jsonFile}': ${xobj.status}`);
                    }
                }
            }
            xobj.send(null);
        });
    }

    public static getInstance(jsonFile: string) {
        if (jsonFile in this.cache) {
            return this.cache[jsonFile];
        }
        throw `Could not find config '${jsonFile}', did you load it?`;
    }

    public get(key: string) {
        if (this.data == null) {
            return null;
        }
        if (key in this.data) {
            return this.data[key];
        }
        return null;
    }
}

Angular Christmas Countdown

A quick play with some JavaScript and Angular.js to create a Christmas Counter for my Daughters

The HTML:

   
   
    
   
   

Imogen and Emily’s Christmas Counter

 

Time Now: {{ time | date:’dd/MM/yyyy HH:mm:ss’ }}

 

How Long to go: {{ myDays }} days, {{ myHours }} hours, {{ myMinutes }} mins, {{ mySeconds }} seconds.

The JavaScript Code:

(function(){
	var app = angular.module('store',['angularMoment']);

	app.controller('StoreController', function($scope,$interval, $filter){
                $scope.time = new Date();
		$scope.myTime = "";
                $scope.mySeconds = "";
                $scope.myMinutes = "";
                $scope.myHours = "";
                $scope.myDays = "";

	$interval(function()
	{
           var current = new Date();
           var cm = new Date(2016,11,25);
           var period = cm.getTime() - current.getTime();
           $scope.time = current;
           
  	   //take out milliseconds
  	   var difference_ms = period/1000;  //seconds
           var secs = Math.floor(difference_ms % 60);
          
           difference_ms = difference_ms/60;  // minutes
           var mins = Math.floor(difference_ms % 60);
  
           difference_ms = difference_ms/60; //hours
           var hours = Math.floor(difference_ms % 24);  
           var days = Math.floor(difference_ms/24);

           $scope.mySeconds = secs;
           $scope.myMinutes = mins;
           $scope.myHours = hours;
           $scope.myDays = days;

  	   $scope.myTime = days  + " days, " + hours + " hours, " + mins + " mins, " + secs + " seconds.";
	},1000);

	});

})();