Question

看起来我无法实例化我的模块。这是我的文件：

--tv
   -- contents (folder)
       -- contents.template.html
       -- contents.component.js
   -- index.html
   -- bootstrap.js

现在，这里是代码：

Contents.component.js：

angular
.module('contents', [])
.component('myContents', {
    controller: contentController,
    templateUrl: 'contents/content.template.html',


});
function contentController() {
console.log('Le content est appelée !');
}

index.html：

    <!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY"             crossorigin="anonymous">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>TV</title>
    <!-- SCRIPT DE CONNEXION -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bootstrap.js"></script>
    <script src="/bower_components/angular-component-router/angular_1_router.js"></script>
    <script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
    <script src"/contents/contents.component.js"></script>


</head>
<body ng-app="app">
    <my-contents></my-contents>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <!-- Tether -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
</body>
</html>

最后是bootstrap.js：

angular
.module('app', ['ngComponentRouter', 'contents'])
.config(function ($locationProvider) {
    $locationProvider.html5Mode(true);
})
.value('$routerRootComponent', 'myApp')
.component('app', {

});

错误在浏览器控制台中捕获：

    Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module contents due to:
[$injector:nomod] Module 'contents' 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.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=contents
minErr/<@http://127.0.0.1:8080/bower_components/angular/angular.js:68:12
module/<@http://127.0.0.1:8080/bower_components/angular/angular.js:2082:17
ensure@http://127.0.0.1:8080/bower_components/angular/angular.js:2006:38
module@http://127.0.0.1:8080/bower_components/angular/angular.js:2080:14
loadModules/<@http://127.0.0.1:8080/bower_components/angular/angular.js:4617:22
forEach@http://127.0.0.1:8080/bower_components/angular/angular.js:321:11
loadModules@http://127.0.0.1:8080/bower_components/angular/angular.js:4601:5
loadModules/<@http://127.0.0.1:8080/bower_components/angular/angular.js:461

我复制/粘贴了我昨天建立的另一个项目。我不知道它为什么不起作用。

Answer 1

您正在引导您的应用，然后加载contents脚本。改变他们的顺序，如下：

<script src="bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-component-router/angular_1_router.js"></script>
<script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
<script src"/contents/contents.component.js"></script>
<script src="bootstrap.js"></script>

模块错误Angular 1.5

1 个答案: