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

advertisements

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.

src
|--app
|   |--home
|   |  |--home.js
|   |  |--home.html
|   |--about
|   |  |--about.js
|   |  |--about.html
|   |--app.js
|--assets
|--common
|  |--ui-router.js
|  |--ui-bootstrap.js
|--styles
|  |--stylesheet.css
|  |--bootstrap.css
|--index.html

I set up index.html

<html ng-app="app" ng-controller="appCtrl">
<head>
<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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="common/ui-router-0.2.10.min.js"></script>
<!--Bootstrap-UI-->
<script src="common/ui-bootstrap-0.10.0.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/1.0.11/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<!-- The App -->
<script src="app/app.js"></script>
<script src="app/home/home.js"></script>
</head>
<body>
<!-- The view -->
<div class="container" ui-view="main"></div>
</body>
</html>

Then, I set up the first view...

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

..with its own module.

angular.module('app.home', [
'ui.router',
'firebase'
])
.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', [
'ui.router',
'ui.bootstrap',
'app.home'
])
.config('config', ['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) { // If you want "delay until everything is ready" use 'resolve' on states.
    $urlRouterProvider.otherwise('home');
}])
.run( function run () {
})
.controller( 'appCtrl', function AppCtrl ( $scope, $location ) {
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
if ( angular.isDefined( toState.data.pageTitle ) ) {
  $scope.pageTitle = toState.data.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!

EDIT

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.