AngularJS - Using ui.router

Question

I am trying to use ui.router to wire up the routing of my app but I struggle with some problem. I just to load the content of a div given a certain route but nothing appears.

Here is the HTML:

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="stylesheets/style.css" rel="stylesheet">

  </head>

  <body ng-app="twtApp">

    <div ui-view></div>


</body>


    <!-- bower:js -->    
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>

    <script src="javascripts/app.js"></script>
</html>

and here is where I define my module:

'use strict';

var app = angular.module('twtApp', [
  'ui.router'
])
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      // contributor
      .state('main', {
        url: '/',
        template: '<div><h1>Hello World!</h1></div>'
      });

  });

What am I doing wrong?

Many thanks

Ben Jacobs · Accepted Answer · 2014-06-25 19:31:09Z

1

I believe you need to configure the $urlRouteProvider (which you've already injected) to include a default parameter:

$urlRouterProvider.when('', '/');

I believe your code would work if you put in the a URL like this:

http://localhost/#/

In that way, it would be explicitly hitting the '/' route that you've defined.

More information on $urlRouteProvider

answered Jun 25, 2014 at 19:31

Ben Jacobs

2,5264 gold badges25 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - Using ui.router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related