CODEWITHSUNDEEP
angularjsangular-ui-router
akcasoy
akcasoy

Reputation: 7225

Why Angular UI Router does not load my template?

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

Upvotes: 0

Views: 152

Answers (1)

John Doe
John Doe

Reputation: 506

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');
});

Upvotes: 1

Related Questions