未捕获的错误注入器 modulerr 模块错误

Question

未捕获的错误注入器 modulerr 模块错误。 角路由器无法正常工作。 在 app.config 中添加 $stateProvider 后，angulerjs 通过给出以下错误停止工作。

Failed to instantiate module app due to: Error: [$injector:unpr] http://errors.angularjs.org/1.6.9/$injector/unpr?p0=%24st... at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:7:76 at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:46:64 at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:43:309) at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:44:39) at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:44:124) at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:42:279) at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:42:418 at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:8:7) at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:42:180) at gb (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:46:250

在进行了一些我不记得的更改后，也出现了错误Error: $injector:unpr Unknown Provider Stateprovider。

脚本

` angular.module('app', []) '使用严格';

   var app = angular.module('app').factory('AuthInterceptor', [function () {
        return {
            // Send the Authorization header with each request
            'request': function (config) {
                config.headers = config.headers || {};
                var encodedString = btoa("admin:admin");
                config.headers.Authorization = 'Basic ' + encodedString;
                return config;
            }
        };
    }]);


    app.config(['$httpProvider', '$stateProvider',function ($httpProvider, $stateProvider ) {
  $stateProvider
    .state('GradesData', {
      url: '/GradesData',
      templateUrl: '../GradesData.html'
    })
    .state('GradesForm', {
      url: '/GradesForm',
      templateUrl: '../GradesForm.html'
    })

  $httpProvider.interceptors.push('AuthInterceptor');

}]);`

包括以下脚本

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

添加 $stateProvider 后出现问题 添加了 $stateProvider 用于从 angularjs 页面另一个 angularjs 页面传递数据/值。

包括其他 jquery 脚本

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<script src="dist/js/adminlte.min.js"></script>
<script src="dist/js/demo.js"></script>

Answer 1

如果您使用<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>，请使用$routeProvider 而不是$stateProvider

那么您的代码将如下所示：

app.config(['$locationProvider', '$routeProvider',
      function($locationProvider, $routeProvider) {
        $locationProvider.hashPrefix('');
         $routeProvider
.when('/GradesData', {
         templateUrl: '../GradesData.html'})
.when('/GradesForm', {
         templateUrl: '../GradesForm.html'
            });
            $routeProvider.otherwise('/');
        }
    ]);

将ngRoute 添加到angular.module

angular.module('app', ['ngRoute'])

https://www.w3schools.com/angular/angular_routing.asp

对于$stateProvider，将ui.router 添加到angular.module

angular.module('helloworld', ['ui.router']);

并使用

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.min.js"></script>

请看这里：https://ui-router.github.io/ng1/tutorial/helloworld