Uncaught Error Injector modulerr Ошибка модуля

Question

Uncaught Ошибка инжектора модуля модулятора Ошибка модуля. Угловой роутер не работает должным образом. После добавления $ stateProvider в app.config 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