Comment puis-je définir mon contrôleur en utilisant TypeScript?

Comment définir mon contrôleur en utilisant des caractères d'imprimerie. Comme pour l'instant il est en angular js, mais je veux changer pour ce type de script.De sorte que les données peuvent être récupérées rapidement.

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

source d'informationauteur Shian JA | 2015-05-27

angularjs typescript

J'ai décidé d'ajouter une autre réponse, avec exemple de travail. C'est la version très simplifiée, mais doit montrer l'essentiel de la façon dont nous TypeScript et angularJS.

Il est un travail plunker

Ce serait notre data.json de jouer le rôle d'un serveur.

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

Ce serait notre module de départ MainApp.js:

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

angular.module('CustomerSearch',[])

Plus tard, nous pouvons utiliser le module CustomerSearch. Ce serait notre 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>

Maintenant, nous aimerions voir la déclaration de 1) la directive, 2) la portée, 3) le contrôleur. Tout cela pourrait être dans un fichier (vérifier ici). Observons les trois parties de ce fichier CustomerSearch.dirc.js (c'est CustomerSearch.dirc.ts .. mais pour plunker j'ai respecté)

1) obtenir une référence à un module 'CustomerSearch déclarés ci-dessus et déclare 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()]);

La directive a été déclarée en caractères d'imprimerie et immédiatement injecté dans le notre module

Maintenant, nous déclarons une portée pour être utilisé comme un objet fortement typé dans le Contrôleur:

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

Et maintenant, nous pouvons déclarer contrôleur simple

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

Observer que tous les l'action ici

Il y a 2 façons différentes d'aborder ce:

toujours à l'aide de $portée
à l'aide de controllerAs (recommandé)

à l'aide de $portée

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

    }
}

À l'aide de 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");
                });

    }
}

Si vous passez d' $portée à controllerAs votre point de vue, le changement à partir de:

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

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

où custom est une représentation du contrôleur de vous, indiquez explicitement ce qui vous lie à votre balisage.

Note
$injecter est un moyen de fournir angulaire avec des informations sur les dépendances à injecter dans votre contrôleur au moment de l'exécution, même lorsque le code a été minimisé (chaînes de ne pas obtenir minifiés)

Il n'y aurait plus d'améliorer (par exemple, ne pas $champ d'application.de recherche, mais la touche Ctrl.de recherche)mais l'un des moyens pourrait être:

Tout d'abord, nous créons notre module MyModule et de définir une nouvelle $scope - le 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[];
    }

Suivant est le contrôleur, ce qui serait injecté dans angulaire module plus tard. il utilise le ICustomerScope défini ci-dessus

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

Maintenant nous continuons - nous obtenir une référence à un module, et le registre de contrôleur: CustomerCtrl.

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

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

Maintenant notre contrôleur peut être utilisé, fera la même chose que l'original. Mais peut être utilisé et déclarer l'action publique au lieu de $scope.methods()

0

Maintenant, nous allons voir un exemple basique dans lequel nous avons à créer un module et un contrôleur avec une méthode. Pour commencer Tapuscrit nous avons besoin des fichiers suivants doivent être ajoutés dans notre projet. Ne considérez pas le chemin de référence , il suffit de trouver le nom de fichier de la 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>
```
Installer le fichier d'enregistrement à partir du lien suivant si pas présent dans visual studio
https://www.microsoft.com/en-us/download/details.aspx?id=48593

Une fois terminer le téléchargement ci-dessus en tapant fichier , ajoutez-le dans votre projet.
```
///<reference path="../scripts/typings/angularjs/angular.d.ts" />
///<reference path="../scripts/typings/angularjs/angular-route.d.ts" />
```
Maintenant créer un fichier d'enregistrement de fichier app.ts et ajouter la référence ci-dessus dans les deux premières ligne pour obtenir le intellisense lors de l'encodage.

Consultez ci-dessous le lien pour plus d'informations détaillées

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

Vous devez vous connecter pour publier un commentaire.