angularjs - Bagaimana saya bisa mendefinisikan controller saya menggunakan TypeScript?

Bagaimana cara mendefinisikan controller saya menggunakan TypeScript. Saat ini berada di Angular JS tetapi saya ingin mengubahnya menjadi TypeScript. Sehingga data dapat diambil dengan cepat.

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

Jawaban #1

Ada 2 cara berbeda untuk menangani ini:

• masih menggunakan $scope
• menggunakan controllerAs (disarankan)

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

    }
}

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

    }
}

Jika Anda beralih dari $scope ke controllerAs, tampilan Anda akan berubah dari:

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

kepada :

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

di mana custom adalah representasi dari pengendali sehingga Anda secara eksplisit memberi tahu apa yang Anda tautkan dalam markup Anda.

Catatan $inject adalah cara untuk memberikan Angular informasi tentang dependensi apa yang harus disuntikkan ke controller Anda saat runtime bahkan ketika kode telah diminifikasi (string tidak diminifikasi)

Jawaban #2

Saya memutuskan untuk menambahkan jawaban lain, dengan contoh yang bekerja. Ini adalah versi yang sangat disederhanakan, tetapi seharusnya menunjukkan semua dasar bagaimana menggunakan TypeScript dan angularJS.

Ada plunker yang berfungsi

Ini akan menjadi data.json kami yang berperan sebagai server.

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

Ini akan menjadi modul awal kami MainApp.js:

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

angular.module('CustomerSearch',[])

Jadi nanti kita bisa menggunakan modul CustomerSearch. Ini akan menjadi index.html kita

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

  <head>
    <title>my app</title>
    <script data-require="angular.js@*"
            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>

Sekarang, kita akan melihat deklarasi 1) direktif, 2) cakupan, 3) pengontrol. Semua ini bisa berada dalam satu file (periksa di sini). Mari kita amati ketiga bagian dari file tersebut CustomerSearch.dirc.js (ini adalah CustomerSearch.dirc.ts .. tapi untuk plunker saya kompilasi itu)

1) dapatkan referensi ke modul 'CustomerSearch' yang dideklarasikan di atas dan deklarasikan 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()]);

Direktif tersebut dinyatakan dalam TypeScript dan segera disuntikkan ke dalam modul kami

Sekarang, kita mendeklarasikan sebuah scope untuk digunakan sebagai objek bertipe kuat di Controller:

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

Dan sekarang kita bisa mendeklarasikan pengendali sederhana

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

Perhatikan bahwa semua sedang bertindak di sini