web-dev-qa-db-fra.com

Angular 2 techniques de chargement paresseux

J'ai déjà écrit une grosse application avec Angular 1 et requireJS avec AMD pour un chargement et une structuration paresseux. L'application n'utilise pas de routes, mais des parties de l'application telles que HTML, css et Javascript (modules angulaires) sont chargées paresseux.

Maintenant, je souhaite passer à Angular 2 et je recherche la meilleure technique de chargement paresseux pour les contenus HTML, css et JS (angulaires) qui ne dépendent pas des itinéraires et ne dépendent pas de milliers différents cadres javascript.

Les composants de la route de chargement si paresseux semblent être assez simples: Http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

mais comment accompliriez-vous ce scénario sans routes? Recommanderiez-vous quelque chose comme webpack, ou devrais-je conserver requireJS? Existe-t-il quelque chose comme OClazyload pour Angular 2? Ou cela fonctionne-t-il avec Angular 2 même sans aucun framework?

Je suis un ami de "Keep it simple" et j'aimerais vraiment le garder aussi petit et simple que possible. 

Merci!

javascripthtmlcssangularjslazy-loading
15
user3301565

Angular 2 est basé sur des composants Web. Le moyen le plus simple ("comme si vous aviez dit simplement") était d'utiliser des itinéraires et des composants. Vous pouvez également charger des composants simplement en utilisant des directives dans votre code HTML. par exemple:

@Component({
  selector: 'my-component', // directive name
  templateUrl: './app/my.component.html',
  directives: []
})
export class MyComponent {}



@Component({
  selector: 'root-component', // directive name
  directives: [MyComponent],
  template: '<my-component></my-component>',
})
export class myComponent {}

si vous modifiez votre modèle pour inclure <my-component> de manière dynamique, le composant sera chargé dynamiquement. Ce n'est pas une pratique exemplaire.

il existe un composant dynamique loader pour angular 2, mais ce n’est pas aussi simple que d’utiliser des routes ou des directives. il créera une instance d'un composant et le joindra à un conteneur de vues situé à l'intérieur de la vue de composant d'une autre instance de composant.

avec cela vous pouvez utiliser:

@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent (<child id="child"></child>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, injector: Injector) {
    dcl.loadAsRoot(ChildComponent, '#child', injector);
  }
}
bootstrap(MyApp);

Le DOM résultant:

<my-app>
  Parent (
    <child id="child">Child</child>
  )
</my-app>

Il existe une autre option (consultez le lien angular2 ci-dessus) dans laquelle vous pouvez éventuellement fournir aux fournisseurs la configuration de l'injecteur mis à disposition pour cette instance de composant.

J'espère que cela t'aides.

3
Tomer Almog

Avec angular 2 Dernière version, nous pouvons utiliser la propriété loadchildren pour effectuer un chargement paresseux. customer.module # Customer2Module? chunkName = Client '},

Dans l'exemple ci-dessus, j'utilise Webpack Bundling (chargeur de routeur angulaire 2) + Routage Anguar 2 pour charger paresseux les modules.

2
Kattamudi

https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.582uw0wac

Supposons que nous avons deux pages dans notre application, “home” et “about”. Certaines personnes pourraient ne jamais atteindre la page à propos, il est donc logique de ne transmettre le contenu de la page à propos qu'aux personnes qui en ont réellement besoin. C'est là que nous allons utiliser le chargement paresseux.

0
narasimhareddy969