Why Angular UI Router does not load my template?

Question

I am really struggling with Angular since it is very fragile i think and I have a very simple case (probably the simplest case ever) which does not work yet.

Here is my module (so i do inject the library):

  angular.module(
          'module', ['ui.router']

My index.html:

<html data-ng-app="module">

<head>
    ... several libraries and my js files including ui-router library js + my app.js where the state definitions are located.
</head>

<body>
    <div ui-view></div>
</body>

And why is not my template injected in ui-view?

EDIT: Sorry, i was in a hurry, forgot to add some details.. I have updated the app.js section like this:

    .state('default',
      {
        url: '/',
        template: '<h1>default</h1>'
      })
    .state('x',
      {
        url: '/x',
        template: '<h1>X</h1>'
      });

Now default state works as expected. But i call the url "host/x" i get a "Cannot GET /x".. when i call the url like "host/#x", it works.

But i have also this section for html5 mode in my app.js:

  $locationProvider.html5Mode({
    enabled: true,
    requireBase: true
  });

I have also this in the head section of my index.html:

<base href="/">

I thought, html5 should already handle the hash(#) part of the url? How can i get rid of that # in URL, so i can call directly "host/x"?

Can you share your complete app.js? Slightly difficult to get complete picture without the app.js. Also, a heads up. In your URL you need to specify index.html/#/x in order to use x state. Otherwise, you can set that state as default. — user1741851
– user1741851, Commented Jul 4, 2017 at 7:29

John Doe · Accepted Answer · 2017-07-04 10:59:05Z

1

You need to specify the url property and go to this url to see this page. State should be something like:

.state("yourStateName", {
    template: "<h1>My Contacts</h1>",
    url: "/stateURL"
})

This is working example of url provider form my project:

 angular.module("app")

  .config(function ($urlRouterProvider, $locationProvider, $stateProvider) {

  $locationProvider
    .html5Mode(true);
  $urlRouterProvider.when('/', '/url1');
  $urlRouterProvider.when('', '/url2');
  $urlRouterProvider.when('/url3', 'url4');
  $urlRouterProvider.otherwise('/url5');
});

edited Jul 4, 2017 at 10:59

answered Jul 4, 2017 at 7:34

John Doe

5063 silver badges11 bronze badges

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

5 Comments

akcasoy Over a year ago

Sorry.. i was in a hurry and forgot to add the url in my question.. but i have actually a url part, which i then call.

John Doe Over a year ago

Have you injected your component into module?

John Doe Over a year ago

I'll update the answer with working example of url provider

akcasoy Over a year ago

Sorry i dont understand your answer.. if it has sth. to do with the hash problem? But i have found a stackoverflow question which demonstrates that the problem is not a quick win.. stackoverflow.com/questions/16569841/…

John Doe Over a year ago

Sorry for confusing you.That was an example of working config. But this related only to angularjs, not the server side configs. I guess, you'll going to have investigate it more.

Collectives™ on Stack Overflow

Why Angular UI Router does not load my template?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related