Wie kann ich definieren, meinen controller mit TypeScript?

Wie formuliere ich meine controller mit Typoskript. Wie jetzt es ist in angular js, aber ich will, dies zu ändern für Typ-Skript.Damit die Daten schnell abgerufen werden kann.

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

Sind Sie offen für die Verwendung ControllerAs syntax? was nun die vorgeschlagene Umsetzung
Eigentlich bin ich ein Winkel-app, die mit einer aspx-Seite, von der aus ich m nehmen ein text-Feld-Daten-und als bezaubernde, dass id in meine angulart js-code und als das senden von Parametern, um meine web-api und als erneut, wenn die Daten zurückgegeben werden, die durch API-es wird erhalten durch meine Winkel-Skript und als es wird gezeigt, dass es an meinem Netz.
Alle unsere Basis sind gehören zu uns!
Alle Ihre Basis sind gehören zu uns! Kann ich kommen, um die Außenseite jetzt?

InformationsquelleAutor Shian JA | 2015-05-27

angularjs typescript

Beschloss ich, fügen Sie eine andere Antwort mit Beispiel. Es ist eine sehr vereinfachte version, aber sollte zeigen, alle grundlegenden, wie uns TypeScript und angularJS.

Es ist eine funktionierende plunker

Dies würde unsere data.json spielen die Rolle eines Servers.

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

Das wäre unser Start-Modul MainApp.js:

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

angular.module('CustomerSearch',[])

Damit wir später verwenden können Modul CustomerSearch. Dies würde unsere 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>

Nun, wir würden sehen, die Erklärung von 1) - Richtlinie, 2) Umfang, 3) controller. Dies alles könnte in einer Datei (check it hier). Wir beobachten alle drei Teile der Datei CustomerSearch.dirc.js (es ist CustomerSearch.dirc.ts .. aber für plunker ich eingehalten)

1) Verweis auf Modul 'CustomerSearch", erklärte vor und erklären 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()]);

Wurde die Richtlinie erklärt in Schriftlicher und sofort injiziert, in der unser Modul

Nun deklarieren wir eine Umfang verwendet werden, als ein stark typisiertes Objekt im Controller:

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

Und jetzt können wir erklären, einfache Steuerung

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

Beachten Sie, dass sämtliche in Aktion hier

Ich folgte auch Ihre zweite Frage und versucht, mehr details über das, was passiert in diesem code stackoverflow.com/a/30507056/1679310, hoffe es hilft ein bisschen
ja, ich m versucht nun, die Umsetzung in der gleichen Weise...Danke!!!!
Warum sind Sie Schichtung von eigenen Modulen auf der Oberseite des Winkel -? Ich bin nicht überzeugt, dass diese zusätzliche Schicht von Komplexität und zusätzliche global-state erforderlich ist. Was für einen Vorteil haben Sie eigentlich von dieser?
Scheint, wie verlesen das Modul keyword. Nehmen Sie es als ein namespace und es sollte dir die Antwort geben. Es gibt KEINE speziellen Modul überhaupt. Hoffe, das hilft ein bisschen..
ng-Module stellen bereits Verwendung von Namensräumen: safaribooksonline.com/blog/2014/03/27/...

InformationsquelleAutor Radim Köhler

Gibt es 2 verschiedene Möglichkeiten, um diese Situation zu bewältigen:

immer noch mit $scope
mit controllerAs (empfohlen)

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

    }
}

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

    }
}

Wenn Sie wechseln von $scope zu controllerAs Ihre Ansicht ändern würde aus:

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

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

wo custom ist eine Darstellung der Steuerung, so sind Sie explizit sagen, was Sie sind verbindlich in Ihrem markup.

Hinweis
$inject ist ein Weg, um den Winkel mit Informationen über das, was die Abhängigkeiten zu injizieren, in den controller zur Laufzeit, selbst wenn der code minified (strings nicht bekommen, minified)

Wird u bitte sagen Sie mir, was ist der Unterschied, wenn ich nicht verwenden, $Umfang, wie es ist, das Objekt der Angular Js? Bedeutet dre ny Auswirkungen auf perfromnce.Oder muss ich änderungen in meiner aspx-als auch
Ich aktualisiert meine Antwort auf beide Beispiele und auch ein Beispiel, wie Ihre Ansicht/markup ändern müssen, reflektieren Sie Ihre änderung in der Steuerung
Ich nahm das Stück $inject und fügte hinzu, dass in meiner Antwort
wenn Sie bei der Definition der controller in der route und nicht inline (über ng-controller), dann ja. In der route-definition, in dem Sie angeben controller: 'CustomCtrl' Sie hinzufügen können: controllerAs: 'custom'
in diesem Fall keine, nur die ng-controller Attribut zu haben as custom

InformationsquelleAutor Brocco

Es wäre noch mehr zu verbessern (z.B. nicht $Umfang.suchen, aber Strg.Suche), aber einer der Wege sein könnte:

Zunächst erstellen wir unser Modul MyModule und definieren Sie ein neues $scope - die 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[];
    }

Nächste ist die Steuerung, die würde injiziert Winkel-Modul später. es nutzt die ICustomerScope oben definiert

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

Nun machen wir weiter - wir Holen Verweis auf Modul, und registrieren controller: CustomerCtrl.

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

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

Nun unseren controller verwendet werden kann, wird das gleiche tun wie original. Aber genutzt werden könnte, und deklarieren Sie öffentliche Aktionen statt von $scope.methods()

Ein dickes Lob für das hinzufügen $inject an die Klasse geben für die Verkleinerung
Kohler erste Fehler " uncaught error: amgular ist nicht definiert
Warum sind Sie Schichtung von eigenen Modulen auf der Oberseite des Winkel -? Ich bin nicht überzeugt, dass diese zusätzliche Schicht von Komplexität und zusätzliche global-state erforderlich ist. Was für einen Vorteil haben Sie eigentlich von dieser?
Scheint, wie verlesen das Modul keyword. Nehmen Sie es als ein namespace und es sollte dir die Antwort geben. Es gibt KEINE speziellen Modul überhaupt. Hoffe, das hilft ein bisschen...

InformationsquelleAutor Radim Köhler

0

Jetzt werden wir sehen, ein basic-Beispiel, in dem wir so erstellen Sie ein Modul und ein controller mit einer Methode. Um mit zu beginnen Typoskript, benötigen wir die folgenden Dateien müssen Hinzugefügt werden, in unserem Projekt. Berücksichtigen nicht die Referenz Pfad , nur den Dateinamen aus der Liste.
```
<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>
```
Installieren Sie das Typoskript aus dem folgenden link, wenn nicht vorhanden, in visual studio
https://www.microsoft.com/en-us/download/details.aspx?id=48593

Einmal beenden Sie die herunterladen die über die Eingabe-Datei , fügen Sie die in Ihrem Projekt.
```
///<reference path="../scripts/typings/angularjs/angular.d.ts" />
///<reference path="../scripts/typings/angularjs/angular-route.d.ts" />
```
Erstellen Sie nun eine typescript-Datei, app.ts und fügen Sie die obige Referenz in den ersten zwei Zeile, um die intellisense beim codieren.

Siehe den link unten für weitere detail-Informationen

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

InformationsquelleAutor Rajesh G

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.