Question

这是我的第一个AngularJs应用程序，并在浏览了网络上的许多示例后创建了它，但我在这里做错了。很可能因为文件存储在专用文件夹中。 HomeView.html模板加载正常，但控制器没有。我的意思是我无法在模板中打印greetingMessage。我所看到的只是{{ greetingMessage }}而不是＆＃34;欢迎！＆＃34;。我错过了什么？

错误

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!';
    }]);

Answer 1

主要原因是您没有在homeController.js上提及index.html，它应该在index.js之后。这不会解决您的问题。我想提到的另一件事是，在使用myApp模块注册控制器时，不应再次创建myApp模块。通过声明新的module将清除以前注册的组件。所以只需使用像angular.module('myApp')这样的模块getter，并为其添加更多组件。

<script src="components/home/HomeController.js">

<强>代码

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

Answer 2

您必须附加应用程序文件，然后将控制器文件附加到您的程序页面或母版页中。

这个例子帮助了你 Angular js routing

无法在AngularJS中的$ routeProvider中加载控制器

2 个答案: