For routing used 'native' for angular ngRoute. I didn’t have to display two or more templates in two different places on the same page for a given url. Here is the old code, one template in one place <ng-view>

  .when('/page:page',{ templateUrl:function(params) {return basePath+'index'+params.page+'.html';}, controller: 'lessonPageCtrl' }) .when('/',{ templateUrl:function() {return basePath+'index.html';}, controller: 'lessonPageCtrl' })

Had to be replaced by:

 $stateProvider .state('page', { url: 'page:page', views: { 'leftPage': { templateUrl: function (stateParams){ return basePath+'indexL'+ stateParams.page + '.html'}, controller: 'lessonPageCtrl' }, 'rightPage': { templateUrl: function (stateParams){ return basePath+'indexR'+ stateParams.page + '.html'}, controller: 'lessonPageCtrl' } } })

Displayed in

 <div ui-view="leftPage"></div> <div ui-view="rightPage"></div>

The problem is that with the second option using ui-router <div ui-view=""></div> empty, until you click on the link <div ui-view=""></div> <a ui-sref="page({page: $index})">link</a> . Which is very bad. It is necessary that the view is immediately displayed depending on the url as in the first version using nRout. How to solve the problem that advise?

  • in the first variant, you have two routes configured, in the second - for some reason, one - Grundy
  • And you can working fiddle? - Qwertiy ♦
  • as an option ng-view could just be replaced by ng-include - Grundy
  • plnkr.co/edit/TSZ6R9uposXsk5QckMr7?p=preview I do not know how this will help. You can protest by url in the address bar, and then xs like. When ngRoute, when I inserted an example into the address bar for example # / page3, the URL was intercepted and the content was loaded. And with the ui-router is empty until you click on the link - Igor Baranyuk
  • I'm not sure that ng-include will work in this case, you need routing with all the consequences of this - Igor Baranyuk

2 answers 2

It seems to have solved the problem. In the controller you need to register

 angular .module('lessonApp') .controller('lessonPageCtrl', function($scope, $state, $stateParams) { //.. var page = $stateParams.page; //.. $scope.state = $state.current $scope.params = $stateParams; })

    Interesting, but the problem seems to be in the url for the route

     url: 'page:page',

    if you compare what was before

     .when('/page:page',{

    then you can see leading /

    if you change your URL by adding / to it, you will notice that the plankr, for example, works:

    Plunkr