CODEWITHSUNDEEP
angularjsbreadcrumbsangular-ui-router
user4836633
user4836633

Reputation:

Angular Js - ui-router with Breadcrumbs

I have multi pages with One View .I want use Single View for All pages, with Logical structure Angular, In addition Breadcrumbs for navigation, in head of Home page. config code:

$stateProvider
    .state('otherwise', {
        url: '*path',
        controller: function ($state) {
            var lastUrl = sessionStorage.lastUrl

            if (lastUrl && lastUrl != 'otherwise')
                $state.go(lastUrl);
            else if (!lastUrl)
                $state.go('Companies');
        },
        data: {
            requireLogin: false
        }
    })
  .state('Create', {
      controller: 'myControl',
      url: '/',
      templateUrl: 'Create.html',
      data: {
          requireLogin: true
      }
  })

    .state('Jobs', {
        controller: 'myControl',
        url: '/',
        templateUrl: 'JobsList.html',
        data: {
            requireLogin: true
        }
    })

    .state('Companies', {
        controller: 'myControl',
        url: '',
        templateUrl: 'CompaniesList.html',
        data: {
            requireLogin: false,
            breadcrumbProxy: 'Companies.CarsList'
        }
    })

    .state('Companies.CarsList', {
        controller: 'myControl',
        params: { id: ':id', companyName: ':companyName' },
        url: '',
        templateUrl: 'CarsList.html',
        data: {
            requireLogin: false,
            displayName: 'List'
        }
    })

    .state('Companies.CarsInfo', {
        controller: 'myControl',
        templateUrl: "CarInfo.html",
        data: {
            requireLogin: false,
            displayName: 'Info'
        }
    })

html:using single VIEW in home page

 <div ui-view></div>

You have a Solution for my Config?!

Upvotes: 2

Views: 6020

Answers (1)

ncuillery
ncuillery

Reputation: 15729

Single view

To handle multiple views, the ui-router provides rules to target views when you have multiple <div ui-view></div> in your templates.

By default, a state takes place in the unique <div ui-view></div> in parent state. So, given your configuration, the Companies.CarsList template will be inserted in the <div ui-view></div> of the Companies state (in CompaniesList.html).

To override that, just wrap templateUrl and controller of your second-level states (Companies.CarsList and Companies.CarsInfo) in a views object the ui-router to place the view in the unique <div ui-view></div> of the root state (in index.html), like this: 

.state('Companies.CarsList', {
    params: { id: ':id', companyName: ':companyName' },
    url: '',
    views: {
        "@": { // rule for absolutely targetting the unnamed view in root unnamed state.
            controller: 'myControl',
            templateUrl: 'CarsList.html',
        }
    },
    data: {
        requireLogin: false,
        displayName: 'List'
    }
})

Breadcrumb

Have a look on angular-breadcrumb, it generates a breadcrumb based on the ui-router configuration. All you have to do is to give a name to the states (like you seems to do already with data > displayName).

The module can handle the absolute view targeting I described above. See the docs for details

Upvotes: 2

Related Questions