In this part we at going to see how we can create AngularJS Controllers for the Product. This controller will use the ProductsModel that we created in the earlier article and also the product service. The products controller will not initialize the product service but an instance will be passed using AngularJS dependency injection. So lets start with ProductsController

When we develop AngularJS application we usually use the $scope for declaring methods, properties etc. As $scope dynamically creates properties and methods at run-time you will notice the errors only at the run-time. To avoid this discrepancy if you look at the AngularJS definition file for TypeScript you will find a interface called ng.IScope, this interface has the base for AngularJS $scope. If you look further in to the definition file you will notice that $rootScope is ng.RootScopeService and ng.IScope extends ng.IRootScopeService.

The following is the class diagram of the classes and interfaces involved and a short note below provides a short description about it

Now lets see how we can use the ng.IScope for Products Controller class. I am going to create a Interface named IProductsController and this interface will extend ng.IScope. The interface definition will belike this

export interface IProductsController<T extends Models.Products.Products>
extends ng.IScope

In the IProductsController interface I have defined the following methods and properties.

This is a sample code and some methods and properties might be contradictory.

The IProdcutController interface full definition with methods and properties is given below

export interface IProductsController<T extends Models.Products.Products> extends ng.IScope
{
    Title: string;
    ShowImage: boolean;
    Products: Array<T>;
    Items: Array<T>;
    ReadItems: () => void;
    SaveItem: (T) => void;
    SaveChanges: () => void;
    DeleteItem: (T) => void;
    AddItem: (T) => void;
    IsReading: boolean;
    IsSaving: boolean;
    IsSaveSuccess: boolean;
}

Now lets see the implementation for ProductsController, the important one to understand here is the constructor, I have highlighted the constructor parameter in bold that indicates the instance of the IProductsController that will be passed while creating a instance of the ProductController in App.ts class. I will explain about it more in detail on the next part.

export class ProductsController<T extends Models.Products.Products>{
    static $inject = ["$scope", "productService"];
    private _title:string = "";
    private _showImage:boolean;
    private _products: Array<T>;
    private _service: app.Service.Products.ProductService;

    constructor(public $scope: IProductsController<T>, public productService: app.Service.Products.ProductService){
        this._service = productService;
        this.SetStatus(false, false);
        $scope.ReadItems = () => { this.ReadAllProducts(); };
        $scope.SaveItem = (T) => { this.SaveProduct(T); };
        $scope.SaveChanges = () => { this.SaveProducts(); };
        $scope.AddItem = (T) => {this.AddProduct(T);};
        $scope.DeleteItem = (T) => {this.DeleteProduct(T);};
        $scope.Items = new Array<T>();
        $scope.Products = new Array<T>();
        $scope.Title = "ProductsController";
        $scope.IsSaveSuccess = true;
        $scope.ShowImage = false;
        this.ReadAllProducts();
    }

    private ReadAllProducts() : void {
        this.SetStatus(true, false);
        this._service.Repository.GetAll().then((productCollection)=>{
        this.$scope.Items = productCollection as Array<T>;
        this.$scope.Products = productCollection as Array<T>;
        this.$scope.IsReading = false;
        });
    }

    private SaveProduct(itemToSave: T) : void {
        this.SetStatus(false, true);
        this.$scope.IsSaveSuccess = false;
        this._service.Repository.SaveItem(itemToSave).then((resultFlag)=> { this.$scope.IsSaveSuccess = resultFlag; });
        this.SetStatus(false, false);
    }

    private SaveProducts() : void {
        this.SetStatus(false, true);
        this.$scope.IsSaveSuccess = false;
        this._service.Repository.SaveItems(this.$scope.Items).then((resultFlag)=> { this.$scope.IsSaveSuccess = resultFlag; });
        this.SetStatus(false, this.$scope.IsSaveSuccess);
    }

    private AddProduct(itemToAdd: T): void{
        this.SetStatus(false, true);
        this.$scope.IsSaveSuccess = false;
        this._service.Repository.AddItem(itemToAdd).then((resultFlag)=> { this.$scope.IsSaveSuccess = resultFlag; });
    }

    private DeleteProduct(itemToDelete: T){
        this.SetStatus(false, true);
        this.$scope.IsSaveSuccess = false;
        this._service.Repository.DeleteItem(itemToDelete).then((resultFlag)=> { this.$scope.IsSaveSuccess = resultFlag; });
    }

    private SetStatus(isReading: boolean, IsSaving: boolean){
        this.$scope.IsReading = isReading;
        this.$scope.IsSaving = IsSaving;
    }
}