angularjs - parametros - formularios en angular 5
¿Cómo puedo definir mi controlador usando TypeScript? (4)
Cómo definir mi controlador usando TypeScript. Como en este momento está en js angular, pero quiero cambiar esto para el script de tipo, para que los datos se puedan recuperar rápidamente.
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");
});
}
}
Ahora vamos a ver un ejemplo básico en el que tenemos que crear un módulo y un controlador con un método. Para comenzar con Typecript, necesitamos agregar los siguientes archivos en nuestro proyecto. No tienen en cuenta la trayectoria de referencia, acaba de encontrar el nombre del archivo de la lista.
<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>
Instale el Script mecanografiado desde el siguiente enlace si no está presente en Visual Studio https://www.microsoft.com/en-us/download/details.aspx?id=48593
Una vez que termine la descarga del archivo tipificación anterior, añadir que en su proyecto.
/// <reference path="../scripts/typings/angularjs/angular.d.ts" />
/// <reference path="../scripts/typings/angularjs/angular-route.d.ts" />
Ahora cree un archivo mecanografiado app.ts y añadir la referencia anterior en las dos primera línea para obtener el IntelliSense mientras que la codificación.
Consulte a continuación enlace para más información detallada
https://angular2js.blogspot.in/2016/06/create-sample-application-in-angular-js.html
Habría más para mejorar (por ejemplo, no $ scope.search, pero Ctrl.search), pero una de las formas podrían ser:
En primer lugar creamos nuestra MyModule módulo y definimos un nuevo ámbito $ - el
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[];
}
El siguiente es el controlador, que luego se inyectaría en el módulo angular.
que hace uso de la
ICustomerScope
definido anteriormente
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");
});
}
}
Ahora continuamos - obtenemos referencia al módulo y registramos el controlador:
CustomerCtrl
.
var app = angular.module("MyControllerModule");
app.controller("CustomerCtrl", MyModule.CustomerCtrl);
}
Ahora nuestro controlador puede ser usado, hará lo mismo que el original.
Pero se podría utilizar y declarar las acciones públicas
en lugar
de
$scope.methods()
Hay 2 formas diferentes de abordar esto:
- sigo usando $ scope
- utilizando controllerAs (recomendado)
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");
});
}
}
Usando 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 cambia de $ scope a controller Como su vista cambiaría de:
<div ng-controller="CustomCtrl">
<span>{{customer}}</span>
</div>
a:
<div ng-controller="CustomCtrl as custom">
<span>{{custom.customer}}</span>
</div>
donde
custom
es una representación del controlador por lo que está diciendo explícitamente lo que va a enlazar en su margen de beneficio.
Nota $ inject es una forma de proporcionar información angular sobre qué dependencias inyectar en su controlador en tiempo de ejecución, incluso cuando el código se ha minimizado (las cadenas no se minimizan)
He decidido añadir otra respuesta, con el ejemplo de trabajo.
Está muy versión simplificada, pero debe mostrar toda la forma básica que nos
TypeScript
y
angularJS
.
No es un trabajo plunker
Este sería nuestro rol de servidor
data.json
.
{
"a": "Customer AAA",
"b": "Customer BBB",
"c": "Customer DDD",
"d": "Customer DDD",
"Default": "Not found"
}
Esto sería nuestro módulo de partida
MainApp.js
:
var app = angular.module(''MainApp'', [
''CustomerSearch''
]);
angular.module(''CustomerSearch'',[])
Entonces más tarde podemos usar el módulo
CustomerSearch
.
Este sería nuestro 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>
Ahora, veríamos la declaración de 1) directiva, 2) alcance, 3) controlador.
Todo esto podría ser en un solo archivo (comprobarlo
aquí
).
Observemos las tres partes de ese archivo
CustomerSearch.dirc.js
(es CustomerSearch.dirc.
Ts
.. pero para plunker cumplí eso)
1) obtener la referencia al módulo ''CustomerSearch'' declarado arriba y declarar la
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 directiva fue declarada en TypeScript e inmediatamente inyectada en nuestro módulo
Ahora, declaramos un ámbito para ser utilizado como un objeto fuertemente tipado en Controller:
export interface ICustomerSearchScope extends ng.IScope
{
SearchedValue: string;
FoundResult: string;
Ctrl: CustomerSearchCtrl;
}
Y ahora podemos declarar simple controlador
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);
}
Observe que todo en acción aquí