Question

我的索引文件：

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="homingController">
<head>
<title></title>
<script src="./js/jquery-1.9.1.js"></script>
<script src="./js/jquery-ui.js"></script>
<script src="./js/angular.js"></script>
<script src="./js/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="./Controller/homingController.js"></script>
<link rel = "stylesheet" href = "./css/angular-material.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<link rel = "stylesheet" href = "./css/materialize.min.css">
<link href="./css/icon.css" rel="stylesheet">
<link rel ="stylesheet" href="./css/Main.css">
<title>Home Application</title>
</head>

<body>
<div class="navbar">
<a href="#/home">Home</a>
<a href="#/monitor">about</a>
</div>
<div ng-view></div>

<script>
var mainApp = angular.module('myApp', ['ngRoute']);

mainApp.config(function($routeProvider) {

    $routeProvider.when('/home', {
        template: "home",
        controller: 'homingController'
    })
        .when('/monitor', {
            template: "<p>{{firstName}}{{lastName}}</p>",
            controller: 'monitoringController'
        })
        .
        otherwise({
            redirectTo: '/'
        });
});

    mainApp.controller('monitoringController', ['$scope', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
}])

My HomingController.js

var mainApp = angular.module('myApp', ['ngRoute']); 
mainApp.controller('homingController', ['$scope', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
}])

我的Home.html代码：

<div ng-controller="homingController">
{{ lastName }} Hello
</div>

现在我面临问题：

1）在homingController中，如果我添加第一行：

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

然后它给我错误：

angular.js：14328错误：[$ controller：ctrlreg]名称为'homingController'的控制器未注册。

1）在homingController中，如果我不添加第一行：

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

然后它给我错误：

angular.js：14328错误：[$ controller：ctrlreg]名称为'homingController'的控制器未注册。

谢谢!!

Answer 1

您正在宣布该模块两次，

//在 controller.js 文件

中删除此行

var app = angular.module("myApp", []);

///

app.controller("homingController", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});

<强> DEMO

Answer 2

我认为问题在于您将控制器添加到模块的方式。

尝试在homingController中更改以下行

var app = angular.module("myApp", []);

到

var app = angular.module("myApp");

Answer 3

Sajeetharan是对的。你声明模块两次但是在你的controller.js中删除它会导致Uncaught ReferenceError: app is not defined错误，因为你在创建控制器之前没有声明模块

我的建议是将您的主页改为

app.config(['$routeProvider', function( $routeProvider) {

    // Define routes
    $routeProvider.when('/home', {
        templateUrl: 'home.html',
        controller: 'homingController'
    }).when('/monitor', {
        templateUrl: 'home.html',
        controller: 'monitoringController'
    }).otherwise({
        redirectTo: 'home'
    });

}
]);

因为app首先在controller.js

中定义

为什么我的控制器没有在下面的代码中注册？

3 个答案: