CODEWITHSUNDEEP
javascriptangularjsangular-uiangular-ui-router
Irakli Lekishvili
Irakli Lekishvili

Reputation: 34158

Angular ui-router nested views separated templates and controllers

I have following files:

index.html
car.html
truck.html

mainCtrl.js
carCtrl.js
truckCtrl.js

and want to make such routes:

#/search (template: index.html, controller: mainCtrl.js)
#/search/car (template: car.html, controller: carCtrl.js)
#/search/truck (template: truck.html, controller: truckCtrl.js)

index.html contains two links one which must redirect to #/search/car and second: #/search/truck

car.html & truck.html must load in nested view

Please someone help me to accomplish this task

Upvotes: 1

Views: 72

Answers (1)

cbass
cbass

Reputation: 2558

I guess something like this would do the trick.

$stateProvider
    .state('search', {
        url: '/search',
        controller: 'mainCtrl',
        templateUrl: '/path/to/index.html',
    })
    .state('search.car', {
        url: '/car'
        controller: 'carCtrl',
        templateUrl: '/path/to/car.html',
    })
    .state('search.truck', {
        url: '/truck'
        controller: 'truckCtrl',
        templateUrl: '/path/to/truck.html',
    })

Place ui-view tag somewhere in your index partial.

Upvotes: 4

Related Questions