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