编辑:现在我实际上已经使用angularjs工作了,我不建议任何人做我想完成的事情。
这是我的第一个Angularjs应用程序,所以我是个求菜,仍然试图弄清楚事情。但是我在镀铬控制台中收到一个错误,说:
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/qunigndor/modulerr?p0 = app&p1=orror: [ injector:nomod]] http:/%2ferror.angularjs.org%2f1.3.0-beta.1%2F $喷射器%2FNOMOD%3FP0%3DAPP%0A%20%20%20%20%20%20AT%20E
我没有从1.2及以下移植任何应用程序。我遵循文档以获取下面的一些简单代码。
这是Angular Doc此代码基于: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);
});
我真的不建议这样做,原因是其他人已经说过的原因,但是您总是可以在某些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重复将注意"拆分"的更改并保持DOM的最新状态。
您正在以错误的方式混合角和jQuery代码。编程角度时,您应该将jQuery视为低水平。无需document.ready
-角将为您做。另一方面,您应该定义一个应用程序模块,并将其名称放入ng-app
指令中。在该模块上定义了所有其他内容,例如控制器。
这是一个错字...
ng-app"app"
显然需要是..
ng-app="app"
另外,我不会等到您的Ajax呼叫完成Bootstrap Angular。您应该在页面加载上进行此操作,然后考虑使用Angular工具进行AJAX调用,例如$ http服务,并有可能ngroute Resolve property
您的代码甚至与您所说的基于它的代码相关。您不应该使用文档。准备就绪,不使用$ .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;
});
});
如果有人使用$routeProvider
,则可能是错误:
在我的情况下,我使用没有URL的$routeProvider.when({})
作为第一个参数,事实就是如此,当我添加URL如下所示时,错误就消失了。
$routeProvider.when('/post/:id', {
templateUrl: 'views/post.html',
controller: 'PostController'
})