Angular Typescript Snippets from SideWaffle

angular-typescript-waffle.adoc

Angular Typescript snippets from SideWaffle

Each .ts file must start with the following comments

Install the angularjs.TypeScript.DefinitelyTyped NuGet package to resolve the reference paths, then adjust the path value to be relative to the file.

Also replace the $safeitemname$ with the name of the entity being defined.

/// <reference path='/Scripts/typings/angularjs/angular.d.ts'/>
/// <reference path='/Scripts/typings/angularjs/angular-resource.d.ts'/>

Angular Module

/// <reference path='/Scripts/typings/angularjs/angular.d.ts'/>
/// <reference path='/Scripts/typings/angularjs/angular-resource.d.ts'/>

interface I$safeitemname$ extends ng.IModule { }

// Create the module and define its dependencies.
var $safeitemname$: I$safeitemname$ = angular.module('$safeitemname$', [
    // Angular modules
    'ngResource',       // $resource for REST queries
    'ngAnimate',        // animations
    'ngRoute'           // routing

    // Custom modules

    // 3rd Party Modules
]);

// Execute bootstrapping code and any dependencies.
$safeitemname$.run(['$q', '$rootScope', ($q, $rootScope) => {

}]);

Angular Factory

/// <reference path="app1.ts" />
/// <reference path='/Scripts/typings/angularjs/angular.d.ts'/>
/// <reference path='/Scripts/typings/angularjs/angular-resource.d.ts'/>

interface I$safeitemname$ {
    greeting: string;
    serviceId: string;
    changeGreeting: () => void;
}

class $safeitemname$ implements I$safeitemname$ {
    static serviceId: string = "$safeitemname$";
    greeting = "Hello";

    constructor(private $http: ng.IHttpService, private $resource: ng.resource.IResourceService) {
    }

    changeGreeting() {
        this.greeting = "Bye";
    }
}

// Update the app1 variable name to be that of your module variable
app1.factory($safeitemname$.serviceId, ['$http', '$resource', ($http, $resource) =>
    new $safeitemname$($http, $resource)
]);

Angular Directive

/// <reference path="app1.ts" />
/// <reference path='/Scripts/typings/angularjs/angular.d.ts'/>
/// <reference path='/Scripts/typings/angularjs/angular-resource.d.ts'/>

interface I$safeitemname$ extends ng.IDirective {
    directiveId: string;
}

interface I$safeitemname$Scope extends ng.IScope {
    greeting: string;
    changeGreeting: () => void;
}

class $safeitemname$ implements I$safeitemname$ {
    static directiveId: string = "$safeitemname$";
    restrict: string = "A";

    constructor(private $window: ng.IWindowService) {
    }

    link = (scope: I$safeitemname$Scope, element, attrs) => {
        scope.greeting = "Hi!";
        scope.changeGreeting = () => {
            scope.greeting = "See ya!";
        };
    }
}

// Update the app1 variable name to be that of your module variable
app1.directive($safeitemname$.directiveId, ['$window', $window =>
    new $safeitemname$($window)
]);

Angular Controller

/// <reference path="app1.ts" />
/// <reference path='/Scripts/typings/angularjs/angular.d.ts'/>
/// <reference path='/Scripts/typings/angularjs/angular-resource.d.ts'/>

interface I$safeitemname$Scope extends ng.IScope {
    vm: $safeitemname$;
}

interface I$safeitemname$ {
    greeting: string;
    controllerId: string;
    changeGreeting: () => void;
}

class $safeitemname$ implements I$safeitemname$ {
    static controllerId: string = "$safeitemname$";
    greeting = "Hello";

    constructor(private $scope: I$safeitemname$Scope,
                private $http: ng.IHttpService,
                private $resource: ng.resource.IResourceService) {
    }

    changeGreeting() {
        this.greeting = "Bye";
    }
}

// Update the app1 variable name to be that of your module variable
app1.controller($safeitemname$.controllerId, ['$scope', '$http', '$resource',
                                              ($scope ,  $http ,  $resource) =>
    new $safeitemname$($scope, $http, $resource)
]);

Angular Controller using $scope

/// <reference path="app1.ts" />
/// <reference path='/Scripts/typings/angularjs/angular.d.ts'/>
/// <reference path='/Scripts/typings/angularjs/angular-resource.d.ts'/>

interface I$safeitemname$Scope extends ng.IScope {
    greeting: string;
    changeGreeting: () => void;
}

interface I$safeitemname$ {
    controllerId: string;
}

class $safeitemname$ implements I$safeitemname$ {
    static controllerId: string = "$safeitemname$";

    constructor(private $scope: I$safeitemname$Scope,
                private $http: ng.IHttpService,
                private $resource: ng.resource.IResourceService) {
        $scope.greeting = "Hello";
        $scope.changeGreeting = () => this.changeGreeting();
    }

    private changeGreeting() {
        this.$scope.greeting = "Bye";
    }
}

// Update the app1 variable name to be that of your module variable
app1.controller($safeitemname$.controllerId, ['$scope', '$http', '$resource',
                                              ($scope ,  $http ,  $resource) =>
    new $safeitemname$($scope, $http, $resource)
]);