Javascript Girl
  1. Javascript Girl
  3. Jum angulaire – route-ui ajouter parmètre par défaut
Intereting Posts
Bouton Désactiver dans le panneau de mise à jour en post-enregistrement asynchrone Est-ce que jQuery peut modifier la définition de style css? (Pas css individuel de chaque élément) Object.className ou object.getAttribute ("className / class")? Disparaître l'ancien élément, disparaître dans le nouvel élément Qu'est-ce que $ signifie ici dans JQuery CSS ou JavaScript pour mettre en évidence certaines zones d'opacité d'image Capture d'écran de l'iframe – html2canvas ne fonctionne pas Comment afficher le gif de chargement lors de la demande d'Ajax TypeError: '' n'est pas une fonction (en évaluant 'elem ()' dans jQuery form.submit () Javascript Math.ceil (Math.abs ()) optimisation Comment déplacer le marqueur en douceur sans cligner des yeux sur le plan Pourquoi ma balise <script> ne fonctionne-t-elle pas à partir du fichier php? (JQuery impliqué ici aussi) Accès html généré par Javascript avec htmlunit -Java Définissez la valeur par défaut pour la liste déroulante en utilisant angularjs? Réponse Ajax en tant qu'objet DOM

Jum angulaire – route-ui ajouter parmètre par défaut

Dans mon application, j'utilise UI-Router angulaire.

J'ai des locaux (anglais et hébreu). Ma langue de base est l'anglais.

C'est pourquoi je veux si la langue est l'anglais pour ne pas ajouter le paramètre à l'url

Par exemple:

  • Accueil English -> http://example.com/

  • Accueil hébreu -> http://example.com/he/

  • À propos de nous English -> http://example.com/about

  • À propos de nous hébreu -> http://example.com/he/about

Est-ce possible ?

C'est mon code actuel 

 $stateProvider .state('/', { url: "/", templateUrl: "Assets/app/templates/home.html", controller: 'homeController' }) .state('activity', { url: "/activity", templateUrl: "Assets/app/templates/gallery.html", controller: 'galleryController' }) .state('page', { url: '/:pagename', templateUrl: "Assets/app/templates/page.html", controller: 'pageController' });

    Il y a un plongeur actif

    Comme toujours, cela est possible avec UI-Router – fonctionnalités intégrées. Tout d'abord, nous présentons l'état super parent appelé "racine" par exemple. Il aurait défini le paramètre lang 

     .state('root', { url: '/{lang:(?:en|he|cs)}', abstract: true, template: '<div ui-view=""></div>', params: {lang : { squash : true, value: 'en' }} })

    Des choses intéressantes à mentionner: L' url utilise regexp pour réduire la quantité de mots Lang correspondant (dans notre cas, anglais, hébreu et tchèque) : 

     url: '/{lang:(?:en|he|cs)}',

    Lire plus, par exemple, ici .

    En outre, nous profitons d'un paramètre appelé params : {} . Il dit que la valeur par défaut est 'en' et ce qui est plus important – il devrait être écrasé, sauté s'il y a une correspondance avec 'en' param value: 

     params: {lang : { squash : true, value: 'en' }}

    En savoir plus, par exemple ici ou ici

    Donc, c'est notre parent, l'état racine, que nous allons appliquer à tous les états avec un paramètre de définition d'état parent : 'root' : 

     .state('home', { parent: 'root', // parent will do the magic url: "/", templateUrl: "Assets/app/templates/home.html", controller: 'homeController' }) .state('activity', { parent: 'root', // parent magic url: "/activity", templateUrl: "Assets/app/templates/gallery.html", controller: 'galleryController' }) .state('page', { parent: 'root', // magic url: '/page/:pagename', templateUrl: "Assets/app/templates/page.html", controller: 'pageController' });

    Et maintenant, ces liens fonctionneraient:

    Ui-sref anglais: 

     <a ui-sref="home({lang: 'en'})">home({lang: 'en'})</a> <a ui-sref="activity({lang: 'en'})">activity({lang: 'en'})</a> <a ui-sref="page({pagename:'one', lang: 'en'})">page({pagename:'one', lang: 'en'})</a>

    Ui-sref hébreu: 

     <a ui-sref="home({lang: 'he'})">home({lang: 'he'})</a> <a ui-sref="activity({lang: 'he'})">activity({lang: 'he'})</a> <a ui-sref="page({pagename:'two', lang: 'he'})">page({pagename:'two'})</a>

    Href anglais: 

     <a href="#/">#/</a> <a href="#/activity">#/activity</a> <a href="#/page/three">#/page/three</a>

    Href hébreu: 

     <a href="#/he/">#/he/</a> <a href="#/he/activity">#/he/activity</a> <a href="#/he/page/three">#/he/page/three</a>

    Vérifiez-le en action ici