Shian JA Shian JA - 1 year ago 66
TypeScript Question

How can I define my controller using TypeScript?

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){

$ = function(search)
var Search = {
AccountId: search.AccountId,
checkActiveOnly: search.checkActiveOnly,
checkParentsOnly: search.checkParentsOnly,
listCustomerType: search.listCustomerType
$scope.customer = [];
$scope.ticket = [];
$ = [];
$http.put('<%=ResolveUrl("API/Search/PutDoSearch")%>', Search).
success(function(data, status, headers, config) {
$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");

Answer Source

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', [


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

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

    <title>my app</title>
    <script data-require="angular.js@*"

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

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


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>" +
        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
                .then((response: ng.IHttpPromiseCallbackArg<any>) =>
                    var data =;
                    this.$scope.FoundResult = data[this.$scope.SearchedValue]
                        || data["Default"];
    app.controller('CustomerSearchCtrl',  CustomerSearch.CustomerSearchCtrl);

Observe that all in action here