Как определить мой контроллер с помощью TypeScript?

Как определить мой контроллер с помощью TypeScript. Как сейчас, в angular js, но я хочу изменить это для типа script. Так что данные можно быстро восстановить.

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");
            });
    }
}

ОТВЕТЫ

Ответ 1

Я решил добавить еще один ответ с рабочим примером. Это очень упрощенная версия, но должна показать все основные, как нам TypeScript и angularJS.

Существует рабочий плункер

Это будет наша data.json играющая роль сервера.

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

Это будет наш начальный модуль MainApp.js:

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

angular.module('CustomerSearch',[])

Итак, мы можем использовать модуль CustomerSearch. Это будет наш 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>

Теперь мы увидим объявление 1) директивы, 2) scope, 3) контроллера. Все это может быть в одном файле (см. здесь). Пусть наблюдаются все три части этого файла CustomerSearch.dirc.js (это CustomerSearch.dirc. ts.., но для plunker я выполнил это)

1) обратитесь к объявленному выше модулю "CustomerSearch" и объявите 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()]);

Директива была объявлена ​​в TypeScript и сразу же введена в наш модуль

Теперь мы объявляем область, которая будет использоваться в качестве строго типизированного объекта в контроллере:

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

И теперь мы можем объявить простой контроллер

    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);
}

Обратите внимание, что все в здесь >

Ответ 2

Есть два разных способа решения этой проблемы:

  • все еще использует $scope
  • using controllerAs (рекомендуется)

с использованием $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");
                });

    }
}

Использование 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");
                });

    }
}

Если вы переключитесь с $scope на controllerAs, ваше представление изменилось бы с:

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

в

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

где custom - это представление контроллера, поэтому вы явно указываете, к чему вы привязываетесь в своей разметке.

Примечание $ inject - это способ предоставить angular информацию о том, какие зависимости вводить в ваш контроллер во время выполнения, даже когда код был уменьшен (строки не получают minified)

Ответ 3

Было бы лучше улучшить (например, не $scope.search, а Ctrl.search), но одним из способов может быть:

Сначала мы создаем наш модуль MyModule и определяем новый $scope - 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[];
    }

Далее будет контроллер, который будет введен в модуль angular позже. он использует ICustomerScope, определенный выше

    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");
                });
        }
    }

Теперь мы продолжаем: мы получаем ссылку на модуль и контроллер регистров: CustomerCtrl.

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

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

Теперь наш контроллер можно использовать, будет делать то же самое, что и оригинал. Но можно было бы использовать и объявлять публичные действия вместо $scope.methods()

Ответ 4

Теперь мы увидим базовый пример, в котором мы должны создать один модуль и контроллер одним способом. Для начала с Typescript нам нужны следующие файлы, которые необходимо добавить в наш проект. Не рассматривайте ссылочный путь, просто найдите имя файла из списка.

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

Установите Typescript по следующей ссылке, если нет в визуальной студии https://www.microsoft.com/en-us/download/details.aspx?id=48593

Как только закончите загрузку вышеуказанного файла ввода, добавьте это в свой проект.

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

Теперь создайте app_ts файла Typescript и добавьте вышеприведенную ссылку в первых двух строках, чтобы получить intellisense во время кодирования.

Подробнее см. ссылку ниже

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