Javascript 在位于单独文件中的$routeProvider路由中定义控制器_Javascript_Angularjs

Javascript 在位于单独文件中的$routeProvider路由中定义控制器

javascript angularjs

Javascript 在位于单独文件中的$routeProvider路由中定义控制器,javascript,angularjs,Javascript,Angularjs,原代码如下： (function() { angular.module('test', ['ngRoute']) .config(function($routeProvider) { $routeProvider .when('/test', { templateUrl: '/templates/test.html', controlle

原代码如下：

(function() {
    angular.module('test', ['ngRoute'])
        .config(function($routeProvider) {
            $routeProvider
                .when('/test', {
                    templateUrl: '/templates/test.html',
                    controller: 'testCtrl'
                })
                .when('/test2', {
                    templateUrl: '/templates/test2.html',
                    controller: 'test2Ctrl'
                })
                .otherwise({
                    redirectTo: '/test'
                });
        });
})();

//ANOTHER FILE
(function() {
    angular.module('test')
        .controller('testCtrl', function($scope) {
            $scope.name = "test";
        })
        .controller('test2Ctrl', function($scope) {
            $scope.name = "test2";
        });
});

没有错误，但是模板中显示的是

{{name}}

，而不是范围中定义的内容

然后我尝试将控制器移动到另一个模块中，并将依赖项注入其中。有趣的是，即使将控制器移动到单独的模块，它也无法工作：

(function () {
    angular.module('test2', []);
    angular.module('test', ['ngRoute', 'test2']);
})();

//ANOTHER FILE
(function() {
    angular.module('test')
        .config(function($routeProvider) {
            $routeProvider
                .when('/test', {
                    templateUrl: '/templates/test.html',
                    controller: 'testCtrl'
                })
                .when('/test2', {
                    templateUrl: '/templates/test2.html',
                    controller: 'test2Ctrl'
                })
                .otherwise({
                    redirectTo: '/test'
                });
        });
})();

//ANOTHER FILE
(function() {
    angular.module('test2')
        .controller('testCtrl', function($scope) {
            $scope.name = "test";
        })
        .controller('test2Ctrl', function($scope) {
            $scope.name = "test2";
        });
});

事实上，在这一次中，它抛出了一个无法找到控制器的错误

据我所知，之所以会发生这种情况，是因为配置块的运行方式以及在注册控制器之前它是如何运行的

我解决这个问题的一种方法是将控制器和模板移动到指令中，然后使用指令本身作为模板

(function() {
    angular.module('test')
        .config(function($routeProvider) {
            $routeProvider
                $routeProvider
                .when('/', {
                    template: '<test></test>'
                })
                .when('/test2', {
                    template: '<test2></test2>'
                })
                .when('/test3', {
                    template: '<test3></test3>'
                })
                .otherwise({
                    redirectTo: '/'
                });
        });
})();

（函数（）{
角度模块（“测试”）
.config（函数（$routeProvider）{
$routeProvider
$routeProvider
。当（“/”{
模板：“”
})
.when（“/test2”{
模板：“”
})
.when（“/test3”{
模板：“”
})
.否则({
重定向到：'/'
});
});
})();

我想知道，当您的控制器位于一个单独的文件中时，是否有其他人有办法支持将控制器放入路由器。

您可以用这种方式组织项目

templates/
    test.html
    test2.html
app/
    app.js
    controllers/
        testCtrl.js
        test2Ctrl.js

app.js

(function() {
    angular.module('test', ['ngRoute'])
        .config(function($routeProvider) {
            $routeProvider
                .when('/test', {
                    templateUrl: '/templates/test.html',
                    controller: 'testCtrl'
                })
                .when('/test2', {
                    templateUrl: '/templates/test2.html',
                    controller: 'test2Ctrl'
                })
                .otherwise({
                    redirectTo: '/test'
                });
        });
})();

html文件

(function() {
    angular.module('test', ['ngRoute'])
        .config(function($routeProvider) {
            $routeProvider
                .when('/test', {
                    templateUrl: '/templates/test.html',
                    controller: 'testCtrl'
                })
                .when('/test2', {
                    templateUrl: '/templates/test2.html',
                    controller: 'test2Ctrl'
                })
                .otherwise({
                    redirectTo: '/test'
                });
        });
})();

在html文件中添加控制器后，可能不再存在此问题

<html ng-app='myApp'>
    <body ng-controller='TextController'>
    ....
    ....
    ....
    <script src="app/controllers/testCtrl.js"></script>
    <script src="app/controllers/test2Ctrl.js"></script>
    </body>
</html>


....
....
....

这里的代码缺少执行它的

（）

(function() {
    angular.module('test')
        .controller('testCtrl', function($scope) {
            $scope.name = "test";
        })
        .controller('test2Ctrl', function($scope) {
            $scope.name = "test2";
        });
});

应该是：

(function() {
    angular.module('test')
        .controller('testCtrl', function($scope) {
            $scope.name = "test";
        })
        .controller('test2Ctrl', function($scope) {
            $scope.name = "test2";
        });
})();

控制器文件中缺少一个

（）

自执行函数（IIFE）

//ANOTHER FILE
(function() {
    angular.module('test2')
        .controller('testCtrl', function($scope) {
            $scope.name = "test";
        })
        .controller('test2Ctrl', function($scope) {
            $scope.name = "test2";
        });
})(); //<-- added here

//另一个文件
（功能（）{
角度.module（'test2'）
.controller（'testCtrl'，函数（$scope）{
$scope.name=“测试”；
})
.controller（'test2Ctrl'，函数（$scope）{
$scope.name=“test2”；
});
})(); //代码看起来不错，应该可以用。你有什么错误吗？@pankajparkar我知道的没错？？事实证明，如果您删除控制器周围的自调用匿名函数，它可以正常工作，但这对我来说没有任何意义。让我通过设置plunkr来查看它。或者，为什么您不重现相同的问题plunkr@pankajparkar@pankajparkar我想出来了。谢谢你告诉我把它放在plunkrI上我也知道了！不过，我会接受你的回答，因为你告诉我把它放在plunkr上，这样就解决了我的问题。@AR7我真的浪费了我的时间来添加答案。.应该先发表评论。.实际上我想给你一个惊喜。.但你先做了。：p谢谢：）很高兴帮助你。.谢谢你的赞赏：）