Angular 2.0 – Rip Controllers – Que no panda el cúnico!!

La gente está “asustá” parece ser que Angular 2.0 se va a cepillar los controladores y el $scope, madre mía!! como vamos a controlar nuestro código sin controladores?, como vamos a hacer el binding sin $scope???

Que no cunda el pánico, no es un cambio tan drástico. Para la gente que entienda bien las directivas y que esté familiarizado con el “controller as syntax” este cambio no es tan drástico.

Según la famosa imagen del ngEurope:

  • Se cargan el jqLite. No hay problema pues con el document.query* vamos servidos
  • Se cargan el angular.module. Ya veremos que inventan, pero tendrán que inicializar el rollo de algún modo.
  • Se cargan el Directive Definition Object (DDO). Serán todo directivas, pero cambian el modo en que se definen.
  • Se cargan el $scope. Tendrán que inventar algo para hacer binding de la vista a las directivas.
  • Se cargan los controllers. Esto si que no es nada nuevo, se veía venir viendo lo que se puede hacer con las directivas y viendo como Web Components aprieta.

Bien, lo que vengo a demostrar aquí es como con Angular 1.3 ya se puede trabajar sin controladores propiamente dichos, sin ng-controller, y aunque para el ejemplo necesito el $scope para hacerlo funcionar (esto no es 2.0), no usaré el $scope directamente para hacer el binding.

Este es el html:

<!DOCTYPE html>
<html ng-app="ripControllers">
<head>
</head>    
<body>
    <div rip-controller="rip">
        <input type="text" ng-model="rip.name"/>
        {{ rip.name }}
        <button ng-click="rip.alert()">Alert it!</button>
    </div>
    <img src="https://pbs.twimg.com/media/B0ng4rdIQAAPHUA.jpg"></img>
    <script src="https://code.angularjs.org/1.2.26/angular.min.js"></script>
    <script src="ripControllers.js"></script>
</body>
</html>

Como véis uso una directiva llamada “rip-controller” y a ella le asigno el nombre de mi modelo, luego en el modelo hago binding por medio del nombre asignado a
la directiva.

Ahora el javascript:

(function (undefined){
    angular.module("ripControllers", [])
    .directive("ripController", function(){
        return {
            restrict: "A",
            scope: true,
            controller: ["$scope", "$attrs", function (scope, attrs) {
                scope[attrs["ripController"]] = this;
                this.name = "Write here pelase";
                this.alert = function(){
                    alert(this.name);
                };
            }]
        };
    });
}());

Bién, ha sido facil, por supuesto tengo que usar el $scope para comunicarme con la vista puesto que tengo que usar DDO para poder hacerlo correr. Luego he usado algo parecido a lo que hace “controller as”, he metido en el $scope una propiedad con el valor pasado en la directiva, de modo que en las vistas puedo hacer binding a través del nombre que se elija.

Ahora quiero que veáis esto:

module RipControntrollers {
 
	export class RipControllerDirective {
		public restrict: string = "A";
		public scope: boolean = true;
		public controller = RipController;
	}
 
	export class RipController {
		public static $inject = ["$scope", "$attrs"];
 
		constructor(private scope, private attrs) {
			this.setControllerAs();
		}
 
		private setControllerAs() {
			this.scope[this.attrs["ripController"]] = this;
		}
 
		public name: string = "Write here please.";
 
		public alert() {
			alert(this.name);
		}
	}
 
	angular.module("ripControllers", [])
		.directive("ripController", [RipControllerDirective]);
 
}

Ostia! ahora si que es distinto, no?
Es lo mismo de arriba pero en TypeScript, lo que está pasando es que las pocas cosas y no definitivas que estamos viendo de AngularJS 2.0 están escritas en ES6 y por eso lo vemos todavía peor.

He sido muy valiente yo a la hora de escribir sobre esto con la poca experiencia que tengo, pero creo que no voy mal encaminado.

One comment

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Demuestra que no eres un bot *