Question

我是Angular的新手，我试图将routeProvider添加到我的应用程序中，但它一直给我这个错误：

未捕获错误：[$ injector：modulerr]无法实例化模块应用由于：错误：[$ injector：nomod]模块'app'不可用！您要么错误拼写模块名称，要么忘记加载它。如果注册模块确保您将依赖项指定为第二个参数。

这是我的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之前，一切正常。但是因为我试图将其拆分，所以我不断收到错误而且我不知道如何解决它。谢谢你的帮助！

Answer 1

在你的myApp.config中，你最后忘记了右括号]。

此外，由于您在指定控制器时在.when('/' ....)中更新了棱角分明，因此它等同于将ng-controller放在模板的顶部，以便＆＃39;不需要在模板本身再做一次。

所以这个：

<div id="splash" class="row" ng-controller="segmentListCtrl">

会好起来的

<div id="splash" class="row">

Answer 2

我认为您的app config声明中存在语法错误：

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'components/splash.html',
        controller: 'segmentListCtrl'
    })
    .otherwise({
        redirectTo: '/'
    });
});

应该是：

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'components/splash.html',
        controller: 'segmentListCtrl'
    })
    .otherwise({
        redirectTo: '/'
    });
}]);

你可以看到，最后的＆＃39;]＆＃39;不见了。告诉我这是否为你解决了。感谢

Angular中的Routeprovider

2 个答案: