Question

我是angularjs的新手，并按照w3schools的教程here创建了我的第一个简单的Angularjs应用程序，它运行良好。经过官方的angularjs教程后，我决定将我的应用程序模块化，但现在无法正常工作。当前我遇到了错误

“未注册名称为'redController'的控制器。”

我想使用其控制器在组件“红色”中显示一条消息。我试图更改代码的许多部分只是为了得到新的错误，而且看来我搞砸了模块化：|

我正在使用v1.6.9

这是我的目录结构

app/
    scripts/
        angular.min.js
        angular-route.js
    blue/
        blue.template.html
    red/
        red.template.html
        red.module.js
        red.component.js
    app.config.js
    app.module.js
    index.html

和源文件：

app.config.js

angular
.module("myApp", [ 'red','ngRoute' ])
.config(function($routeProvider) {
$routeProvider
.when("/red", {
    templateUrl : "red/red.template.html",
    controller: "redController"
})
.when("/blue", {
    templateUrl : "blue/blue.template.html"
});
});

app.module.js

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

index.html

<!DOCTYPE html>
<html>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>



<script src="app.module.js"></script>
<script src="app.config.js"></script>


<script src="red/red.module.js"></script>
<script src="red/red.component.js"></script>

<body ng-app="myApp">
  <a href="#!red">Red</a>
  <a href="#!blue">Blue</a>
  <div ng-view></div>
  <p>Click on the links to navigate "</p>
</body>

</html>

red.template.html

<h1>red</h1>
<p>{{msg}}</p>hell

red.module.js

angular.module('red', [ 'ngRoute' ]);

red.component.js

angular.module('red').component('red',{

        templateUrl: 'red/red.template.html',
        controller: function redController() {
            this.msg = "this is red";
            console.log("Hi");
        }
});

Answer 1

您要在每个.js文件中一次又一次地处理模块，仅在一个.js文件中声明并在其余字段中使用它。

将您的 red.module.js 更改为

angular.module('red', []);

您的app.config.js应该是

angular
.module("myApp")
.config(function($routeProvider) {
$routeProvider
.when("/red", {
    templateUrl : "red/red.template.html",
    controller: "redController"
})
.when("/blue", {
    templateUrl : "blue/blue.template.html"
});
});

并按如下所示更改顺序，

<script src="red/red.module.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="red/red.component.js"></script>

按如下所示更改red.component.js

angular.module('red')
.component('red',{
templateUrl: 
'red/red.template.html',
})
.controller("redController",function($scope)
{
$scope.msg ="This is red";
});

Answer 2

首先，作为@Sajeetharan，您将两次定义myApp模块。在您的app.config.js内部和app.module.js中。如果您将angular.module与2个参数angular.module('app', [])一起使用，则说明您正在设置模块；如果您使用angular.module('app')，则它将用作吸气剂。因此，在您的app.config.js中，您应该使用getter来配置您的应用。

完成此操作后，您可以将路线配置为如下所示：

angular.module('myApp').config(function($routeProvider){
    $routeProvider.when('/red', { template: '<red></red>'});
})

由于您在另一个模块中定义了组件，因此我将使用这种方法。

如果您仍然想使用已实现的方法在templateUrl中设置controller和$routeProvider，则必须更改red组件声明如下：

angular.module('red')
.component('red', { templateUrl: 'red/red.template.html'})
.controller('redController', function(){
    this.msg = 'This is red.';
});

我已经测试了第二种方法，因为第一种方法对我来说更有意义。

模块化应用程序后，Angular JS控制器不起作用

2 个答案: