En muchas ocasiones me encuentro con que al comenzar a trabajar con Angular.js a casi todo el mundo le resulta dificil entender el concepto de Inyección de Dependencia y Convención sobre configuración que el framework aplica a sus ejemplos más básicos. Vamos a ver un bloque de código de Angula.js y explicarlo un poco más a detalle.
<html ng-app="moduloFacturas"> <head> <script type="text/javascript" src="factura.js"> </script> <script type="text/javascript" src="angular.min.js"> </script> <script type="text/javascript"> angular.module('moduloFacturas',[]).controller("controladorFacturas",function($scope,$http) { var peticion= $http.get("facturas"); peticion.success(function(listaFacturas) { $scope.listaFacturas=listaFacturas; }); }); </script> </head> <body ng-controller="controladorFacturas"> <table > <tr ng-repeat="factura in listaFacturas"> <td>{{factura.id}}</td> <td>{{factura.concepto}}</td> <td>{{factura.importe}}</td> </tr> </table> </body> </html>
Aquí tenemos definido un controlador principal (controladorFacturas) que es el encargado de dibujarnos una lista de Facturas en nuestra web. Ahora bien el controlador recibe como parámetros dos objetos :$scope y $http. ¿Como funciona esto exactamente?.
Angular y su Motor
El motor de Angular.js es capaz de a traves de la declaración que acabamos de realizar obtener una cadena con el siguiente contenido :”$scope,$http” la cual procede a partir y sacar cada una de las literales.
Una vez hecho esto Angular se apoyará en el principio de Convención sobre Configuración(COC) y si la variable se denomina “$scope” inyectará un objeto $scope a la función que esta delimitado por el controlador en el que estamos ubicados. En segundo lugar si la variable se denomina $http Angular será capaz de darse cuenta que hacemos referencia al servicio de $http y lo inyectará.
De esta forma Angular inicializará los objetos que el controlador necesita. Así pues y al apoyarse en el principio de Convención sobre Configuración. El programa no nos funcionará si cambiamos el nombre de las variables por $ambito y $servicioAjax por poner un ejemplo algo que cuesta entender en un primer momento. Una vez hecho la aplicación arrancará sin ningún problema y nos mostrará una lista de facturas por pantalla.
Otros artículos relacionados: Batarang , Libro Angular
codigo facilito, gracias por la explicacion
de nada 🙂
[…] artículos relacionados: angular inyección dependencias, Libro Angular , Arquitecturas […]
[…] artículos relacionados:Angular e Inyección de dependencias , Libro […]