angular-ui-router Gone Wrong

Question

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!

So what doesn't work exactly? What errors pops in the console (if any)? — Alon Eitan
– Alon Eitan, Commented Jul 22, 2016 at 18:36
@AlonEitan there was absolutely nothing showing as an error. When I went to inspect elements and view the console, I received no errors either, because I injected "ui-router" instead of "ui.router". (see below answer) — Mindsect Team
– Mindsect Team, Commented Jul 22, 2016 at 18:45
Yes, I know, I wrote that answer after noticed that problem with the module name :) — Alon Eitan
– Alon Eitan, Commented Jul 22, 2016 at 18:46
@AlonEitan oh, that IS you ^_^ You're fast! I thought that was someone else. — Mindsect Team
– Mindsect Team, Commented Jul 22, 2016 at 18:47

Alon Eitan · Accepted Answer · 2016-07-22 18:39:09Z

2

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

answered Jul 22, 2016 at 18:39

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

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

1 Comment

Mindsect Team Over a year ago

That was it. Thanks a million!

Collectives™ on Stack Overflow

angular-ui-router Gone Wrong

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related