Multiple named views with dynamic routing in angularjs

Question

Edit: Here is the complete code at Plunker. Though I can not c anything in execution but same code working at local. However gives a console error though

It all works perfect. But due to :id in /news/:id/, i am getting jquery/angular errors in console which can not be tracked anywhere in my code

I can not c What i am doing wrong.

Edit: Solved plunker https://plnkr.co/edit/FWcuBgGpVdMj3CroFrYJ

Answer 1

First of all you are trying to use ui-router but you're including ngRoute script in your plunker. Change it to

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>

Then everything should work fine!

I suggest you a few changes...

1. Use ui-sref instead of href because it's much easier to define

ui-sref="post({id:1})" which turns into href="#/news/1"

If you would like to change url some day, then you will have to just change your route file, not each href.

$stateProvider .state('post', { url: "news/:id"

or

$stateProvider .state('post', { url: "archive/:id"

or

$stateProvider .state('post', { url: "whatever/:id"

2. Use abstract state

In your example it's a way better to define abstract state which holds header, content and footer - it's a typical use case.

ui-router Abstract States

An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.

Some examples of how you might use an abstract state are:

To prepend a url to all child state urls. To insert a template with its own ui-view(s) that its child states will populate. Optionally assign a controller to the template. The controller must pair to a template. Additionally, inherit $scope objects down to children, just understand that this happens via the view hierarchy, not the state hierarchy. To provide resolved dependencies via resolve for use by child states. To provide inherited custom data via data for use by child states or an event listener. To run an onEnter or onExit function that may modify the application in someway. Any combination of the above. Remember: Abstract states still need their own for their children to plug into. So if you are using an abstract state just to prepend a url, set resolves/data, or run an onEnter/Exit function, then you'll additionally need to set template: "".

Here's a plunker which shows how I would do it.

https://plnkr.co/edit/5FvJaelyxdl5MuALt5VY?p=preview

Hope it helps.

Answer 2

Look at the documentation for ui router named views,

You can use following syntax for using multiple views

$stateProvider
  .state('state',{
    url: '',
    views: {
      'header': {
        templateUrl: 'views/header.html',
        controller: 'headerCtrl'
      },
      'content': {
        template: '<div ui-view=" "></div>',  //<-- child templates loaded to here
      },
      'footer': {
        templateUrl: 'views/footer.html',
        controller: 'footerCtrl'
      }
    }
  })
  .state('state.post', {
    url: 'news/:id/:KeyWords'
    templateUrl: 'views/post.html'   //<-- This goes into content's ui-view
  });

I'm guessing you want to keep the header and footer and change content views.

You can achieve this by making this state as parent to all other states

suppose

.state('main',{
  abstract: true,
  views: {
    'header': ... ,
    'content': {
       template: '<ui-view></ui-view>',
    }
    'footer': ...
  }
})

then all the child views will load their views in the , ex: in main.child etc, your template will load in the content's <ui-view></ui-view> tag

Answer 3

If you need to use a custom template depending on keywords you can do the following:

.config(['$routeProvider', function($routeProvider, $routeParams) { $routeProvider .when('/news/:id/:keyWords', { template: '<div ng-include="url"></div>', controller: "exampleController" })

then in the exampleController

function($routeParams, $scope) { $scope.url = $routeParams.keyWords; }