admin管理员组

文章数量:1349690

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.

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.

  • javascript
  • angularjs
Share Improve this question asked Jul 27, 2014 at 19:16 aniforprezaniforprez 1721 silver badge10 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 12

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.

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 !

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.

本文标签： javascriptAngular routing config function not calledStack Overflow

版权声明：本文标题：javascript - Angular routing config function not called - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743867041a2552769.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。