javascript - software - Enfoque basado en componentes angulares y trabajar con resolución en Router.

ejemplos de componentes vue js

Question

Así que estoy trabajando con el enfoque basado en componentes en angular, digamos que tengo una directiva A llamada <home></home>;

import template from  ''./home.html'';
import controller from ''./home.controller.js'';

angular.module(''myApp'')
   .directive(''home'', homeDirective);

let homeDirective = () => {
    return {
        restrict: ''E'',
        template, 
        controller,
        controllerAs: ''vm'',
        bindToController: true
    };
};

Ahora puedo usar el componente <home></home> en mi enrutamiento de la siguiente manera:

angular.module(''myApp'')
    .config(($routeProvider) => {
        $routeProvider.when(''/'', {
            template: ''<home></home>''
        })
    })

Realmente me gusta este enfoque, pero con el enfoque "antiguo" estaba acostumbrado a usar "resolver" en mi enrutador para renderizar el componente solo cuando se resolvía una promesa:

angular.module(''myApp'')
    .config(($routeProvider) => {
        $routeProvider.when(''/'', {
            templateUrl: ''./home.html'',
            controller: ''./home.controller.js'',
            resolve: {
            message: function(messageService){
                return messageService.getMessage();
            }
        })
    })

Pregunta

¿Cómo puedo usar resolver con un enfoque basado en componentes en angular? aaj

Answer 1

Como resultado, el $ routeProvider angular pasa los locales resueltos al evento $ routeChangeSuccess (nextRoute.locals). Por lo tanto, podría crear un servicio que escuche los cambios de ruta y exponga a los locales:

angular.module(''myApp'', [''ngRoute''])
.factory(''$routeLocals'', function($rootScope) {
  var locals = {};
  $rootScope.$on(''$routeChangeSuccess'', function(_, newRoute) {
    angular.copy(newRoute.locals, locals);
  });
  return locals;
})
.run(function($routeLocals) {});

Luego puede insertar $ routeLocals en su directiva y usarlos.

Ejemplo: http://codepen.io/fbcouch/pen/eJYLBe

https://github.com/angular/angular.js/blob/master/src/ngRoute/route.js#L614

Answer 2

En Angular 1.x, cuando algunos datos llegan a mis enlaces de directivas (''='') de ajax y más, si observo estos enlaces en directivas, no he procesado las directivas correctamente. Reviso muchos de los temas y blogs de y todo lo que escriben sobre enlaces de datos y miro, pero no me ayudó, vi con mis propios ojos que a veces no se representaba una directiva, sino que llegaban datos.

Solo resolve en la directiva controlador principal me ayuda en esta situación, porque en otros casos parece un comportamiento indefinido. Me conecto desde mi directiva, la configuración de datos está bien, ¡pero la directiva no se procesa! (En el caso simple no uso ng-if o ng-show para ocultarlo).

Puedes leer más here

Answer 3

Hay un problema cerrado al respecto: la opción de resolución de soporte para directivas .

La conclusión es que no quieren que se carguen directivas arbitrarias de forma asíncrona, ya que causaría demasiado parpadeo.

La buena noticia es que Angular 2 admite esto (y mucho más) en la capa DI de una manera cohesiva y no presenta una tonelada de complejidad adicional.

En Angular 1.x puede atribuir la directiva con cierta información de donde se obtendrá el mensaje y manejar la carga asíncrona en su controlador. De esta manera usted puede mostrar una buena pantalla del cargador también.

angular.module(''myApp'')
    .config(($routeProvider) => {
        $routeProvider.when(''/'', {
            template: ''<home my-datasource="feed1"></home>''
        }).when(''/other'', {
            template: ''<home my-datasource="feed2"></home>''
        })
    })
    .factory(''DataSources'', (messageService) => {
        return {
            feed1: messageService.getMessage,
            feed2: messageService.getError
        };
    });

O, si desea que el message sea ​​siempre de la misma fuente, puede grabar messageService.getMessage().then(...) en su controlador.

Si no desea que la directiva sea visible en absoluto antes de que se resuelvan las promesas, puede introducir una variable de alcance establecida inicialmente como falsa y luego establecerla como verdadera en la resolución, por ejemplo:

app.controller(''HomeController'', ($scope, messageService) => {
   $scope.loaded = false;
   messageService.getMessage().then(message => {
       ...
       $scope.loaded = true;
   });
   ...
});

y oculte la directiva hasta que se cargue con ng-if="loaded" en el elemento raíz. Sí, eso es demasiado código de usuario, pero al menos tienes control sobre todo.