Please help me with the nested ui-router routing. I will give a simple example.

There are 3 URLs:

/ main

/ main / apples

/ main / oranges

There is a navigation from two points: apples and oranges. It is present only on the pages / main / apples and / main / oranges and serves to switch between these pages. The div with this navigation should not restart when switching between these two sections.

angular.module('fruits', ['ui.router']); angular.module('fruits').config(function($stateProvider, $urlRouterProvider, $locationProvider){ $stateProvider.state({ name: 'main', url: '/main', templateUrl: 'templates/main.html' }); $stateProvider.state({ name: 'main.oranges', url: '/oranges', templateUrl: 'templates/oranges.html' }); $stateProvider.state({ name: 'main.apples', url: '/apples', templateUrl: 'templates/apples.html' }); $urlRouterProvider.otherwise('/'); $locationProvider.html5Mode({ enabled: true, requireBase: false }); });

main.html:

 <!-- Заголовок и текст главной страницы, которые должны присутствовать только на главной странице --> <h1> Главная страница </h1> <span> Содержимое главной страницы </span> <!-- Навигация, которая должна присутствовать только на страницах /main/oranges и /main/apples и не перезагружаться при переходе между ними --> <div class="navigation"> <a ui-sref="main.oranges"> Яблоки </a> <a ui-sref="main.apples"> Апельсины </a> </div> <ui-view> </ui-view>

I need the pages of / main / oranges and / main / apples not to contain the contents of the main page, but navigation remains. Now on the / main / oranges and / main / apples pages both.

Thanks for the Grundy hint. Changed the code as follows:

main.html:

 <div ui-view="fruits-main"></div> <div ui-view="nav"></div> <ui-view></ui-view>

app.js:

 angular.module('fruits', ['ui.router']); angular.module('fruits').config(function($stateProvider, $urlRouterProvider, $locationProvider){ $stateProvider.state({ name: 'main', url: '/main', views: { '': { templateUrl: 'templates/main.html', }, 'fruits-main@main': { templateUrl: 'templates/fruits-main.html', } } }); $stateProvider.state({ name: 'main.apples', url: '/apples', views: { '': { templateUrl: 'templates/apples.html', }, 'nav': { templateUrl: 'templates/nav.html', }, 'fruits-main': { abstract: true, } } }); $stateProvider.state({ name: 'main.oranges', url: '/oranges', views: { '': { templateUrl: 'templates/oranges.html', }, 'nav': { templateUrl: 'templates/nav.html', }, 'fruits-main': { abstract: true, } } }); $urlRouterProvider.otherwise('/'); $locationProvider.html5Mode({ enabled: true, requireBase: false }); });

But not solved one problem. Navigation restarts every time you move from one section to another. How to be?

apples.html

 <h1> Яблоки </h1> <p>Текст о яблоках</p>

nav.html

 <!-- Навигация, которая должна присутствовать только на страницах /main/oranges и /main/apples и не перезагружаться при переходе между этими разделами --> <div class="navigation"> <a ui-sref="main.apples" ui-sref-active="active"> Яблоки </a> <a ui-sref="main.oranges" ui-sref-active="active"> Апельсины </a> <div class="animation"></div> </div>

fruits-main.html

 <h1>Главная страница</h1> <p>Какой-то текст на главной странице</p>

css:

 *{ margin: 0; padding: 0; } .active{ color: red !important; } @-webkit-keyframes go { from { left: 0px; } to { left: 500px; } } .animation{ width: 50px; height: 50px; background: green; position: relative; left: 0; -webkit-animation: go 1s infinite alternate; }
  • I did not understand from the pictures what exactly is wrong. Try to make a minimal reproducible example of how it now looks and insert it into the question - Grundy
  • Made. I tried to formulate as clearly as possible - user208795
  • Yes, so well, when the time will write the answer, in a nutshell - use the second ui-view that will be filled only in the specified states - Grundy
  • If you have already decided, you can add your answer, with a description of what and how you did - Grundy
  • Alas, I did not decide (( - user208795

1 answer 1

The problem is that the navigation block changes in each of the steytov pages, even if not the same.

For the solution, you can enter for these pages some abstract parent state, in which once set the template for navigation.

It might look like this:

 angular.module('fruits', ['ui.router']); angular.module('fruits').config(function($stateProvider, $urlRouterProvider) { $stateProvider.state({ name: 'main', url: '/main', views: { '': { templateUrl: 'main.html', }, 'fruits-main@main': { templateUrl: 'fruits-main.html', } } }); $stateProvider.state('main.fruits', { abstact: true, url: '', views: { '': { template: '<ui-view></ui-view>' }, 'nav': { templateUrl: 'nav.html', } } }); $stateProvider.state({ name: 'main.fruits.apples', url: '/apples', views: { '': { templateUrl: 'apples.html', }, 'fruits-main@main': { abstract: true } } }); $stateProvider.state({ name: 'main.fruits.oranges', url: '/oranges', views: { '': { templateUrl: 'oranges.html', }, 'fruits-main@main': { abstract: true } } }); $urlRouterProvider.otherwise('/main/oranges'); }); 
 /* Styles go here */ * { margin: 0; padding: 0; } .active { color: red !important; } @-webkit-keyframes go { from { left: 0px; } to { left: 500px; } } .animation { width: 50px; height: 50px; background: green; position: relative; left: 0; -webkit-animation: go 1s infinite alternate; } 
 <script data-require="angular.js@1.5.9" data-semver="1.5.9" src="//code.angularjs.org/1.5.8/angular.js"></script> <script data-require="ui-router@0.3.1" data-semver="0.3.1" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script> <div ng-app="fruits"> <div ui-view></div> <script type="text/ng-template" id="main.html"> <div ui-view="fruits-main"></div> <div ui-view="nav"></div> <ui-view></ui-view> </script> <script type="text/ng-template" id="nav.html"> <!-- Навигация, которая должна присутствовать только на страницах /main/oranges и /main/apples и не перезагружаться при переходе между этими разделами --> <div class="navigation"> <a ui-sref="main.fruits.apples" ui-sref-active="active"> Яблоки </a> <a ui-sref="main.fruits.oranges" ui-sref-active="active"> Апельсины </a> <div class="animation"></div> </div> </script> <script type="text/ng-template" id="apples.html"> <h1> Яблоки </h1> <p>Текст об яблоках</p> </script> <script type="text/ng-template" id="fruits-main.html"> <h1>Главная страница</h1> <p>Какой-то текст на главной странице</p> </script> <script type="text/ng-template" id="oranges.html"> <h1> Апельсины </h1> <p>Текст об апельсинах</p> </script> </div>

  • Grundy, thank you very much) This is what you need. - user208795