角度路由配置功能未调用 [英] Angular routing config function not called
问题描述
我刚刚开始学习angularjs，我正在关注这个链接来学习路由，我遇到了麻烦。
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.
我的app.js具有未被调用的配置函数：
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: '/'
});
}]);
我的index.html：
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有MainCtrl代码（没有定义其他控制器）：
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.
推荐答案
显然，一旦在main.js中定义了'MyApp'模块，其他模块就不应该以这种方式使用该模块了
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');
}]);
此行
var MyApp = angular.module('MyApp', []);
应该是
var MyApp = angular.module('MyApp');
在第一次定义的所有其他文件 EXCEPT 中。
in every other file EXCEPT for the first time it is defined.
在我的情况下，在main.js中定义它之后，每个其他文件应该只获取模块而不添加'[]'
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.
这篇关于角度路由配置功能未调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
