Angular ui-router nested views separated templates and controllers

Question

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

Honestly, this question, I would not expect from someone experienced as you, Irakli. Please, try to create some plunker, show us where you are lost... you will get help. But this is like: Do that all instead of me.... — Radim Köhler
– Radim Köhler, Commented Oct 20, 2014 at 12:16
Please provide a Plunker or JSFiddle of what you have tried. — Tome Pejoski
– Tome Pejoski, Commented Oct 20, 2014 at 12:16
@Radim My bad please give me a minute I will update question — Irakli Lekishvili
– Irakli Lekishvili, Commented Oct 20, 2014 at 12:27

cbass · Accepted Answer · 2014-10-20 12:21:22Z

4

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.

answered Oct 20, 2014 at 12:21

cbass

2,5583 gold badges29 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

Angular ui-router nested views separated templates and controllers

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related