AngularJS UI-Router plusieurs pages

Comme Angulaire est le SPA qui est formidable, mais que si j'ai besoin d'une autre page ne sont pas liées à index.html comment est réalisé par UI-Router etats avec différents ui-vues?

Par exemple, j'ai index.html:

<!DOCTYPE html>
<html data-ng-app="npAdmin">
<head>
...
</head>
<body>
   <header>
      <data-user-profile class="user-profile"></data-user-profile>
  </header>

  <section class="content-wrapper">
      <aside data-main-menu></aside>
      <div class="main-content" data-ui-view></div>
  </section>

  <footer class="row"></footer>
...
</body>
</html>

app.js:

var app = angular.module('npAdmin', ['ui.router']);

app.config(['$httpProvider', '$stateProvider', '$urlRouterProvider', function($httpProvider, $stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('dashboard', {
        url: '/dashboard',
        templateUrl: '/app/dashboard/dashboard.html',
        controller: 'DashboardCtrl'
    })
    .state('crm', {
        url: '/crm',
        templateUrl: '/app/crm/crm.html',
        controller: 'CrmCtrl'
    })
...

Maintenant j'ai besoin de login.html ce qui est totalement différent de index.html (n'avez pas besoin de l'indice d'en-tête, pied de page, la barre latérale), mais la config stateProvider seulement ressemble à index.html ui-view et des changements de contenu par les états. Comment combiner login.html?

Il ne semble pas que dur, mais je ne l'obtenez pas.

InformationsquelleAutor swolfish | 2014-07-24
  1. 14

    Comme prévu, il n'est pas si difficile, il y a un plunker.

    L'astuce est de déplacer la commune de trucs pour tous les points de vue à l'intérieur du modèle spécifique par exemple common.html et de créer le résumé de l'état. D'autres termes, la index.html restera propre:

    <body>

    <div ui-view=""></div>
</body>

    Et son contenu précédent (contenu de la index.html) serait déplacé à common.html. La définition de l'état pourrait ressembler à ceci:

    $stateProvider
  .state('common', {
    templateUrl: 'tpl.common.html',
    abstract: true,
  })
  .state('dashboard', {
    url: '/dashboard',
    parent: 'common',
    ...
  })
  .state('crm', { 
    url: '/crm',
    parent: 'common',
    ...
  })
  .state('login', {
    url: '/login',
    templateUrl: 'tpl.login.html',
  });

$urlRouterProvider.otherwise('/crm');

    Qu'est-ce que intéressant (je dirais) est que nous avons introduit résumé état, sans url. De sorte que le tout logique actuelle restera, juste le résumé va jouer le rôle d'un modèle de mise en page.

    Vérifier plus de détails ici: exemple

    • Maintenant, je sais comment utiliser abstrait propriété de l'etat. Je vous remercie.
    • C'est super à voir;) ui-router est incroyable et vraiment puissant... en Profiter 😉
    • Je voudrais suggérer, de se poser la question. Afficher plus de détails. Vous surelly obtenir une réponse. Ou laissez-moi savoir que je puisse vérifier ainsi. Commentaire n'est pas adaptée à la recherche de pourquoi ton code ne fonctionne pas... est-il judicieux?
    • ok! Je vais coller la question ici!
    • Si je sais, je vais vous aider. Mais votre question ne cible plus les gars que doit-moi, de sorte que vous aurez la réponse... je suis sûr
    • href="http://stackoverflow.com/questions/29073389/loading-angular-js-internal-routes-and-controllers" title="chargement angular js interne routes et les contrôleurs">stackoverflow.com/questions/29073389/...

    InformationsquelleAutor Radim Köhler
  2. 4

    J'ai aussi eu ce problème avant, reportez-vous à CE si vous êtes intéressé. Dans ce lien, j'ai aussi traité de returnUrl et 401 http status code dans le cas où l'utilisateur n'est pas autorisé.

    Dans votre cas, je vous conseille de la conception de votre application comme ceci:

    index.html:

    <!DOCTYPE html>
<html data-ng-app="npAdmin">
<head>
...
</head>
<body data-ui-view>

</body>
...
</html>

    main.html:

      <header>
      <data-user-profile class="user-profile"></data-user-profile>
  </header>

  <section class="content-wrapper">
      <aside data-main-menu></aside>
      <div class="main-content" data-ui-view></div>
  </section>

  <footer class="row"></footer>

    login.html

    (inclure le code html de ce point de vue)

    App.js:

    var app = angular.module('npAdmin', ['ui.router']);

app.config(['$httpProvider', '$stateProvider', '$urlRouterProvider', function($httpProvider, $stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('login',{
       url:"/login",
       templateUrl: '/app/login.html',
       controller: 'LoginCtrl'
     })
    .state('main',function(){
       url:"/",
       templateUrl: '/app/main.html',
       controller: 'MainCtrl',
       abstract: true //you could use abstract state or not depending on your design 
    })
    .state('main.dashboard', { //inherit from your main
        url: '/dashboard',
        templateUrl: '/app/dashboard/dashboard.html',
        controller: 'DashboardCtrl'
    })
    .state('main.crm', { //inherit from your main
        url: '/crm',
        templateUrl: '/app/crm/crm.html',
        controller: 'CrmCtrl'
    })

    Explication:

    Comme angulaire est SPA, votre index.html devrait couvrir tous les points de vue de votre application. Il existe de multiples façons de s'assurer que. Dans cet exemple, le login est aussi un état dans votre application qui est séparé de votre main. En utilisant l'état de l'héritage angulaire routeur, vous pouvez, en outre, avoir des enfants membres de votre main qui sont dashboard et crm dans ce cas.

    • En outre, si vous allez avoir une page de Connexion séparée, assurez-vous de mettre en œuvre un contrôle d'Authentification de service. De cette façon, si l'utilisateur n'est pas connecté ils vont être re-dirigé vers la page de connexion. Voir cette vidéo pour une mise en œuvre de base.
    • B: bien Sûr, parce que ce n'est pas incluse dans la question. Et ce que nous allons vérifier pour toutes les demandes, non seulement pour la page de connexion.
    • Merci beaucoup, très exhaustive de réponse, mais avec quelques erreurs mineures. Radim de la solution avec l'abrégé de l'état semble que la solution parfaite.
    • Je n'ai pas testé le code, j'ai juste donné l'idée. Et comme je l'ai dit, il y a plusieurs façons de le faire. C'est juste une question de design.
    InformationsquelleAutor Khanh TO