错误：$injector:unpr 未知提供者 -> $routeProviderProvider答案

【问题标题】：Error: $injector:unpr Unknown Provider -> $routeProviderProvider错误：$injector:unpr 未知提供者 -> $routeProviderProvider
【发布时间】：2017-05-19 07:03:58
【问题描述】：

未知提供者：$routeProviderProvider

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

我需要的功能是如果我点击一个子菜单项，它应该重定向到正确的页面。它应该从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"
    }
]

基础产品.html

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

【问题讨论】：

您在缩小文件吗？您是否包含了ngRoute 脚本？
@George ：-是的，我在 app.js 的 te app.module 中包含了 ngRoute，并引用了所有示例代码，但无法解决此问题
我的意思是你在你的 HTML 中做了<script src="path/to/angular-route.js"></script> 吗？
@George :
够了吗？？ @乔治

标签： javascript jquery html angularjs json

【解决方案1】：

您不能在controller. 中访问\注入providers 所以下面一行是导致你的问题的原因。

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

您需要在控制器中注入$route, $routeParams, $location 中的任何一个才能使用路由。

【讨论】：

@DeepakVijay：我不知道您是否检查了我在答案中包含的链接，该链接中有 plunker。你可以举个例子。 See this

【解决方案2】：

和上面提到的 Anoop 一样，routeprovider 应该在别处。即在你的 config() 中

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

顺便说一句：使用 UI-router 比使用 UI-router 中的 ngRoute 模块更明智，你可以做更多的事情，比如将子视图添加到状态等。

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

所以，在你的第一个 base*.js 文件中清理这部分。如果你想要一个 json_url，尝试使用 value() [如果你的 json-url 是固定的]，否则使用 $location 代替。

【讨论】：