web-dev-qa-db-fra.com

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

Comment définir mon contrôleur en utilisant TypeScript. Comme pour le moment, c’est en JS angulaire mais je veux changer ceci pour le type script.Ainsi, 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");
            });
    }
}
angularjstypescript
14
Shian JA

J'ai décidé d'ajouter une autre réponse, avec un exemple de travail. C'est une version très simplifiée, mais devrait montrer tous les principes de base pour nous TypeScript et angularJS. 

Il y a un plongeur actif

Ce serait notre rôle data.json de 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',[])

Donc, 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 verrions la déclaration de 1) directive, 2) champ d'application, 3) contrôleur. Tout cela pourrait être dans un seul fichier (vérifiez-le ici _). Observons les trois parties de ce fichier CustomerSearch.dirc.js(il s'agit de CustomerSearch.dirc.ts .. mais pour plunker j'ai respecté cela)

1) Obtenir la référence au module 'CustomerSearch' déclaré ci-dessus et déclarer 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 dans TypeScript et immédiatement injectée dans le module our

Maintenant, nous déclarons qu'une étendue doit être utilisée en tant qu'objet fortement typé dans Controller:

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

Et maintenant, nous pouvons déclarer un 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);
}

Observez que tout est en action ici

14
Radim Köhler

Il y a 2 façons différentes de s'y attaquer:

  • toujours en utilisant $ scope
  • utilisation de contrôleurs ( recommandé )

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

    }
}

Utilisation 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 de $ scope à controllerAs votre vue changerait 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 sorte que vous indiquez explicitement ce que vous souhaitez associer à votre balise.

Remarque $ Inject est un moyen de fournir de manière angulaire des informations sur les dépendances à injecter dans votre contrôleur au moment de l'exécution, même lorsque le code a été minifié (les chaînes ne sont pas minifiées).

17
Brocco

Il y aurait plus à améliorer (par exemple ne faites pas $ scope.search, mais Ctrl.search), mais l'une des méthodes suivantes pourrait être:

Tout d'abord, nous créons notre module MyModule et définissons un nouvel objet $ 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[];
    }

Vient ensuite le contrôleur, qui serait injecté ultérieurement dans le module angulaire. il utilise la ICustomerScope définie 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");
                });
        }
    }

Nous continuons maintenant - nous obtenons une référence au module et en enregistrons le 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 pourrait être utilisé et déclarer des actions publiques à la place de$scope.methods()

5
Radim Köhler

Nous allons maintenant voir un exemple de base dans lequel nous devons créer un module et un contrôleur avec une méthode. Pour commencer avec TypeScript, nous avons besoin des fichiers suivants doivent être ajoutés à notre projet. Ne considérez pas le chemin de référence, recherchez simplement le nom du fichier dans 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>

Installez le TypeScript à partir du lien suivant s'il n'est pas présent dans visual studio https://www.Microsoft.com/en-us/download/details.aspx?id=48593

Une fois le téléchargement du fichier de saisie ci-dessus terminé, ajoutez-le à votre projet.

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

Créez maintenant un fichier TypeScript app.ts et ajoutez la référence ci-dessus dans les deux premières lignes pour obtenir l’intellisense lors du codage.

Reportez-vous au lien ci-dessous pour plus d'informations. 

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

0
Rajesh G