CODEWITHSUNDEEP
javascriptangularjs
aniforprez
aniforprez

Reputation: 172

Angular routing config function not called

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.

Upvotes: 1

Views: 4279

Answers (3)

Gabba
Gabba

Reputation: 1

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.

Upvotes: 0

aniforprez
aniforprez

Reputation: 172

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.

Upvotes: 12

gkalpak
gkalpak

Reputation: 48212

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 !

Upvotes: 0

Related Questions