Une introduction au nouveau routeur futuriste à Angularjs

Points clés

• AngularJS améliore ses capacités de routage avec un nouveau routeur actuellement en cours de développement dans Angular 2 et sera recouvert d'angular 1.4. Ce routeur résout les limites du module NGOUTE, telles que l'incapacité de prendre en charge des scénarios complexes tels que des vues imbriquées, des vues parallèles ou des séquences de vue.
• Le nouveau routeur simplifie la création de routage, permet la navigation entre les modèles et permet la gestion de plusieurs vues parallèles sur la page. Il fournit également un contrôle flexible sur le cycle de vie des composants, permettant l'interception et la navigation de contrôle.
• Bien que toujours en cours de développement, le nouveau routeur vaut la peine d'être essayé car il promet de simplifier la transition vers Angular 2 et est conçu pour gérer efficacement les scénarios d'application complexes.

AngularJS est l'un des cadres MV * JavaScript les plus populaires et est largement utilisé pour créer des applications (spas) (spas). L'une des fonctionnalités les plus difficiles d'un spa est le routage. Le routage client implique de modifier une partie de la vue et de créer des entrées dans l'historique de navigation du navigateur. En tant que cadre client entièrement fonctionnel, AngularJS a toujours pris en charge le routage via le module NGOUTE. Bien que cela soit assez bon pour le routage de base, il ne prend pas en charge les scénarios plus complexes tels que les vues imbriquées, les vues parallèles ou les séquences de vue.

Un nouveau routeur Angular 2 est actuellement en cours de développement et sera recouvert de 1,4 angulaire. Dans cet article, nous apprendrons à définir un itinéraire à l'aide d'un nouveau routeur et comment il résout certains des problèmes que Ngroute ne peut pas résoudre.

Comme mentionné précédemment, le développement du nouveau routeur est toujours en cours au moment de la rédaction, et certaines API peuvent changer plus tard. L'équipe angulaire n'a pas encore nommé le nouveau routeur, il s'appelle donc actuellement le futur routeur.

Limites de ngoute

ngoute n'est pas créé avec des applications d'entreprise complexes à l'esprit. J'ai personnellement vu certaines applications où certaines parties de la page doivent être chargées en plusieurs étapes. Ces applications peuvent être construites à l'aide de NGOUTE, mais il est presque impossible d'avoir un état d'URL pour chaque modification appliquée à la vue.

La directive

ng-View ne peut être utilisée qu'une seule fois dans une instance de la directive NG-App. Cela nous empêche de créer des routes parallèles car nous ne pouvons pas charger deux vues parallèles en même temps.

Les modèles de visualisation rendus dans NG-View ne peuvent pas contenir une autre directive NG-View. Cela nous empêche de créer des vues imbriquées.

Le nouveau routeur résout ces problèmes et fournit un moyen flexible de définir et d'utiliser le routage. Le nouveau routeur utilise également le "contrôleur comme" syntaxe. Je recommande fortement d'utiliser la syntaxe "Contrôleur" car c'est l'une des conventions que vous devez suivre aujourd'hui dans la préparation d'Angular 2.

Créer un itinéraire simple

Le nouveau routeur est créé avec Angular 2 à l'esprit. Angular 2 simplifiera l'injection de dépendance en éliminant la phase de configuration du module, ce qui signifie que nous n'avons pas besoin d'écrire des blocs de configuration pour définir les itinéraires - nous pouvons les définir n'importe où.

Chaque itinéraire à ajouter à un nouveau routeur contient deux parties:

• Chemin: URL du modèle de routage
• Composant: une combinaison de modèles et de contrôleurs. Par convention, le contrôleur et le modèle doivent être nommés d'après les composants

Le routage

est configuré à l'aide du service $router. Étant donné que $router est un service, nous pouvons définir des itinéraires n'importe où dans l'application (sauf dans le fournisseur ou le bloc de configuration). Cependant, nous devons nous assurer que les blocs de code qui définissent l'itinéraire sont exécutés immédiatement après les charges d'application. Par exemple, si l'itinéraire est défini dans le contrôleur (nous le ferons bientôt), le contrôleur doit être exécuté lorsque la page se charge. S'ils sont définis dans un service, la méthode de service doit être exécutée dans le bloc d'exécution.

naviguez entre les modèles

Définissons deux itinéraires simples et utilisons un nouveau routeur pour naviguer entre eux. Si vous souhaitez continuer à utiliser ce code, vous devez obtenir une copie de votre nouveau routeur. s'il vous plaît dites-moi comment le faire .

Vous pouvez installer un nouveau routeur sur une base par projet via NPM.

mkdir new-router && cd new-router
npm install angular-new-router

Cela créera un dossier nommé node_modules dans votre répertoire de projet. Le nouveau routeur se trouve dans Node_Modules / Angular-New-Router / Dist / Router.es5.min.js. Incluez-le dans votre projet après AngularJS lui-même.

Tout d'abord, définissons un module et configurons l'itinéraire:

angular.module('simpleRouterDemo', ['ngNewRouter'])
  .controller('RouteController', ['$router', function($router){
    $router.config([
      { path:'/', redirectTo:'/first' },
      { path:'/first', component:'first' },
      { path:'/second/:name', component:'second' }
    ]);

    this.name='visitor';
  }])

Le contrôleur dans l'extrait de code ci-dessus définit trois itinéraires. Notez que l'itinéraire racine redirige vers notre premier modèle et que la troisième route accepte les paramètres de l'URL. Comme vous pouvez le voir, la syntaxe du paramètre spécifié est la même que Ngoute.

Comme mentionné précédemment, chaque composant nécessite un modèle de vue correspondant et un contrôleur. Par convention, le nom du contrôleur doit être le nom du composant suffixé avec "Controller" (FirstController et SecondController dans notre exemple). Le nom du modèle de vue doit être le même que le nom du composant. Il doit également être dans un dossier avec le même nom que le composant, dans un dossier nommé composants. Cela nous donnera:

<code>projectRoot/
  components/
    first/
      first.html
    second/
      second.html</code>

Ces conventions peuvent être couvertes par $componentLoaderProvider. Nous verrons un exemple plus tard, mais respectons ces conventions pour l'instant.

Ce qui suit est une vue des composants premier et deuxième utilisé ci-dessus. Nous les définissons en ligne à l'aide de la directive Ng-Template (afin que nous puissions recréer une démo coulenable), mais idéalement, ils devraient être dans un fichier HTML distinct:

<🎜>

<🎜>

Parce que la vue est très simple, le contrôleur est également très simple:

angular.module('simpleRouterDemo')
  .controller('FirstController', function(){
    console.log('FirstController loaded');
    this.message = 'This is the first controller! You are in the first view.';
  })
  .controller('SecondController', function($routeParams){
    console.log('SecondController loaded');
    this.message = 'Hey ' + $routeParams.name + 
      ', you are now in the second view!';
  });

Étant donné que les deux contrôleurs sont créés pour être utilisés avec le "contrôleur comme" Syntaxe, ils n'acceptent pas $scope. $routeParams Le service est utilisé pour récupérer les valeurs des paramètres passés dans l'itinéraire.

Maintenant, nous devons charger ce contrôleur pour enregistrer l'itinéraire:

mkdir new-router && cd new-router
npm install angular-new-router

Enfin, nous devons lier ces itinéraires et les charger dans la page. Le nouveau routeur apporte la directive NG-Link et la directive NG-Viewport, qui relie la vue et charge respectivement les modèles. La directive NG-Viewport est similaire à Ng-View;

Le code d'extrait de code suivant montre comment ces instructions sont utilisées:

angular.module('simpleRouterDemo', ['ngNewRouter'])
  .controller('RouteController', ['$router', function($router){
    $router.config([
      { path:'/', redirectTo:'/first' },
      { path:'/first', component:'first' },
      { path:'/second/:name', component:'second' }
    ]);

    this.name='visitor';
  }])

(Sections suivantes, concernant les vues parallèles, la gestion du cycle de vie des composants et les conclusions, en raison des limites de l'espace, elles sont omises ici. La partie restante du texte d'origine peut être réécrite au besoin.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!