CODEWITHSUNDEEP
angularjsangular-ui-router
Mindsect Team
Mindsect Team

Reputation: 2571

angular-ui-router Gone Wrong

I have tried this multiple times to no avail. Here is my set-up:

Angular: 1.5.7

angular-ui-router: 0.3.1

Here are my files:

/demo
  /node_modules
    (module files)
  -index.html
  -route1.html
  -route1.list.html
  -route2.html
  -route2.list.html

Here are the file contents:

index.html

<!doctype html>
<html data-ng-app="myapp">
  <head>
    <title>AngularJS ui-router Demo</title>
    <link href="<path to bootstrap css file>" rel="stylesheet" />
    <script src="<path to angular.min.js>"></script>
    <script src="<path to angular-ui-router.min.js>"></script>
    <script src="app.js"></script>
  </head>

  <body class="container">

    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Quick Start</a>
        <ul class="nav">
          <li><a ui-sref="route1">Route 1</a></li>
          <li><a ui-sref="route2">Route 2</a></li>
        </ul>
      </div>
    </div>

    <div class="row">
      <div class="span12">
        <div class="well" ui-view></div>
      </div>
    </div>

    <!-- angular script -->
    <script>
      var myapp = angular.module('myapp', ['ui-router']);
      myapp.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
          .state('route1', {
            url: '/route',
            templateUrl: 'route1.html'
          })
          .state('route1.list', {
            url: '/list',
            templateUrl: 'route1.list.html',
            controller: function($scope) {
              $scope.items = ['A', 'List', 'of', 'Items'];
            }
          })

          .state('route2', {
            url: '/route2',
            templateUrl: 'route2.html'
          })
          .state('route2.list', {
            url: '/list',
            templateUrl: 'route2.list.html',
            controller: function($scope) {
              $scope.things = ['A', 'Set', 'of', 'Things'];
            }
          })
      })
    </script>

  </body>
</html>

The route1.html, route1.list.html, route2.html and route2.list.html are all simple H1 tag titles with a P tag of dummy text, nothing special.

This code structure was modified from the original AngularJS ui-router examples.

There doesn't seem to be anything wrong with the code. If anyone notices any bug or gremlin, please advise.

Thanks!

Upvotes: 1

Views: 34

Answers (1)

Alon Eitan
Alon Eitan

Reputation: 12025

The problem is here:

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

The module name is ui.router, so change it to:

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

Upvotes: 2

Related Questions