Cómo escribir un controlador AngularJS con TypeScript
Los controladores se utilizan a menudo para mejorar el alcance de AngularJS.
. Cuando el controlador pasa ng-controller.
Cuando la directiva está conectada al DOM, Angular inicializará un nuevo objeto controlador usando la función Controlador especificada. Se creará un nuevo subámbito como $scope.
Las variables se inyectan en el constructor del controlador.
Hay dos opciones para conectar un controlador a una vista, una es usar el controlador como sintaxis y la otra es usar $scope.
. Si utiliza la sintaxis del controlador, a la instancia del controlador se le asignará un nuevo alcance de propiedades.
Para conocer las definiciones de tipos, consulte este increíble repositorio.
, que recopila casi todas las bibliotecas de JavaScript populares. Estas definiciones de tipo nos permiten obtener errores en tiempo de compilación e IDE.
Soporte inteligente basado en. Utilizo Visual Studio y Visual Code, los cuales tienen un gran soporte para TypeScript.
Como se mencionó anteriormente, AngularJS creará una instancia de controlador cuando sea necesario. Por lo tanto, los controladores pueden usar clases
definidas en TypeScript. Sabemos que se puede crear una instancia de una clase. Usemos controladores en vistas
Defina controladores de panel como método de sintaxis. El siguiente código no utiliza $scope.
Servicio.
Interfaz IDashboardVm {
Noticias: {título: cadena, descripción: cadena};
recuento de mensajes: número
caracteres: matriz <any>
título: cadena;
getMessageCount:() = >ng. IPromise<number>
conseguir personas:()=>ng. IPromise<Array<Any>>
}
La clase DashboardController implementa IDashboardVm {
static $inject:Array<String> =[' data service '];
Constructor (servicio de datos privados: app.core.IDataService) {
this . getmessagecount();
this .get people();
}
Noticias = {
Título: "Noticias",
Descripción: "Equipo de servidor interno para AngularJS, TypeScript y amp' JavaScript '
};
recuento de mensajes:número = 0;
carácter:matriz<any>=[] ;
resumen de concentradores:matriz <cualquiera>= [];
title:string = ' Dashboard ';
getMessageCount() {
p>
Devuelve este servicio de datos.
Entonces ((data) = & gt{
this.messageCount = data
devuelve this.messageCount
});
}
getPeople() {
Devuelve this.dataservice.getPeople(). Entonces ((data) = & gt{
this.people = data
return this.people
});
}
}
módulo angular ("aplicación. panel"). Controlador ("DashboardController", controlador de panel);
Al utilizar las funciones fuertemente tipadas de TypeScript, es mejor crear una interfaz que contenga todos los miembros y comportamientos relacionados con la vista. Esto facilita la definición de una implementación para el controlador y, si es necesario, la interfaz se puede convertir en un método abstracto para usar en otros lugares. Entonces, en el código anterior, creé un archivo llamado IDashboardVm.
Interfaz.
A continuación, se llama DashboardController. El controlador de
implementa esta interfaz y define un estado predeterminado para cada miembro. Eche un vistazo a la variable estática $inject
de esta clase, le dice a AngularJS DI.
¿Qué dependencias se inyectan antes de inicializar este controlador? Luego, cuando se inyectan parámetros en estos parámetros, el constructor define estos parámetros en el mismo orden que las dependencias requeridas.
Las dependencias mencionadas en esta clase son muy simples, asumiendo que es un servicio de datos.
Es un servicio AngularJS personalizado que encapsula todas las solicitudes HTTP al servidor. Según cada definición en la interfaz, a continuación debemos definir la implementación de estos comportamientos y llamar al servicio de datos internamente.
Método. Utiliza promesas.
Devuelve una respuesta que se asignará al miembro controlador para su posterior control del estado.
Lo realmente importante es registrar este controlador con la API del módulo de Angular. Ubicación de
. En el código anterior, primero defina la clase y luego complete su registro. Si se intercambia este comando, Angular no podrá encontrar nuestro controlador.
Ya implementado. El problema se puede resolver muy bien cuando se utilizan constructores de JavaScript porque la elevación de funciones juega un papel importante.
.
Así es como funciona este controlador en Angular-UI UI-Router.
El fragmento de código utilizado en , pero si desea utilizar el módulo de enrutamiento integrado de Angular, el concepto es el mismo. Tenga en cuenta que esto solo muestra el uso de controladores.
Sintaxis para configurar widgets.
Configuración: {
URL: "/",
templateUrl: 'application/dashboard/dashboard.html ',
Controlador : 'Controlador de panel',
Controlador: 'Máquina virtual',
Título: 'Panel de control',
}
Si desea utilizar el servicio $TERM alcance
de $TERM, entonces puede ampliar la interfaz anterior como el fragmento de código a continuación. Esto garantizará que todos los miembros de IScope puedan acceder a él a través de esta interfaz. El uso de este método también requiere cambiar la implementación de la clase de controlador, ya que ahora se requiere $scope.
Dependencias del servicio. Los tipos de interfaz personalizados pueden usar $scope en el constructor.
Los parámetros están fuertemente tipados y soportados de forma inteligente.
La interfaz IDashboardVm extiende angular.
IScope {
Noticias: {título: cadena, descripción: cadena};
recuento de mensajes: número
Carácter: matriz <any> ;
<; p>Título: cadena;getMessageCount:()= >ng. IPromise<number>
conseguir personas:()=>ng. IPromise<Array<Any>>
}