angularjs nested routing doesn't load layout

Question

.state('home', {
      url: '/',
      templateUrl: 'index.html',
      abstract:true
 })
.state('home.dashboard', {
      url: '/dashboard',
      templateUrl: 'dashboard/index.html',
      controller: 'dashboardCtrl'
 })

I failed to load index.html when I visit example.com/dashboard, I was only able to get the raw html of what is inside dashboard/index.html. That's strange, because in index.html I've declared <ui-view></ui-view> within the body so I expect dashboard/index.html to be a child of index.html.

Pushed a repo of my code.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You don't actually have nested states; you simply have a primary index.html file that serves as the container for your application, its dependencies, and your views. Angular won't load your primary index.html page, the index.html page loads Angular.

So there is no need for your 'home' state to have a templateUrl. You will use nested states if, for example, your dashboard view has an inner view that can load different templates depending on a user action. See Angular UI Router's documentation for some example use cases for nested views.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 3, 2016 at 3:15

Nate Vaughan

3,8696 gold badges34 silver badges51 bronze badges

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

1 Comment

Maria Jane Over a year ago

I tried this

$stateHelperProvider.setNestedState({       name: 'app',       templateUrl: 'index.html',       children: [         {           name: 'dashboard',           templateUrl: 'dashboard/index.html',         }       ]     });

it doesn't work too

Dan M. CISSOKHO · Accepted Answer · 2016-09-03 05:09:39Z

0

You can't declare index.html as your firststate like @jakeblues said.

Try to put all the specific content from index.html in a new template :

.state('home', {
      url: '/',
      templateUrl: 'home.html',
      controller: 'homeCtrl'
 })
.state('dashboard', {
      url: '/dashboard',
      templateUrl: 'dashboard/index.html',
      controller: 'dashboardCtrl'
 })

answered Sep 3, 2016 at 5:09

Dan M. CISSOKHO

1,0851 gold badge14 silver badges28 bronze badges

3 Comments

Maria Jane Over a year ago

I want to put my style in home.html

Dan M. CISSOKHO Over a year ago

could you explain what you mean ?

Maria Jane Over a year ago

I want to load dashboard/index.html within layout.html, and dashboard/index.html should not contain any css or js, those should be in layout.html

Angel Maharjan · Accepted Answer · 2016-09-03 08:23:57Z

I downloaded your code from the repo.

The main problem I am seeing is that your angular code is not being loaded when you do example.com/dashboard

app.use(express.static(path.join(__dirname, 'public')));

This makes your public folder as the folder from which the project is being loaded.

When you do example.com, Your angular code is loaded because you are responded with public/index.html file which contains angular code and it is correct.

But when you do example.com/dashboard, it is actually loading html file /public/dashboard/index.html where there is no any angular code.

Try doing alert on dashboardCtrl.js. You will get nothing because it is not being loaded. It is only included in index.html file which is not loaded at all.

Try changeing url to dashboards and remove 'home.dashboard'

.state('dashboard', {
  url: '/dashboards',
  templateUrl: 'dashboard/index.html',
  controller: 'dashboardCtrl'
 })

No you don't have to put style in dashboard/index.html. Your styles can be in index.html. It is fine. Please check my response in stackoverflow.com/questions/39305398/… to deal with styles.

Collectives™ on Stack Overflow

angularjs nested routing doesn't load layout

3 Answers 3

1 Comment

3 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

2 Comments

Linked

Related