Question

未知提供者：$ routeProviderProvider＆lt; - $ routeProvider

我在运行代码时在控制台中收到此错误。我已经尝试了所有的修复机制。任何想法都不正常。我在这里分享我的代码。

我需要的功能是，如果我点击一个子菜单项，它应该重定向到正确的页面。它应该从action.json文件

获取路径

basePrductContoller.js

App.controller("BaseProductController", ['$scope', '$sce', '$routeProvider', function ($scope, $sce, $routeProvider) {
    //some code here
    console.log('process_base_product()' + $routeProvider.json_url);

    $.getJSON("./api-data/" + $routeProvider.json_url, function (json) {
        $scope.data = json;
        console.log('JSON--', $scope.data);
        $scope.processdata();
    });

    result += '<form id="myform" action="http://building/dev-1/api/' + $routeProvider.post_method_url + '"  method="post" >';

    //code continues
}]);

side menu.html

<ul id="submenu-2" class="collapse">
    <span ng-repeat="item in itemDetails">
        <li>
            <a href="#base-product?{{item.path}}&{{item.apiPath}}" > {{item.title}}</a>
        </li>
    </span>
</ul>

App.js

var App = angular.module('EnergyFocusApp', ['ngRoute']);
App.config(function ($routeProvider) {

    $routeProvider


        .when('/base-product:json_url?:post_method_url?', {
            templateUrl: 'templates/base_product.html',
            controller: 'BaseProductController'
        })

});

侧导航控制器

App.factory('itemsFactory', ['$http', function ($http) {
    var itemsFactory = {
        itemDetails: function () {
            return $http({
                    url: "api-data/action.json",
                    method: "GET",
                })
                .then(function (response) {
                    return response.data;
                });
        }
    };
    return itemsFactory;

}]);


App.controller('SidenavController', ['$scope', 'itemsFactory', function ($scope, itemsFactory) {

    console.log("side nav controller is being tested in the local host")
    var promise = itemsFactory.itemDetails();

    promise.then(function (data) {
        $scope.itemDetails = data;
        console.log(data);
    });
    $scope.select = function (item) {
        $scope.selected = item;
    }
    $scope.selected = {};
}]);

action.json

[
    {
        "title": "Product View",
        "path": "actions/product/view.json",
        "urlpath": "product_view?segment=product-view",
        "apiPath": "api/merchant_product_view",
        "methodType": "post"
    },
    {
        "title": "Product Add",
        "path": "actions/product/add.json",
        "urlpath": "product_add?segment=product_add",
        "apiPath": "api/merchant_product_add"
    },
    {
        "title": "Product Update",
        "path": "actions/product/update.json",
        "urlpath": "product_update?segment=product_update",
        "apiPath": "api/merchant_product_update"
    },
    {
        "title": "Product delete",
        "path": "actions/product/delete.json",
        "urlpath": "product_delete?segment=product_delete",
        "apiPath": "api/merchant_product_delete"
    }
]

base product.html

<div id="result" style="width:600px; text-transform: capitalize;" align="right"></div>

Answer 1

您无法在providers内访问\ inject controller. 因此，线下导致您的问题。

App.controller("BaseProductController", ['$scope', '$sce', '$routeProvider', function ($scope, $sce, $routeProvider) {..\\

你需要在控制器中注入$route, $routeParams, $location中的任何一个以进行路由。

Answer 2

与上面提到的Anoop一样，routeprovider应该在其他地方。即在你的配置（）

app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/red", {
        templateUrl : "red.htm"
    })
    .when("/green", {
        templateUrl : "green.htm"
    })
    .when("/blue", {
        templateUrl : "blue.htm"
    });
});

BTW：在UI路由器中使用UI路由器比使用ngRoute模块更明智，你可以做更多的事情，比如在状态中添加子视图等。

UI-router是生产环境中的标准实现。

因此，请在您的第一个基础* .js文件中清除此部分。如果你想要一个json_url，尝试使用value（）[如果你的json-url是固定的]，否则使用$ location。

错误：$ injector：unpr未知提供商 - ＆gt; $ routeProviderProvider

2 个答案: