Angular JS錯誤：[$ injector：modulerr]

Question

編輯：現在我實際上使用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 =錯誤：％20％5B $ injector：nomod％5D％20http：％2F％2Ferrors.angularjs。有機％2F1.3.0-beta.1％2F $注射器％2Fnomod％3Fp0％3Dapp％0A％20％20％20％20原子％20E

我沒有從1.2及以下移植任何應用程序。 我按照下面的一些簡單代碼的文檔。

這是此代碼基於的角度文檔： 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);
});

Answer 1

我真的不建議這樣做，原因是其他人已經說過，但是你總是可以在一些jquery處理程序中獲得給定元素的angular $ scope的句柄。 只需將控制器定義為通常的任何人（在腳本的主體中）。

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保持最新狀態。

Answer 2

您正在以錯誤的方式混合angular和jQuery代碼。 編程角度時，您應該將jQuery視為低級別。 不需要document.ready - angular會為你做。 另一方面，您應該定義一個應用程序模塊並將其名稱放在ng-app指令中。 所有其他東西，如控制器，都在該模塊上定義。

Answer 3

這是一個錯字......

ng-app"app"

顯然需要......

ng-app="app"

此外，我不會等到你的ajax調用完成bootstrap angular。 您應該在頁面加載時執行此操作並考慮使用角度工具進行ajax調用，例如$ http服務以及可能的ngRoute resolve屬性

Answer 4

你的代碼甚至不是你所說的基於的代碼。 你不應該使用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;
  });
});

Answer 5

如果有人使用$routeProvider ，下面可能是錯誤：

在我的情況下，我使用$routeProvider.when({})而沒有url作為第一個參數，就是這種情況，當我添加如下所示的url時，錯誤消失了。

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

Angular JS錯誤：[$ injector：modulerr]

問題描述

5 個解決方案

解決方案1
2 已采納 2014-03-09 22:07:38

解決方案2
1 2014-03-09 19:57:53

解決方案3
0 2014-03-09 19:59:43

解決方案4
0 2014-03-09 20:24:40

解決方案5
0 2018-11-28 15:41:12

Angular JS錯誤：[$ injector：modulerr]

問題描述

5 個解決方案

解決方案1 2 已采納 2014-03-09 22:07:38

解決方案2 1 2014-03-09 19:57:53

解決方案3 0 2014-03-09 19:59:43

解決方案4 0 2014-03-09 20:24:40

解決方案5 0 2018-11-28 15:41:12

解決方案1
2 已采納 2014-03-09 22:07:38

解決方案2
1 2014-03-09 19:57:53

解決方案3
0 2014-03-09 19:59:43

解決方案4
0 2014-03-09 20:24:40

解決方案5
0 2018-11-28 15:41:12