如何在routeprovider中注入控制器

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，其中包含所有控制器，其中一個控制器是axiomFormCtrl。

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

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

現在如果我運行程序，它會說axiomFormCtrl is undefined 。 我不知道如何解決依賴問題。

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中）：

app.js

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

然后在將使用ontology model所有其他文件中，使用相同的語法，減去第二個參數（其他模塊的數組）：

routes.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....");
    });
})();