Ошибка Angular JS: [$ инжектор: модульрр]

Изменить: теперь, когда я действительно работал с angularjs, я никому не рекомендую делать то, что я пытался сделать.

Это мое первое приложение Angularjs, поэтому я новичок и все еще пытаюсь разобраться. Но я получаю сообщение об ошибке в своей консоли Chrome, в котором говорится следующее:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.1/$injector/modulerr?p0=app&p1=Error…s.org%2F1.3.0-beta.1%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E...<omitted>...1) angular.min.js?1394393789:6
(anonymous function) angular.min.js?1394393789:6
(anonymous function) angular.min.js?1394393789:30
r angular.min.js?1394393789:7
e angular.min.js?1394393789:29
cc angular.min.js?1394393789:32
c angular.min.js?1394393789:17
bc angular.min.js?1394393789:18
cd angular.min.js?1394393789:17
(anonymous function) angular.min.js?1394393789:208
l jquery-2.0.3.js:2913
c.fireWith jquery-2.0.3.js:3025
x.extend.ready jquery-2.0.3.js:398
S

Что отправляет меня на эту страницу: http://docs.angularjs.org/error/$injector/ modulerr?p0=app&p1=Error:%20%5B$injector:nomod%5D%20http:%2F%2Ferrors.angularjs.org%2F1.3.0-beta.1%2F$injector%2Fnomod%3Fp0%3Dapp%0A% 20%20%20%20ат%20Е

Я не переношу никаких приложений с версии 1.2 и ниже. Я следил за документацией для некоторого простого кода ниже.

Это документ angular, на котором основан этот код: http://docs.angularjs.org/tutorial/step_02

В браузере отображается тег заголовка с {{split.description}}. Какие-нибудь мысли?

Мой HTML

<html lang="en" ng-app="app">
    <head>
        <!-- My CSS Here -->
    </head>

    <body>
        <div ng-controller="SplitController">
            <div ng-repeat="split in splits">
                <h4>{{split.description}}</h4>
            </div>
        </div>
    </body>

</html>

Мой JavaScript

var Split = function(data)
{
    this.description = data['description'];
}

function getSplits(parentid) {
    var url = "/transaction/split/get";
    var ajax = $.ajax({
        type: 'GET',
        dataType: 'json',
        url: url,
        data: {
            parentid: parentid
        },
        beforeSend: function(data){
        },
        success: function(data){
            data = JSON.parse(data, true);
            var splits = [];
            for(var i = 0; i < splits.length; i++)
            {
                splits.push(new Split(splits[i]));
                console.log(splits[i]);
            }
            var app = angular.module("app", []);
            app.controller('SplitController', function($scope){
                $scope.splits = splits;
            });
        },
        error: function(data){
            //$('body').html(JSON.stringify(data));
        }
    }).done(function(data){
        });
}

$(document.ready(function(){
    getSplits(1);
});

javascript angularjs angularjs-injector
person ryandawkins    schedule 09.03.2014    source источник
comment
Вы уверены, что у вас нет опечатки ng-app=app   -  person Sai    schedule 09.03.2014

Ответы (5)


arrow_upward
2
arrow_downward

Я бы не советовал делать это по причинам, о которых уже говорили другие, но вы всегда можете получить дескриптор угловой $scope данного элемента в каком-нибудь обработчике jquery. Просто определите свой контроллер, как обычно (в теле скрипта).

success: function(data){
  ... //splits and whatnot
  var $scope = angular.element($("div[ng-controller='SplitController']")).scope()
  $scope.$apply(function(){
    $scope.splits = splits;
  })
}

Вы не можете определить контроллер, как вы это делаете, потому что ng-app будет работать на document.ready. Он будет искать контроллер, указанный вами с помощью ng-controller, который еще не определен. Для вас совершенно нормально определить SplitController, который не инициализирует «разделения» или какие-либо данные, потому что ng-repeat будет отслеживать изменения в «разделениях» и будет поддерживать DOM в актуальном состоянии.

person pcw216    schedule 09.03.2014
comment
Да, это именно то, что я хотел сделать. Единственная проблема, которая у меня все еще есть, заключается в том, что ошибка появляется, если ng-app равен чему-то. Если ng-app=somename, он ломается. - person ryandawkins; 10.03.2014
comment
Отправьте plnkr или jsfiddle, и я могу показать вам. Angular определяет приложения по модульному принципу. Вы говорите ng-app="app", но вы, вероятно, не определили модуль «приложение». angular.module('app',[]).controller('SplitController', function(){}) - person pcw216; 10.03.2014

arrow_upward
1
arrow_downward

Вы неправильно смешиваете код angular и jQuery. При программировании angular вы должны рассматривать jQuery как низкий уровень. Нет необходимости в document.ready — angular сделает это за вас. С другой стороны, вы должны определить модуль приложения и указать его имя в директиве ng-app. Все остальные вещи, такие как контроллеры, определены в этом модуле.

person Shimon Rachlenko    schedule 09.03.2014
comment
Я запутался, что такое директива ng-app? Я обновляю свой пост, чтобы показать документы angular, которые я прочитал. - person ryandawkins; 10.03.2014

arrow_upward
0
arrow_downward

Это опечатка...

ng-app"app"

видимо надо..

ng-app="app"

Кроме того, я бы не стал ждать, пока ваш вызов ajax завершится начальной загрузкой angular. Вы должны просто сделать это при загрузке страницы и рассмотреть возможность использования инструментов angular для выполнения вашего вызова ajax, таких как служба $http и, возможно, свойство разрешения ngRoute.

person Charlie Martin    schedule 09.03.2014
comment
Это не было прямым копированием и вставкой из реального кода, проблема не в ng=app. - person ryandawkins; 10.03.2014

arrow_upward
0
arrow_downward

Ваш код даже не близок к тому, на котором вы говорите, что он основан. Вы не должны использовать document.ready, не использовать $.ajax, и ваш контроллер должен быть тем, кто делает запрос ajax, а не сам результат запроса ajax.

Код шага 2 выглядит следующим образом. :

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

Если вы хотите вместо этого использовать ajax, вы должны внедрить службу $http в свой контроллер и использовать ее.

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

app.controller('SplitController', function($scope, $http) {
  $http.get( // or post, put, delete
      '/transaction/split/get', 
      {some data}
  ).success(function(returndata) {
    $scope.splits = returndata;
  });
});
person Matsemann    schedule 09.03.2014
comment
Я действительно хочу использовать функцию шаблонов из Angularjs. Проект, над которым я работаю, слишком велик, чтобы делать все в стиле Angular, не переписывая приложение. Как я могу сделать это вместо этого? По сути, я хочу что-то вроде контроллера (mydata), а затем он заполняет ng-repeat данными, которые я отправил. Я смотрю не на ту часть Angular, чтобы сделать это? - person ryandawkins; 10.03.2014
comment
Похоже, я ищу услугу? stackoverflow.com/questions/20181323 / - person ryandawkins; 10.03.2014

arrow_upward
0
arrow_downward

Если кто-то использует $routeProvider, ниже может быть ошибка:

В моем случае я использовал $routeProvider.when({}) без URL-адреса в качестве первого параметра, и это было так, когда я добавлял URL-адрес, как показано ниже, ошибка исчезала.

$routeProvider.when('/post/:id', {
   templateUrl: 'views/post.html',
   controller: 'PostController'
})
person Blasanka    schedule 28.11.2018