未捕获的错误:角度js中的[$ injector:modulerr] ngRoute

时间:2018-06-15 15:31:24

标签: javascript html angularjs angularjs-routing

enter image description here 这是My Angular Code,它显示 angular未定义 。我已经编写了这段代码来测试角度js

中的路由概念
var app=angular.module('myApp',['ngRoute'])
.config(function ($routeProvider) {
    $routeProvider
        .when('/main', {
            templateUrl: '/Directive/pages/main.html',
            controller: 'mainController'
        })
        .when('/second', {
            templateUrl: 'Directive/pages/second.html',
            controller: 'secondController'
        })
        .when('/second:num', {
            templateUrl: 'pages/second.html',
            controller: 'secondController'
        })
});
app.controller('mainController', ['$scope', '$log', function($scope, $log) {
    $log.info='mainController';
    $scope.name = 'Main';

}]);

app.controller('secondController', ['$scope', '$log', function($scope, $log) {
    $log.warn='From Second';  
    $scope.name = 'Second';

}]);
app.directive('searchResult', function () {
    return {
        template: 'ABC',

    }
});

有关更多信息,请查看我的HTML文件,如果我需要做任何更改来代替CDN,请告诉我,因为在浏览器中它显示未捕获的错误:[$ injector:modulerr]

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
    <title>AngularJS</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="UTF-8">
    <!-- load bootstrap and fontawesome via CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
    <style>
        html,
        body,
        input,
        select,
        textarea {
            font-size: 1.05em;
        }
    </style>
    <!-- load angular via CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
   <header>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html">AngularJS</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="pages/main.html"><i class="fa fa-home"></i>Main</a></li>
                    <li><a href="pages/second.html"><i></i> Second</a></li>
                </ul>
            </div>
        </nav>
    </header>
    <div ng-view>From ngView</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

来自文档:

  

错误:$ injector:modulerr模块错误

     

当模块由于某些异常而无法加载时会发生此错误。上面的错误消息应该提供额外的上下文。

     

模块无法加载的一个常见原因是您忘记将文件包含在已定义的模块中,或者文件无法加载。

     

使用ngRoute

     

在AngularJS 1.2.0及更高版本中,ngRoute已移至其自己的模块。如果在升级到1.2.x或更高版本后出现此错误,请确保已安装ngRoute。