Ошибка в угловой маршрутизации

Question

Ошибка в угловой маршрутизации

0

Не могли бы вы мне помочь? Я пытаюсь сделать страницу с помощью AngularJS. Страница была сделана, но в консоли браузера она дает мне ошибку.

app.js (основной угловой файл)

var DevApp = angular.module("DevApp", [ 'ngRoute' ])

.config(['$routeProvider',function($routeProvider) {
    $routeProvider.when('/', { templateUrl: 'tpl/index.html', controller: "MainCtrl" })
    .otherwise({
            url: '/',
            controller: "MainCtrl",
            templateUrl: "tpl/index.html"
        });
}])

.controller('MainCtrl', [
    '$scope',
    '$http',
    '$routeParams',
    '$element',
    '$timeout',
    function($scope, $http, $routeParams, $element, $timeout) {
        console.log(1);
    }
]);

tpl/index.html (temppate of MainCtrl)

<div ng-controller="MainCtrl">
    Главная страница
</div>

index.html (основной файл)

<!DOCTYPE html>
<html ng-app="DevApp">
  <head>
    <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="/javascripts/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/javascripts/angular/angular.min.js"></script>
    <script type="text/javascript" src="/javascripts/angular/angular-route.js"></script>
    <script type="text/javascript" src="/javascripts/angular/app.js"></script>
    <script type="text/javascript" src="/bootstrap/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div ng-view></div>
  </body>
</html>

Я получаю ошибку:

angular.js:12416
Error: [$injector:unpr] http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24elementProvider%20%3C-%20%24element%20%3C-%20MainCtrl
    at Error (native)
    at http://127.0.0.1:3000/javascripts/angular/angular.min.js:6:416
    at http://127.0.0.1:3000/javascripts/angular/angular.min.js:40:307
    at Object.d [as get] (http://127.0.0.1:3000/javascripts/angular/angular.min.js:38:308)
    at http://127.0.0.1:3000/javascripts/angular/angular.min.js:40:381
    at d (http://127.0.0.1:3000/javascripts/angular/angular.min.js:38:308)
    at e (http://127.0.0.1:3000/javascripts/angular/angular.min.js:39:64)
    at Object.instantiate (http://127.0.0.1:3000/javascripts/angular/angular.min.js:39:213)
    at http://127.0.0.1:3000/javascripts/angular/angular.min.js:80:257
    at link (http://127.0.0.1:3000/javascripts/angular/angular-route.js:977:26) <div ng-view="" class="ng-scope">

John V 22 апр. 2016, в 08:18

Источник

2

Что обозначают $element и $timeout в параметрах контроллера?
niyasc 22 апр. 2016, в 06:04
0

Я написал этот код на примерах. Теперь я удаляю $ element и $ timeot, и это работает! Но я не могу понять, почему код не работал.
John V 22 апр. 2016, в 06:11
1

Вы вводите сервис $ element в контроллер. Поэтому, когда вы хотите использовать элемент $, вам нужен этот сервис, который должен быть доступен при загрузке контроллера.
Jeeva Jsb 22 апр. 2016, в 06:16
0

Сервис $ timeout доступен в самом плагине angular.min.js. Так что вам не нужно удалять это.
Jeeva Jsb 22 апр. 2016, в 06:16
1

Сервис $ element недоступен, вы должны его определить. Все остальные услуги предоставляются угловыми.
Amit 22 апр. 2016, в 06:16
0

Большое спасибо. Вы решили мою проблему
John V 22 апр. 2016, в 06:43
0

@JohnV Вы должны пометить ответ как принятый, если помог.
Ioan 22 апр. 2016, в 17:06

Показать ещё 5 комментариев

Теги:

javascript

html

angularjs

3 ответа

Ещё вопросы

Что обозначают $element и $timeout в параметрах контроллера?
Я написал этот код на примерах. Теперь я удаляю $ element и $ timeot, и это работает! Но я не могу понять, почему код не работал.
Вы вводите сервис $ element в контроллер. Поэтому, когда вы хотите использовать элемент $, вам нужен этот сервис, который должен быть доступен при загрузке контроллера.
Сервис $ timeout доступен в самом плагине angular.min.js. Так что вам не нужно удалять это.
Сервис $ element недоступен, вы должны его определить. Все остальные услуги предоставляются угловыми.
Большое спасибо. Вы решили мою проблему
@JohnV Вы должны пометить ответ как принятый, если помог.

Ioan · Answer 1 · 2016-04-22T05-01-00.000Z

Unknown provider: $elementProvider <- $element <- MainCtrl, что означает, что $element не может быть введен в ваш MainCtrl.

Вы бежите быстрее меня, чтобы ответить: D

Wasiq Muhammad · Answer 2 · 2016-04-22T03-48-00.000Z

Попробуй это

var DevApp = angular.module("DevApp", [ 'ngRoute' ])

DevApp.config(['$routeProvider',function($routeProvider) {
    $routeProvider.when('/', { templateUrl: 'tpl/index.html', controller: "MainCtrl" })
    .otherwise({
            url: '/',
            controller: "MainCtrl",
            templateUrl: "tpl/index.html"
        });
}])

DevApp.controller('MainCtrl', [
    '$scope',
    '$http',
    '$routeParams',
    '$element',
    '$timeout',
    function($scope, $http, $routeParams, $element, $timeout) {
        console.log(1);
    }
]);

AlainIb · Answer 3 · 2016-04-22T03-56-00.000Z

Я не тестировал ваш код, но, возможно, в объявлении маршрутизатора есть опечатка (нет параметра "url")

.config(['$routeProvider',function($routeProvider) {
    $routeProvider.
    when('/', { templateUrl: 'tpl/index.html', controller: "MainCtrl" })
    otherwise({
            redirectTo: '/'
        });
}])