angularjs - Kuinka voin määrittää kontrollerini käyttämällä TypeScriptiä?

Kuinka määritellä kontrollerini käyttämällä TypeScriptiä. Tällä hetkellä se on AngularJS:ssä, mutta haluan muuttaa tämän TypeScriptiksi, jotta tiedot voidaan hakea nopeasti.

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

Vastaus #1

Tähän on kaksi erilaista tapaa:

• käytetään edelleen $scope
• käyttäen controllerAs (suositeltu)

käyttäen $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");
                });

    }
}

Käyttämällä 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");
                });

    }
}

Jos vaihdat $scope:sta controllerAs:iin, näkymäsi muuttuisi seuraavasti:

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

kohtaan :

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

missä custom on ohjaimen esitys, joten kerrot nimenomaisesti, mihin sitoudut merkinnässäsi.

Huomautus $inject on tapa antaa Angularille tietoa siitä, mitä riippuvuuksia sen pitäisi injektoida kontrolleriisi ajon aikana, jopa silloin kun koodi on minimoitu (merkkijonot eivät muutu minimoinnin yhteydessä)

Vastaus #2

Päätin lisätä toisen vastauksen, jossa on toimiva esimerkki. Se on hyvin yksinkertaistettu versio, mutta sen pitäisi näyttää kaikki perusasiat siitä, miten käyttää TypeScript ja angularJS.

On toimiva plunker

Tämä olisi meidän data.json, joka toimii palvelimen roolissa.

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

Tämä olisi aloitusmoduulimme MainApp.js:

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

angular.module('CustomerSearch',[])

Joten myöhemmin voimme käyttää moduulia CustomerSearch. Tämä olisi meidän index.html

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

Nyt näemme 1) direktiivin, 2) laajuuden ja 3) ohjaimen määrittelyn. Kaikki tämä voisi olla yhdessä tiedostossa (katso se täältä). Tarkastellaan kaikkia kolmea osaa siitä tiedostosta CustomerSearch.dirc.js (se on CustomerSearch.dirc.ts .. mutta plunkeria varten käänsin sen)

1) hae viite yllä määriteltyyn moduuliin 'CustomerSearch' ja määrittele direktiivi

/// <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()]);

Direktiivi määriteltiin TypeScriptissä ja injektoitiin välittömästi moduuliimme

Nyt määrittelemme skoopin käytettäväksi Controllerissa vahvasti tyypitettynä objektina:

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

Ja nyt voimme julistaa yksinkertaisen ohjaimen

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

Huomaa, että kaikki toimivat täällä