How can I define my controller using TypeScript?

The question:

How to define my controller using TypeScript. As right now it’s in angular js but i want to change this for type script.So that the data can be retrieved quickly.

function CustomerCtrl($scope, $http, $templateCache){

    $scope.search = function(search)
    {
        debugger;
        var Search = {
            AccountId: search.AccountId,
            checkActiveOnly: search.checkActiveOnly,
            checkParentsOnly: search.checkParentsOnly,
            listCustomerType: search.listCustomerType
        };
        $scope.customer = [];
        $scope.ticket = [];
        $scope.services = [];
        $http.put('<%=ResolveUrl("API/Search/PutDoSearch")%>', Search).
            success(function(data, status, headers, config) {
                debugger;
                $scope.cust_File = data[0].customers;
                $scope.ticket_file = data[0].tickets;
                $scope.service_file = data[0].services;
            }).
            error(function(data, status)
            {
                console.log("Request Failed");
            });
    }
}

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

There are 2 different ways to tackle this:

  • still using $scope
  • using controllerAs (recommended)

using $scope

class CustomCtrl{
    static $inject = ['$scope', '$http', '$templateCache'];
    constructor (
            private $scope,
            private $http,
            private $templateCache
    ){
        $scope.search = this.search;
    }

    private search (search) {
        debugger;
        var Search = {
            AccountId: search.AccountId,
            checkActiveOnly: search.checkActiveOnly,
            checkParentsOnly: search.checkParentsOnly,
            listCustomerType: search.listCustomerType
        };
        this.$scope.customer = [];
        this.$scope.ticket = [];
        this.$scope.services = [];
        this.$http.put('<%=ResolveUrl("API/Search/PutDoSearch")%>', Search).
                success((data, status, headers, config) => {
                    debugger;
                    this.$scope.cust_File = data[0].customers;
                    this.$scope.ticket_file = data[0].tickets;
                    this.$scope.service_file = data[0].services;
                }).
                error((data, status) => {
                    console.log("Request Failed");
                });

    }
}

Using controllerAs

class CustomCtrl{
    public customer;
    public ticket;
    public services;
    public cust_File;
    public ticket_file;
    public service_file;

    static $inject = ['$scope', '$http', '$templateCache'];
    constructor (
            private $http,
            private $templateCache
    ){}

    private search (search) {
        debugger;
        var Search = {
            AccountId: search.AccountId,
            checkActiveOnly: search.checkActiveOnly,
            checkParentsOnly: search.checkParentsOnly,
            listCustomerType: search.listCustomerType
        };
        this.customer = [];
        this.ticket = [];
        this.services = [];
        this.$http.put('<%=ResolveUrl("API/Search/PutDoSearch")%>', Search).
                success((data, status, headers, config) => {
                    debugger;
                    this.cust_File = data[0].customers;
                    this.ticket_file = data[0].tickets;
                    this.service_file = data[0].services;
                }).
                error((data, status) => {
                    console.log("Request Failed");
                });

    }
}

If you switch from $scope to controllerAs your view would change from:

<div ng-controller="CustomCtrl">
  <span>{{customer}}</span>
</div>

to:

<div ng-controller="CustomCtrl as custom">
  <span>{{custom.customer}}</span>
</div>

where custom is a representation of the controller so you are explicitly telling what you are binding to in your markup.

Note
$inject is a way to provide angular with information about what dependencies to inject into your controller at run time even when the code has been minified (strings don’t get minified)

Method 2

I decided to add another answer, with working example. It is very simplified version, but should show all the basic how to us TypeScript and angularJS.

There is a working plunker

This would be our data.json playing role of a server.

{
  "a": "Customer AAA",
  "b": "Customer BBB",
  "c": "Customer DDD",
  "d": "Customer DDD",
  "Default": "Not found"
}

This would be our starting module MainApp.js:

var app = angular.module('MainApp', [
  'CustomerSearch'
  ]);

angular.module('CustomerSearch',[])

So later we can use module CustomerSearch. This would be our index.html

<!DOCTYPE html>
<html ng-app="MainApp" ng-strict-di>

  <head>
    <title>my app</title>
    <script data-require="[email protected]*"
            src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.1/angular.js"
            ></script>

    <script src="MainApp.js"></script>
    <script src="CustomerSearch.dirc.js"></script>
  </head> 

  <body>    
    <customer-search></customer-search> // our directive
  </body> 

</html>

Now, we would see the declaration of 1) directive, 2) scope, 3) controller. This all could be in one file (check it here). Let’s observe all three parts of that file CustomerSearch.dirc.js (it is CustomerSearch.dirc.ts .. but for plunker I complied that)

1) get reference to module ‘CustomerSearch’ declared above and declare directive

/// <reference path="../scripts/angularjs/angular.d.ts" />
module CustomerSearch
{
    var app = angular.module('CustomerSearch');

    export class CustomerSearchDirective implements ng.IDirective
    {
        public restrict: string = "E";
        public replace: boolean = true;
        public template: string = "<div>" +
            "<input ng-model="SearchedValue" />" +
            "<button ng-click="Ctrl.Search()" >Search</button>" +
            "<p> for searched value <b>{{SearchedValue}}</b> " +
            " we found: <i>{{FoundResult}}</i></p>" +
            "</div>";
        public controller: string = 'CustomerSearchCtrl';
        public controllerAs: string = 'Ctrl';
        public scope = {};
    }

    app.directive("customerSearch", [() => new CustomerSearch.CustomerSearchDirective()]);

The directive was declared in TypeScript and immediately injected into the our module

Now, we declare a scope to be used as a strongly typed object in Controller:

    export interface ICustomerSearchScope  extends ng.IScope
    {
        SearchedValue: string;
        FoundResult: string;
        Ctrl: CustomerSearchCtrl;
    }

And now we can declare simple controller

    export class CustomerSearchCtrl
    {
        static $inject = ["$scope", "$http"];
        constructor(protected $scope: CustomerSearch.ICustomerSearchScope,
            protected $http: ng.IHttpService)
        {
            // todo
        }
        public Search(): void
        {
            this.$http
                .get("data.json")
                .then((response: ng.IHttpPromiseCallbackArg<any>) =>
                {
                    var data = response.data;
                    this.$scope.FoundResult = data[this.$scope.SearchedValue]
                        || data["Default"];
                });
        }
    }
    app.controller('CustomerSearchCtrl',  CustomerSearch.CustomerSearchCtrl);
}

Observe that all in action here

Method 3

There would be more to improve (e.g. do not $scope.search, but Ctrl.search), but one of ways could be:

Firstly we create our module MyModule and define a new $scope – the ICustomer Scope

module MyModule
{
    export interface ICustomerScope extends ng.IScope
    {
        search: (search: any) => void;
        customer: any[];
        ticket: any[];
        services: any[];

        cust_File: any[];
        ticket_file: any[];
        service_file: any[];
    }

Next is the controller, which would be injected into angular module later. it does use the ICustomerScope defined above

    export class CustomerCtrl
    {
        static $inject = ['$scope', '$http', '$templateCache'];

        constructor(protected $scope: ICustomerScope,
            protected $http: ng.IHttpService,
            protected $templateCache: ng.ITemplateCacheService)
        {
            $scope.search = this.search;
        }
        public search = (search: any) => 
        {
            debugger;
            var Search = {
                AccountId: search.AccountId,
                checkActiveOnly: search.checkActiveOnly,
                checkParentsOnly: search.checkParentsOnly,
                listCustomerType: search.listCustomerType
            };

            this.$scope.customer = [];
            this.$scope.ticket = [];
            this.$scope.services = [];

            var url = "someUrl"; // '<%=ResolveUrl("API/Search/PutDoSearch")%>'
            this.$http.put(url, Search).
                success((data, status, headers, config) =>
                {
                    debugger;
                    this.$scope.cust_File = data[0].customers;
                    this.$scope.ticket_file = data[0].tickets;
                    this.$scope.service_file = data[0].services;
                }).
                error((data, status) =>
                {
                    console.log("Request Failed");
                });
        }
    }

Now we continue – we get reference to module, and register controller: CustomerCtrl.

    var app = angular.module("MyControllerModule");    

    app.controller("CustomerCtrl", MyModule.CustomerCtrl);
}

Now our controller can be used, will do the same as original. But could be used and declare public actions instead of $scope.methods()

Method 4

Now we will see a basic sample in which we have to create a module and a controller with one method. To start with Typescript we need the following files need to be added in our project. Don’t consider the reference path , just find the file name from the list.

<script type="text/javascript" src="scripts/angular.js"></script>
<script type="text/javascript" src="scripts/angular-route.js"></script>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/bootstrap.js"></script>

Install the Typescript from the following link if not present in visual studio
https://www.microsoft.com/en-us/download/details.aspx?id=48593

Once finish the download the above typing file , add that in your project.

/// <reference path="../scripts/typings/angularjs/angular.d.ts" />
/// <reference path="../scripts/typings/angularjs/angular-route.d.ts" />

Now create a typescript file app.ts and add the above reference in the first two line to get the intellisense while coding.

Refer below link for more detail information

https://angular2js.blogspot.in/2016/06/create-sample-application-in-angular-js.html


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment