Question

我刚刚开始学习angularjs，我正在关注this链接以学习路由，我遇到了麻烦。

在定义路由和控制器的代码中，模块的配置功能根本就没有被调用。未达到控制台日志语句，并且未在函数内设置断点。

我的app.js配置函数未被调用：

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: '/'
        });
}]);

我的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具有MainCtrl代码（没有定义其他控制器）：

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;
    };
}]);

尽管有各种在线搜索，但我无法弄清楚我做错了什么。

Answer 1

显然，一旦在main.js中定义了'MyApp'模块，其他模块就不应该以这种方式使用该模块

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

添加'[]'来定义空依赖关系意味着该应用程序被新的定义覆盖。

就我而言，这是一段令人讨厌的代码。

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

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

这一行

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

应该是

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

第一次定义时，

在所有其他文件 EXCEPT 中。

在我的情况下，在main.js中定义它之后，每个其他文件应该只获取模块而不添加'[]'

很抱歉描述我的错误和解决方案的工作非常糟糕。

Answer 2

这可能是由于尝试调用不存在的方法而引发的错误第一行应该是：

$locationProvider.html5Mode(true);

_{请注意M中的Mode为大写！}

Answer 3

我想说的是，由于最琐碎的原因，我面临着同样的问题。我的ng-app名称与angular.module函数中提到的名称不匹配。

角度路由配置功能未调用

3 个答案: