无法实例化模块 [$injector:unpr] 未知提供者：$routeProvider（无法实例化类型怎么办）

25-02-17 14

本文将为您提供关于无法实例化模块[$injector:unpr]未知提供者：$routeProvider的详细介绍，我们还将为您解释无法实例化类型怎么办的相关知识，同时，我们还将为您提供关于Angul

本文将为您提供关于无法实例化模块 [$injector:unpr] 未知提供者：$routeProvider的详细介绍，我们还将为您解释无法实例化类型怎么办的相关知识，同时，我们还将为您提供关于Angular UI Bootstrap模式：[$ injector：unpr]未知提供程序：$ uibModalInstanceProvider、angularjs ui-router：未知提供者：$stateProvider、angularjs – Angular UI Bootstrap模式：[$inject：unpr]未知的提供者：$uibModalInstanceProvider、angularjs – Angular-Strap错误：[$injector：unpr]未知提供者：$datepickerProvider的实用信息。

本文目录一览：

无法实例化模块 [$injector:unpr] 未知提供者：$routeProvider（无法实例化类型怎么办）
Angular UI Bootstrap模式：[$ injector：unpr]未知提供程序：$ uibModalInstanceProvider
angularjs ui-router：未知提供者：$stateProvider
angularjs – Angular UI Bootstrap模式：[$inject：unpr]未知的提供者：$uibModalInstanceProvider
angularjs – Angular-Strap错误：[$injector：unpr]未知提供者：$datepickerProvider

无法实例化模块 [$injector:unpr] 未知提供者：$routeProvider（无法实例化类型怎么办）

从 AngularJS 1.0.7 升级到 1.2.0rc1 时，我收到了这个错误。

答案1

小编典典

ngRoute 模块不再是核心angular.js文件的一部分。如果您继续使用 $routeProvider 那么您现在需要angular-route.js在 HTML 中包含：

<script src="angular.js"><script src="angular-route.js">

API 参考

您还必须添加ngRoute作为应用程序的依赖项：

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

相反，如果您打算使用angular-ui-router等，那么只需$routeProvider
从您的模块中删除依赖.config()项并将其替换为选择的相关提供程序（例如$stateProvider）。然后，您将使用ui.router依赖项：

var app = angular.module(''MyApp'', [''ui.router'', ...]);

Angular UI Bootstrap模式：[$ injector：unpr]未知提供程序：$ uibModalInstanceProvider

这有点奇怪。当我在线搜索此问题时，我看到许多页面的Google搜索结果和SO解决方案…但是似乎没有任何效果！

简而言之，我正在尝试实现AngularUI Bootstrap Modal。我不断收到以下错误：

错误：[$ injector：unpr]未知提供程序：$ uibModalInstanceProvider <-$ uibModalInstance
<-addEntryCtrl

这是我的HTML：

<nav>
  <div>
    <spanng-controller="navCtrl">
      <ang-click="open()" aria-hidden="true">Add New</a>
    </span>
  </div>
</nav>

这是我的控制器：

var app = angular.module('nav',['ui.bootstrap']);

app.controller('navCtrl',['$scope','$uibModal',function($scope,$uibModal) {
  $scope.open = function() {
    var uibModalInstance = $uibModal.open({
      animation: true,templateUrl: 'addEntry/addEntry.html',controller: 'addEntryCtrl',});
  };
}]);

最后，这是我的模态代码：

var app = angular.module('addEntry',['firebase','ui.bootstrap']);

app.controller('addEntryCtrl','$firebaseObject','$state','$uibModalInstance',$firebaseObject,$state,$uibModalInstance) {
  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };

  $uibModalInstance.close();
}]);

我尝试过的解决方案：

更新了Angular Bootstrap（版本：0.14.3）和Angular（v1.4.8）
将uibModalInstance更改为modalInstance
将$ uibModalInstance更改为modalInstance
将我的addEntryCtrl放在我的ModalInstance中

有什么想法吗？现在已经将我推倒墙了将近2天。

编辑

我应该注意两件事：

1）当我从addEntry中删除$
uibModalInstance作为依赖项时，我的HTML表单提交按钮工作正常，并且表单看起来很完美。即使重定向正确发生（提交时）。问题仍然存在：模态仍然停留在屏幕上，并引发错误，即$
uibModalInstance未定义。这是有道理的，因为我将其作为依赖项删除了，但是我显然仍然需要在提交时使用该模式。

2）另外，我在应用程序的另一部分工作的代码几乎相同。唯一的区别是它通过工厂工作。否则，代码是相同的。因此，我确信我的依赖项全部存在并且版本正确。所以。抓狂
奇怪。

谢谢！

angularjs ui-router：未知提供者：$stateProvider

我使用AngularJS的ui-router插件遇到麻烦：

angular.module('myApp',[]).
config(['$routeProvider','$stateProvider',function($routeProvider,$stateProvider) {  
    $stateProvider
        .state('mandats',{
            url: '/domiciliations/mandats',templateUrl: 'domiciliations/views/mandats.html',controller: 'mandatsCtrl'
        });
}])

我在启动时会得到这个错误：

UnkNown provider: $stateProvider

我按照这个顺序包含了javascripts：

<script src="/Scripts/libs/angular/angular.js"></script>
<script src="/Scripts/libs/angular/angular-resource.js"></script>
<script src="/Scripts/libs/angular/angular-ui-states.js"></script>

可能是什么问题？

[编辑]

我已经通过添加“ui.compat”作为myApp的依赖项来消除错误消息.我在ui-router的示例代码中看到,但在文档中没有.这是什么？

然而,它仍然不起作用.我已经将ui-view添加到应用程序索引文件中的div.但页面仍然为空.

以下代码应该做这个工作.至少在我的情况下,所以让我知道,如果它的工作与否.

angular.module('myApp',['ui.compat']).
config(['$routeProvider',controller: 'mandatsCtrl'
        });
}])

现在关于你的页面是空的问题.确保您在浏览器中的URL与您的状态中定义的URL不匹配.在浏览器中尝试这个’#/ domiciliations / mandats’,看看是否正确渲染视图.不是你的绝对网址应该与http：// [HOST_NAME] /home.html#/domiciliations/mandats类似.

angularjs – Angular UI Bootstrap模式：[$inject：unpr]未知的提供者：$uibModalInstanceProvider

这有点奇怪。当我在线搜索这个问题时，我看到很多页面的Google结果和SO解决方案，但没有一个似乎不起作用！

简而言之，我试图实现AngularUI Bootstrap Modal。我不断收到以下错误：

Error: [$injector:unpr] UnkNown provider: $uibModalinstanceProvider <- $uibModalinstance <- addEntryCtrl

这是我的HTML：

<nav>
  <div>
    <spanng-controller="navCtrl">
      <ang-click="open()" aria-hidden="true">Add New</a>
    </span>
  </div>
</nav>

这是我的控制器：

var app = angular.module('nav',['ui.bootstrap']);

app.controller('navCtrl',['$scope','$uibModal',function($scope,$uibModal) {
  $scope.open = function() {
    var uibModalinstance = $uibModal.open({
      animation: true,templateUrl: 'addEntry/addEntry.html',controller: 'addEntryCtrl',});
  };
}]);

最后，这是我的模式代码：

var app = angular.module('addEntry',['firebase','ui.bootstrap']);

app.controller('addEntryCtrl','$firebaSEObject','$state','$uibModalinstance',$firebaSEObject,$state,$uibModalinstance) {
  $scope.cancel = function() {
    $uibModalinstance.dismiss('cancel');
  };

  $uibModalinstance.close();
}]);

我试过的解决方案

>更新Angular Bootstrap(版本：0.14.3)和Angular(v1.4.8)
>将uibmodalinstance更改为modalinstance
>将$ uibModalinstance更改为modalinstance
把我的addEntryCtrl放在我的Modalinstance里面

有什么想法吗？这已经把我推开了近2天了。

*编辑*

我应该注意两件事情：

1)当我从addEntry中删除$ uibModalinstance作为依赖关系时，我的HTML表单提交按钮工作正常，表单看起来完美。即使重定向发生正确(提交时)。问题依然存在：模态仍然保留在屏幕上，抛出$ uibModalinstance未定义的错误。这是有道理的，因为我删除它作为依赖，但我显然仍然需要模态是接近提交。

2)另外，我的应用程序的另一部分几乎有相同的代码。唯一的区别是它通过工厂工作。否则，代码是相同的。因此，我相信我的依赖是所有的，版本是正确的。所以。吓坏。奇怪。

谢谢！

答案找到了！与我的朋友一起走了，我们发现了答案。我想把它发贴在这里，以防别人读这个。

事实证明，我们在我们的模态窗口中有一个ng控制器，它是一个div标签，包裹在模态中的整个html格式。以前，当我们的表单不是模态的(它有一个单独的URL)，但是由于某种原因，当它在一个模态中时，它会中断，这一点很好。 ng控制器引用了addEntryCtrl。删除它后立即工作！

angularjs – Angular-Strap错误：[$injector：unpr]未知提供者：$datepickerProvider

我正在学习AngularJs并且有许多新术语或者我开始理解这些术语但是这个我似乎无法弄清楚我做错了什么.

我想要做的就是使用Angular-Strap在我的页面上加载一个日期选择器.
http://mgcrea.github.io/angular-strap/##datepickers

我得到的错误,到目前为止还没弄清楚为什么：

Uncaught Error: [$injector:modulerr] Failed to instantiate module
mgcrea.ngStrap due to: Error: [$injector:unpr] UnkNown provider:
$datepickerProvider

我的基本理解告诉我Angular正在尝试注入一个依赖于它的模块,但我在文档中找不到$datepickerProvider的内容,我正在使用网站上的示例代码.

Html – 标记

<!DOCTYPE html>
<html lang="en" ng-app="mgcrea.ngStrap">
<head>
...
</head>
<body ng-controller="ZenwireController">
                    <divhttps://www.jb51.cc/tag/ott/" target="_blank">ottom: 24px;" append-source>
                    <form name="datepickerForm"role="form">
                        <!-- Basic example -->
                        <divng->
                            <label><i></i> Date <small>(as date)</small></label>
                            <input type="text"ng-model="selectedDate" name="date" bs-datepicker>
                        </div>
                        <!-- Custom example -->
                        <divng->
                            <label><i></i> Date <small>(as number)</small></label>
                            <input type="text"ng-model="selectedDateAsNumber" data-date-format="yyyy-MM-dd" data-date-type="number" data-min-date="02/10/86" data-max-date="today" data-autoclose="1" name="date2" bs-datepicker>
                        </div>
                        <hr>
                        <!-- Date range example -->
                        <div>
                            <label><i></i> <i></i> <i></i> Date range <small>(dynamic)</small></label><br>
                            <div>
                                <input type="text"ng-model="fromDate" data-max-date="{{untilDate}}" placeholder="From" bs-datepicker>
                            </div>
                            <div>
                                <input type="text"ng-model="untilDate" data-min-date="{{fromDate}}" placeholder="Until" bs-datepicker>
                            </div>
                        </div>
                    </form>
                </div>
         </div>
    </body>
</html>

AngularJs – 代码

var app = angular.module('mgcrea.ngStrap',['ngAnimate','ngSanitize','mgcrea.ngStrap']);

app.controller('ZenwireController',function ($scope) {
});

'use strict';

angular.module('mgcrea.ngStrap')

.config(function ($datepickerProvider) {
    angular.extend($datepickerProvider.defaults,{
        dateFormat: 'dd/MM/yyyy',startWeek: 1,autoClose: true,minDate: "today"
    });
})

.controller('DatepickerController',function ($scope,$http) {

    $scope.selectedDate = new Date();
    $scope.selectedDateAsNumber = Date.UTC(1986,1,22);
    // $scope.fromDate = new Date();
    // $scope.untilDate = new Date();
    $scope.getType = function (key) {
        return Object.prototype.toString.call($scope[key]);
    };

});

我正在加载的脚本是,

bundles.Add(new ScriptBundle("~/bundles/angularjs").Include(
            "~/Scripts/angular.js","~/Scripts/angular-animate.js","~/Scripts/angular-sanitize.js","~/Scripts/angular-strap.min.js","~/Scripts/angular-strap.tpl.min.js","~/Scripts/angular-strap/date-parser.min.js","~/Scripts/angular-strap/tooltip.min.js"));

解决方法

你宣布模块’mgcrea.ngStrap’

在HTML和AngularJS代码中进行更改

HTML标记

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
...
</head>

角度代码

var app = angular.module('myapp','mgcrea.ngStrap']);
    app.controller('ZenwireController',function ($scope) {
});

我们今天的关于无法实例化模块 [$injector:unpr] 未知提供者：$routeProvider和无法实例化类型怎么办的分享已经告一段落，感谢您的关注，如果您想了解更多关于Angular UI Bootstrap模式：[$ injector：unpr]未知提供程序：$ uibModalInstanceProvider、angularjs ui-router：未知提供者：$stateProvider、angularjs – Angular UI Bootstrap模式：[$inject：unpr]未知的提供者：$uibModalInstanceProvider、angularjs – Angular-Strap错误：[$injector：unpr]未知提供者：$datepickerProvider的相关信息，请在本站查询。

本文标签：