無法在AngularJS的$ routeProvider中加載控制器

這是我第一次使用AngularJs應用程序，並通過網上的許多示例創建它，但我在這裏做了一些錯誤。這很可能是因爲文件存儲在專用文件夾中。 HomeView.html模板可以正常加載，但控制器不會。我的意思是我不能在模板中打印greetingMessage。我看到的只是{{ greetingMessage }}而不是「歡迎！」。我錯過了什麼？

錯誤

Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.4/$controller/ctrlreg?p0=HomeController

應用結構

app 
    conponents 
     home 
     HomeView.html 
     HomeController.js 
     ... 
    ... 
index.js 
index.html

的index.html

<body ng-app="myApp"> 

    <h3>AngularJS</h3> 
    <hr /> 
    <p><a href="#!">Home</a></p> 

    <div ng-view></div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.min.js"></script> 
    <script src="index.js"></script> 

</body>

個index.js

var module = angular.module('myApp', ['ngRoute']); 

module.config(function($routeProvider) { 
    $routeProvider 
     .when('/', { 
      templateUrl : 'components/home/HomeView.html', 
      controller: 'HomeController' 
      // I tried -> controller: 'components/home/HomeController' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
});

HomeView.html

<div ng-controller="HomeController"> 
    <h4>Home</h4> 
    <p>{{ greetingMessage }}</p> 
</div>

HomeController.js

var module = angular.module('myApp', []); 
module.controller('HomeController', [ 
    '$scope', 
    function(
     $scope 
    ) { 
     $scope.greetingMessage = 'Welcome!'; 
    }]);

來源

2017-07-08 BentCoder

此外，在開發過程中不使用縮小的文件（min.js文件）。那些用於生產。在開發過程中使用非縮小文件可以讓您獲得更清晰可讀的錯誤消息。 –

@JBNizet我將在未來記住！謝謝 – BentCoder

無法在AngularJS的$ routeProvider中加載控制器

回答

相關問題