2

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?!

Improve this question
2
  • 2
    what is your question? Commented May 4, 2015 at 8:24
  • please see detail: I want use Single View for All pages, with Logical structure Angular, In addition Breadcrumbs for navigation, in head of Home page Commented May 4, 2015 at 9:42

1 Answer 1

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.