Come posso definire il mio controller usando TypeScript?

Come definire il mio controller usando TypeScript. Come ora è in js angular, ma voglio cambiare questo per script di tipo. Così che i dati possono essere recuperati rapidamente.

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

Ho deciso di aggiungere un’altra risposta, con un esempio funzionante. È una versione molto semplificata, ma dovrebbe mostrare tutte le nozioni basilari su come noi TypeScript e angularJS .

C’è un plunker funzionante

Questo sarebbe il nostro ruolo di un server.

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

Questo sarebbe il nostro modulo di partenza MainApp.js :

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

Quindi più tardi possiamo usare il modulo CustomerSearch . Questo sarebbe il nostro index.html

 < !DOCTYPE html>   my app       // our directive   

Ora, vedremmo la dichiarazione di 1) direttiva, 2) scope, 3) controller. Tutto questo potrebbe essere in un file (controllalo qui ). Osserviamo tutte e tre le parti di quel file CustomerSearch.dirc.js (è CustomerSearch.dirc. Ts .. ma per plunker l’ho rispettato)

1) ottenere riferimento al modulo “CustomerSearch” dichiarato sopra e dichiarare directive

 ///  module CustomerSearch { var app = angular.module('CustomerSearch'); export class CustomerSearchDirective implements ng.IDirective { public restrict: string = "E"; public replace: boolean = true; public template: string = "
" + "" + "" + "

for searched value {{SearchedValue}} " + " we found: {{FoundResult}}

" + "
"; public controller: string = 'CustomerSearchCtrl'; public controllerAs: string = 'Ctrl'; public scope = {}; } app.directive("customerSearch", [() => new CustomerSearch.CustomerSearchDirective()]);

La direttiva è stata dichiarata in TypeScript e immediatamente iniettata nel nostro modulo

Ora, dichiariamo un ambito da utilizzare come object fortemente tipizzato in Controller:

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

E ora possiamo dichiarare un controller semplice

  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) => { var data = response.data; this.$scope.FoundResult = data[this.$scope.SearchedValue] || data["Default"]; }); } } app.controller('CustomerSearchCtrl', CustomerSearch.CustomerSearchCtrl); } 

Osserva che tutto in azione qui

Ci sono 2 modi diversi per affrontare questo:

  • ancora usando $ scope
  • utilizzando controllerAs ( consigliato )

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

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

Se passi da $ scope a controllerAs la tua vista cambierebbe da:

 
{{customer}}

a:

 
{{custom.customer}}

dove custom è una rappresentazione del controller in modo che tu stia dicendo esplicitamente a cosa stai vincolando nel tuo markup.

Nota $ inject è un modo per fornire informazioni angolari su quali dipendenze iniettare nel controller in fase di esecuzione anche quando il codice è stato minimizzato (le stringhe non vengono minimizzate)

Ci sarebbe di più da migliorare (ad esempio non $ scope.search, ma Ctrl.search) , ma uno dei modi potrebbe essere:

Per prima cosa creiamo il nostro modulo MyModule e definiamo un nuovo $ scope: l’ 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[]; } 

Il prossimo è il controller, che verrà iniettato in un modulo angular in un secondo momento. usa l’ ICustomerScope sopra definito

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

Ora continuiamo – otteniamo il riferimento al modulo e registriamo il controller: CustomerCtrl .

  var app = angular.module("MyControllerModule"); app.controller("CustomerCtrl", MyModule.CustomerCtrl); } 

Ora il nostro controller può essere utilizzato, farà lo stesso dell’originale. Ma potrebbe essere usato e dichiarare azioni pubbliche invece di $scope.methods()

Ora vedremo un campione di base in cui dobbiamo creare un modulo e un controller con un metodo. Per iniziare con Typescript abbiamo bisogno dei seguenti file che devono essere aggiunti nel nostro progetto. Non considerare il percorso di riferimento, basta trovare il nome del file dall’elenco.

     

Installa il typescript dal seguente link se non presente nello studio visivo https://www.microsoft.com/en-us/download/details.aspx?id=48593

Una volta terminato il download del file di battitura sopra, aggiungilo nel tuo progetto.

 ///  ///  

Ora crea un file typescript app.ts e aggiungi il riferimento sopra riportato nella prima riga per ottenere l’intellisense durante la codifica.

Fare riferimento al link sottostante per ulteriori informazioni dettagliate

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