Sunday, 5 June 2016

Create a Angular Controller using Typescript

In this post we are going to see how to create a angular js controllers in Typescript, While coding the Angular js we just create the controller function and assign with the controller along with dependency injection. First let we see some simple sample in angular js, next we will see how to create a same kind of thing in Typescript.

var appangular.module('app',[]);

app.controller('MainController', ['$scope', function ($scope) {
        $ = "Employees";
        $scope.title = "Angular Sample";

        $scope.getEmployees = function () {
            $scope.Employees = [
                { id: 1, name: "Rajesh", address: "Chennai" },
                { id: 2, name: "Suresh", address: "California" },
                { id: 3, name: "Ramu", address: "Pune" },
                { id: 4, name: "Shiny", address: "London" }


Now we see how to create a code in Typescript, In Typescript we have to create everything inside the module, even the creation of angular module must resides in a module pattern, but the important thing is order of execution is very important in Typescript. First here we will create a Controller Module , then assign it in the root module.

Here we have to take care 4 things 
1.  Model , Employee
2. Inject the Scope variable , so we have to create a interface which tells what must resides inside the scope, it must               derive from ng.IScope
3. Implement the scope methods and properties in the controller
4. Assign the controller in the Main Module angular 

module DotnetVisio.Model {
    export class Employee {
        id: number;
        name: string;
        address: string;

Above we can see that the Employee model consists of three properties id, name, address. 
The export keyword is used, which makes the Employee model to expose outside the  
DotnetVisio.Model namespace.

module DotnetVisio.Interfaces {
    export interface IMainScope extends ng.IScope {
        name: string;
        title: string;
        Employees: Array<Model.Employee>;
        getEmployees(): void;

Here in interface we have to specify the export keyword, which makes the interface to access 
in other module, Next thing is we have to derive the interface from the ng.IScope, then we 
have to declare the properties and methods which are going to expose against this Scope, in 
this example we are declaring 3 properties and 1 method.

module DotnetVisio.Controllers {

    export class MainController{
        private $scope: Interfaces.IMainScope;

        constructor($scope: Interfaces.IMainScope) {
            var ViewModel = this;
            ViewModel.$scope = $scope;
            ViewModel.$scope.title = "Angular Sample";
            ViewModel.$ = "Employees";

        private InitMethods(): void {
            var ViewModel = this;

            ViewModel.$scope.Employees = [];

            ViewModel.$scope.getEmployees = function () {

                ViewModel.$scope.Employees =  <Model.Employee[]>[
                    <Model.Employee>{ id: 1, name: "Rajesh", address: "Chennai" },
                    <Model.Employee>{ id: 2, name: "Suresh", address: "California" },
                    <Model.Employee>{ id: 3, name: "Ramu", address: "Pune" },
                    <Model.Employee>{ id: 4, name: "Shiny", address: "London" }

        static $inject = ['$scope'];

Above controller creation in Typescript  we are creating a module which  have a class with export, First thing is we must know the what are the things need to be inject in the constructor, so to do that we have to specify the static property named   ,static $inject = ['$scope'] When seeing the scope in we are specifying the type as $scope: Interfaces.IMainScope, then we are setting the scope in Current instance, so we can get it in through out the system, but before doing that we have to set the this instance to a variable  var ViewModel = this;, because the instance present in the constructor are not the same as the child function present inside a function (function inside another function), so this keyword refers to different instance, so to access the main instance due to avoid confusion or collision we are referring it to a variable, Finally assign the values to the $scope variable inside the function with the type reference.

ViewModel.$scope.Employees = <Model.Employee[]>[
                    <Model.Employee>{ id: 1, name: "Rajesh", address: "Chennai" },
                    <Model.Employee>{ id: 2, name: "Suresh", address: "California" },
                    <Model.Employee>{ id: 3, name: "Ramu", address: "Pune" },
                    <Model.Employee>{ id: 4, name: "Shiny", address: "London" }

Finally we are going to set the controller to the module

module DotnetVisio.Module {

    var app = angular.module('app', []);
    app.controller('MainController', Controllers.MainController);    


From this post you can learn how to create a controllers of angular js in Typescript.

No comments:

Post a Comment