In this blog we will see how we create a instance of ProductController in the App.ts file, this will be the starting point in the VSCode / Visual Studio code for initializing AngularJS module, services, models and controllers.

The following is the code that initializes the AngularJS module with instance to ProductService and ProductController.

module app {
    angular.module("jaysmodule",['ui.grid'])
    .service("productService", ["$q",
                function ($q) {
                    return new app.Service.Products.ProductService($q, "Static");
                }])
}

Let’s me explain how the instance of ProductService is created now. The following is the code for creating service

module app {
    angular.module("jaysmodule",['ui.grid'])
    .service("productService", ["$q",
                function ($q) {
                    return new app.Service.Products.ProductService($q, "Static");
                }])
}

If you have identified, the ProductService constructor code that we discussed this requires 2 parameters namely

• $q: ng.IQService – This AngularJS service is used to have the Asynchronous implementation, this sevice provides implementation for deferred, resolve and reject that will come handy when you call a external service.
• repoType: string – If you have noticed, ProductService extends ProductRepositoryManager which is responsible for creating instance of the repository service based on the string parameter passed, when you pass “Static” it creates instance of the ProductStaticRepository and when “Service” is passed it creates instance of ProductServiceRepository.
• While creating instance of ProductService instance we are creating instance of the ProductStaticRepository by passing “Static”. This will be the case when the business service development teams is not ready with the service while the UI team is ready to test their implementation. So until the business service is ready we can use the static repository for testing our AngularJS UI implementations. So by the time when actual service is ready we just need to pass “Service” as parameter to ProductRepositoryManager which provides the instance of ProductServiceRepository that calls the business sevices.

Let’s me explain how the instance of ProductController is created now. The following is the code for creating controller

module app {
    angular.module("jaysmodule",['ui.grid'])
    .service("productService", ["$q",
                function ($q) {
                    return new app.Service.Products.ProductService($q, "Static");
                }])
    .controller("ProductsController", ["$scope", "productService", function($scope: app.Controllers.Products.IProductsController<app.Models.Products.Products>, productService)
    {
        var controller = new app.Controllers.Products.ProductsController($scope, productService);
        controller.$scope.ReadItems();
        return controller;
    }]);
}

When you look at the controller code, it takes the instance of the product service and $scope as instance of app.Controllers.Products.IProductsController, as IProductsController extends ng.IScope AngularJS will compile without any issues and the important one to understand is that developers will get nice intellisense with the methods defined in IProductsController interface.