CODEWITHSUNDEEP
angularjs
Pascal
Pascal

Reputation: 181

"Failed to instantiate module ui.router"

The problem is simple and the answer is probably pretty obvious but I really can't find out what's going wrong here.

JSFIDDLE

As you can see, no links are generated and no views are loaded.

I have looked into related problems aswell (e.g this one) but it wasn't much of a use.

index.html

<nav class="navbar navbar-inverse" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
  </div>
  <ul class="nav navbar-nav">
    <li><a ui-sref="home">Home</a></li>
    <li><a ui-sref="about">About</a></li>
  </ul>
</nav>

<div class="container">
  <div ui-view></div>
</div>

<script type="text/ng-template" id="home.html">
  <div class="jumbotron text-center">
      <h1>Welcome</h1>
      <p>This is the Home Page</p>    
  </div>
</script>

app.js

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        });

}]);

EDIT

I should have mentioned that I included ui-router in the External Resources tab in my fiddle.

This is what gets generated by JSFiddle:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  </head>
  <body ng-app="routerApp">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
      </ul>
    </nav>

    <div class="container">
      <div ui-view=""></div>
    </div>

    <script type="text/ng-template" id="home.html">
      <div class="jumbotron text-center">
        <h1>Welcome</h1>
        <p>This is the Home Page</p>
      </div>
    </script>

    <script type="text/javascript">
      //<![CDATA[

      var routerApp = angular.module('routerApp', ['ui.router']);

      routerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/home');

        $stateProvider
          .state('home', {
            url: '/home',
            templateUrl: 'home.html'
          });

      }]);
      //]]>

    </script>

  </body>
</html>

EDIT #2

It seems like this was a problem with JSFiddle's External Resources rather than ui-router.

Working example

Upvotes: 4

Views: 2594

Answers (3)

byteC0de
byteC0de

Reputation: 5273

Angular UI-Router is a client-side Single Page Application routing framework for AngularJS.Routing frameworks for SPAs(Single Page Applications) update the browser's URL as the user navigates through the app.

Check this fiddle

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'home.html'
    }).state('about', {
        url: '/about',
        templateUrl: 'about.html'
    });

Upvotes: 1

Ilya Chernomordik
Ilya Chernomordik

Reputation: 30175

ui.router is a separate module. You need to download it and include a script, e.g. download from here

There is a default angular router, but that one probably should be added as a separate script as well.

Upvotes: 2

fbid
fbid

Reputation: 1570

You have to include angular-ui-router in your index.html

You can for example add:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>

Here is the working JSFIDDLE

Upvotes: 2

Related Questions