Angular routing config function not called

Question

I'm only just starting to learn angularjs and I was following this link to learn routing and I came upon a snag.

In the code to define the routes and controllers, the module's config function simply isn't being called. The console log statement isn't being reached and no breakpoints set inside the function are hit.

My app.js with the config function that isn't being called:

var MyApp = angular.module('MyApp', ['ngCookies', 'ngResource', 'ngMessages', 'ngRoute', 'mgcrea.ngStrap', 'showControllers']);

MyApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    // An angular service that enables html5
    $locationProvider.html5mode(true);

    console.log("Stuff and things");

    // Defining all routes and controllers
    $routeProvider
        .when('/', {
            templateUrl: 'views/home.html',
            controller : 'MainCtrl'
        })
        .when('/shows/:id', {
            templateUrl: 'views/detail.html',
            controller : 'DetailCtrl'
        })
        .when('/login', {
            templateUrl: 'views/login.html',
            controller : 'LoginCtrl'
        })
        .when('/signup', {
            templateUrl: 'views/signup.html',
            controller : 'SignupCtrl'
        })
        .when('/add', {
            templateUrl: 'views/add.html',
            controller : 'AddCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

My index.html:

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
    <base href="/">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>Showtracker</title>

    <link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
    <div class="navbar navbar-default navbar-static-top" role="navigation" bs-navbar>
        <div class="navbar-header">
            <a href="/" class="navbar-brand">
                <span class="glyphicon glyphicon-film"></span>
                Show<strong>Tracker</strong>
            </a>
        </div>
        <ul class="nav navbar-nav">
            <li data-match-route="/1"><a href="/">Home</a></li>
            <li data-match-route="/add"><a href="/add">Add</a></li>
        </ul>
        <ul class="nav navbar-nav pull-right" ng-if="!currentUser">
            <li data-match-route="/login">
                <a href="/login">Login</a>
            </li>
            <li data-match-route="/signup">
                <a href="/signup">Sign up!</a>
            </li>
        </ul>
        <ul class="nav navbar-nav pull-right" ng-if="currentUser">
            <li class="navbar-text" ng-bind="currentUser.email"></li>
            <li><a href="javascript:void(0)" ng-click="logout()">Logout</a></li>
        </ul>
    </div>

    <div ng-view></div>

    <!-- Vendor javascripts -->
    <script src="vendor/angular.min.js"></script>
    <script src="vendor/angular-strap.min.js"></script>
    <script src="vendor/angular-strap.tpl.min.js"></script>
    <script src="vendor/angular-cookies.min.js"></script>
    <script src="vendor/angular-messages.min.js"></script>
    <script src="vendor/angular-resource.min.js"></script>
    <script src="vendor/angular-route.min.js"></script>
    <script src="vendor/moment.min.js"></script>

    <!-- Configuration file -->
    <script src="app.js"></script>

    <!-- Controllers -->
    <script src="controllers/main.js"></script>

    <!-- Services -->
    <script src="services/show.js"></script>
</body>
</html>

main.js which has the MainCtrl code (none of the other controllers are defined):

var showControllers = angular.module('showControllers', []);

// The controller for the main page with the search and filter
showControllers.controller('MainCtrl', ['$scope', 'Show', function($scope, Show){
    // The alphabet loaded to scope.alphabet
    $scope.alphabet = ['0-9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J','K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    // All genres loaded to scope.genres
    $scope.genres = ['Action', 'Adventure', 'Animation', 'Children', 'Comedy', 'Crime', 'Documentary', 'Drama', 'Family', 'Fantasy', 'Food', 'Home and Garden', 'Horror', 'Mini-Series', 'Mystery', 'News', 'Reality', 'Romance', 'Sci-Fi', 'Sport', 'Suspense', 'Talk Show', 'Thriller', 'Travel'];

    // Defining the heading
    $scope.headingTitle = "Top 12 Shows";

    // Gets the shows that are returned by the query
    $scope.shows = Show.query();

    $scope.filterByGenre = function(genre) {
        $scope.shows = Show.query({genre: genre});
        $scope.headingTitle = genre;
    };

    $scope.filterByAlphabet = function(char) {
        $scope.shows = Show.query({alphabet: char});
        $scope.headingTitle = "Shows with " + char;
    };
}]);

Despite various online searches, I was unable to figure out what I've done wrong.

score 12 · Accepted Answer · answered Jul 28 '14 at 11:31

Apparently, once the 'MyApp' module has been defined in main.js, no other module should use the module in this manner

var MyApp = angular.module('MyApp', []);

Adding the '[]' to define empty dependencies means the app is being overridden by a new definion.

In my case, this was the offending piece of code.

var MyApp = angular.module('MyApp', []);

MyApp.factory('Show', ['$resource', function($resource){
    return $resource('/api/shows/:_id');
}]);

This line

var MyApp = angular.module('MyApp', []);

should be

var MyApp = angular.module('MyApp');

in every other file EXCEPT for the first time it is defined.

In my case, after defining it as such in main.js, every other file should only get the module and not add the '[]'

Sorry for the extremely poor job of describing my error and the solution.

@xyz ummm thanks?? If I solved your problem I'm glad I could help. — aniforprez, Oct 09 '15 at 09:24

score 0 · Answer 2 · answered Jul 27 '14 at 19:59

0

This is probably due to an error being raised for trying to call a non-existent method.
The first line should be:

$locationProvider.html5Mode(true);

_{Note the M in Mode is uppercase !}

answered Jul 27 '14 at 19:59

gkalpak

47,844
8
105
118

Thanks for pointing out this error but unfortunately, that too doesn't solve the issue :( – aniforprez Jul 28 '14 at 04:30
@aniforprez: Nothing else seems to be wrong. Besides the `config` block, do the other parts execute as expected ? Do you get any errors in the console log ? Try putting some `console.log`s or break-points at vsrious places to see what happens. – gkalpak Jul 28 '14 at 07:50
There is literally nothing in the console log. Any log messages inside the config block aren't displayed. No breakpoints inside the function are hit. This is why I'm having so much trouble. – aniforprez Jul 28 '14 at 09:32
@aniforprez: Try putting some breakpoints before the config block. Does the `angular.module()` part get executed ? Does the script get executed at all ? – gkalpak Jul 28 '14 at 10:26
Yes, in fact the angular module is being executed. The script is loaded yet the config function is not called. – aniforprez Jul 28 '14 at 10:46
On further investigation, the showControllers.controller(...) function isn't being called either yet the script is loaded. Have I screwed up completely? – aniforprez Jul 28 '14 at 11:04
YES! I fixed it! Apparently, I had defined a service that was overriding the created 'MyApp' module and creating a new app which didn't allow the execution of the config file. Thanks so much for your help and apologies for wasting your time! – aniforprez Jul 28 '14 at 11:26

score 0 · Answer 3 · answered Jul 13 '18 at 13:05

0

Will like to just mention that I was facing the same issue for the most trivial of reasons possible. My ng-app name didn't match the one mentioned in the angular.module function.

answered Jul 13 '18 at 13:05

Gabba

1
3

Angular routing config function not called

3 Answers3

Linked