javascript - 如何在路由提供者中注入(inject) Controller

Question

我对 angularJS 很陌生，这是我建议的问题。

我有一个 route.js 文件，它只存储与路线相关的东西。看起来像这样。

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

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/abduction', {
            templateUrl: '/partials/abduction.html',
            controller: 'axiomFormCtrl',
        })
        .when('/logicDifference', {
            templateUrl: '/partials/logicDifference.html',
            controller: 'axiomFormCtrl',
        })
    .otherwise({ redirectTo: '/' });
}]);

我还有另一个文件 ontology.js，其中包含所有 Controller ，其中一个 Controller 是 axiomFormCtrl。

var app = angular.module('ontology', ['ngResource', 'ngRoute']);

app.controller('axiomFormCtrl', function ($scope, $http) {
    console.log("in axiom form ctrl....");
});

现在如果我运行程序，它会说 axiomFormCtrl 未定义。我不确定如何解决依赖性问题。

Answer 1

首先，确保您在 HTML 中包含 ontology.js 的脚本:

...
<script src="routes.js"></script>
<script src="ontology.js"></script>

其次，您在这里定义了两次模块:

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

在这里:

var app = angular.module('ontology', ['ngResource', 'ngRoute']);

因此，使用所有必需的模块一次性定义它。这可以在名为 app.js 的文件中完成(您还需要将其包含在 HTML 中):

应用程序.js

(function() {
    var app = angular.module('ontology', ['ngResource', 'ngRoute']);
})();

然后在将使用 ontology 模型 的所有其他文件中，使用相同的语法，减去第二个参数(其他模块的数组):

路由.js

(function() {
    var app = angular.module('ontology');

    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/abduction', {
                templateUrl: '/partials/abduction.html',
                controller: 'axiomFormCtrl',
            })
            .when('/logicDifference', {
                templateUrl: '/partials/logicDifference.html',
                controller: 'axiomFormCtrl',
            })
        .otherwise({ redirectTo: '/' });
    }]);
})();

和ontology.js

(function () {
    var app = angular.module('ontology');

    app.controller('axiomFormCtrl', function ($scope, $http) {
        console.log("in axiom form ctrl....");
    });
})();