web-dev-qa-db-fra.com

Angular 1.5 et nouveau routeur de composants

J'utilise angular 1.5 beta 2 et le nouveau routeur de Angular 2 alpha 45.
Je n'ai pas trouvé d'exemples d'utilisation du dernier routeur avec Angular 1.
Je peux trouver des exemples d'utilisation du routeur pour Angular 2, en utilisant @RouteConfig.

Quelqu'un peut-il expliquer comment je configurerais un contrôleur angular 1? Et, si possible, un exemple de travail complet?

angularjsangular-new-router
14
pauloya

Mise à jour Ils ont cessé de travailler sur cette version du routeur et ont commencé une version 3 avec différentes API. Au 20 juin 2016, il n'y avait aucun moyen recommandé pour utiliser le routeur v3 avec Angular 1. Je ne sais pas si cela a changé depuis. Cette question et la réponse ci-dessous concerne le routeur v2 (aka ComponentRouter).

API obsolète
Quelques sites indiquent qu'un composant dans Angular 1 (pour le nouveau routeur) est un contrôleur enregistré comme [name]Controller et un modèle extrait de component/[name]/[name].html. C'est désormais obsolète.

Nouvelle API
Ce discussion contient des informations récentes, expliquant comment obtenir la dernière Angular 1 nouvelle version de routeur.

Le composant utilisé dans la configuration est mappé sur une directive enregistrée avec le nom du composant. Voir ceci exemple .

angular.module('app.home', [])
.directive('home', function() {
  return {
    template: 'Hello {{ home.text }}',
    controller: function HomeController() {
      this.text = 'World';
    },
    controllerAs: 'home'
  }
});

Avec Angular 1.5 il y a une nouvelle syntaxe pour l'enregistrement des composants, voir ici . Je l'ai utilisée avec cette syntaxe:

angular.module('app.home', [])
.component('home', {
  restrict: "EA",
  template: 'Hello {{ home.text }}',
  controller: function HomeController() {
    this.text = 'World';
  }
  // to configure a child route
  //,$routeConfig: [
  //  { aux: "/son", component: "son", as: "Left" },
  //  { aux: "/daughter", component: "daughter", as: "Left" }]
});
14
pauloya

Bien qu'il soit assez nouveau à ce stade, vous pouvez également utiliser un composant racine avec le nouveau routeur angular. Ce composant peut prendre des composants supplémentaires en tant qu'enfants.

J'ai suivi l'exemple de Pete Bacon Darwin pour lancer une version. https://github.com/petebacondarwin/ng1-component-router-demo

Remarquez dans sa version Le composant principal a $ router.config passé dans le bloc run et identifie les enfants avec 3 points.

.run(function($router) {
    $router.config([
    { path: '/...', name: 'App', component: 'app', useAsDefault: true }
    ]);

J'utilise angular 1.5.0 pour suivre son github. J'ai rencontré des problèmes en jouant avec la sortie de certains des candidats à la sortie.

4
Winnemucca