The AngularJS application does not show any view when I am the module template structure (without ngBoilerplate)


Trying to improve the structure of my app directory, I installed ngBoilerplate just to realize that I don't understand how to create an app from scratch using that framework, so I decided just to follow the module pattern manually (without ngBoilerplate).

Before migrate my app to the modular structure, I took these steps:

I created this directory.

|   |--home
|   |  |--home.js
|   |  |--home.html
|   |--about
|   |  |--about.js
|   |  |--about.html
|   |--app.js
|  |--ui-router.js
|  |--ui-bootstrap.js
|  |--stylesheet.css
|  |--bootstrap.css

I set up index.html

<html ng-app="app" ng-controller="appCtrl">
<title ng-bind="pageTitle"></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/stylesheet.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css">
<!-- AngularJS -->
<script src=""></script>
<script src="common/ui-router-0.2.10.min.js"></script>
<script src="common/ui-bootstrap-0.10.0.min.js"></script>
<!-- Firebase -->
<script src=""></script>
<script src=""></script>
<!-- The App -->
<script src="app/app.js"></script>
<script src="app/home/home.js"></script>
<!-- The view -->
<div class="container" ui-view="main"></div>

Then, I set up the first view...

<div class="thumbnail">
<div class="caption">
    Just setting up...
<buttom class="btn btn-info btn-sm">Hello</buttom>

..with its own module.

angular.module('app.home', [
.config('config', ['$stateProvider', function($stateProvider) {
    $stateProvider // States configuration.
        .state('home', {
            url: '/home',
            views: {
                'main': {
                    controller: "homeController",
                    templateUrl: "app/home/home.html"
            data: {
                pageTitle: 'Home'
.controller('homeController', ['$scope', '$firebase', function($scope, $firebase) {}]);

And finally the app (basically a copy of the ngBoilerplate sample app).

angular.module('app', [
.config('config', ['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) { // If you want "delay until everything is ready" use 'resolve' on states.
.run( function run () {
.controller( 'appCtrl', function AppCtrl ( $scope, $location ) {
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
if ( angular.isDefined( ) ) {
  $scope.pageTitle =;

When I open index.html in the browser, the page doesn't display the view home (the only view that I'm testing). And the console just says this:

I've been stuck at this for awhile. What could be wrong?

Thanks in advanced!


Here is a plunker

Seems like you've been overthinking this one.

It is a simple error:
You have been passing the wrong arguments to .config.

// This is WRONG
.config('config', ['$stateProvider', function($stateProvider) {

// This is RIGHT (no String as 1st argument)
.config(['$stateProvider', function($stateProvider) {

See, also, this working demo.