我对 Angular 很陌生，我试图向我的应用程序添加一个routeProvider，但它一直给我这个错误:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
这就是我的 index.html 的样子:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
我的 app.js 看起来像这样:
var myApp = angular.module('app', ['ngRoute']);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('segmentListCtrl', ['$scope', '$http', function ($scope, $http){
$http.get('data/segments.json').success(function (data){
$scope.segmentList = data;
});
}]);
这是我用作路由模板的splash.html 的内容:
<div id="splash" class="row" ng-controller="segmentListCtrl">
<div class="columns segment" ng-repeat="segment in segmentList">
<a href="#">
<h2>{{segment.title}}</h2>
<h5>{{segment.sub}}</h5>
</a>
</div>
</div>
在我尝试添加 ng-route 之前，一切都工作正常。但自从我尝试将其拆分以来，我不断收到错误，而且我不知道如何修复它。 谢谢大家的帮助!
最佳答案
在您的 myApp.config 中，您忘记了末尾的右大括号 ]。
此外，由于您对 .when('/' ....) 中的 Angular 不熟悉，当您指定 Controller 时，它相当于放置一个 ng-controller 在模板顶部，因此无需在模板本身中再次执行此操作。
所以这个:
<div id="splash" class="row" ng-controller="segmentListCtrl">
就好了
<div id="splash" class="row">
关于javascript - Angular 中的路由提供者，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29539264/