$stateProvider не загружает страницы должным образом

Я пытаюсь использовать $stateProvider для маршрутизации URL-адресов. Я подумал, что если я использую $stateProvider, то мне не нужно использовать $routeProvider. Это правильно? Мне удалось настроить маршрутизацию URL-адресов для работы с $routeProvider, но я не могу настроить маршрутизацию URL-адресов для работы с $stateProvider. Вот код, который у меня есть до сих пор:

var app = angular.module("app",['ui.state']);
app.config(function($urlRouterProvider, $stateProvider, $locationProvider) {

$urlRouterProvider.otherwise("/home") 

$stateProvider
    .state('home', {
        url: "/home",
        controller: 'HomeCtrl',
        views: {
            main: { templateUrl: "views/home/main.html" }
            sub: { templateUrl: "views/home/sub.html" }
        }
    })
    .state('products/info', {
        url: "/products/info",
        controller: 'ProductsCtrl',
        views: {
            main: { templateUrl: "views/products/main.html" },
            sub: { templateUrl: "views/products/info/sub.html" } 
        }
    })
    .state('products/reviews', {
        url: "/products/reviews",
        controller: 'ProductsCtrl',
        views: {
            sub: { templateUrl: "views/products/reviews/sub.html" } 
        }
    })

На моей html-странице "оболочки" у меня есть следующее:

<div class="main">
    <div ui-view="main"></div>
    <div ui-view="sub"></div>
</div>

Когда я посещаю любой из своих URL-адресов, я вижу только html-страницу оболочки. В мои ui-view ничего не загружается. Что мне не хватает?