cod*_*shi 18 jsfiddle angularjs angularjs-module
我是AngularJS的新手,并通过一些文档和教程来学习.我的问题是参考Egghead的视频系列,特别是这个视频,演示如何组合一个基本的搜索过滤器.我想在一个真正的应用程序中使用它,我正在为一个小蜡烛制造业务的朋友建立但是当我将其修改为她的蜡烛而不是复仇者联盟(如视频中的演示)我得到了这个错误:
未捕获错误:[$ injector:modulerr]由于以下原因无法实例化模块myApp:
错误:[$ injector:nomod]模块'myApp'不可用!您要么错误拼写了模块名称,要么忘记加载它.如果注册模块,请确保指定...
我将视频演示中的一个编辑(在数组中只有3个演员)版本复制到了一个jsfiddle并发现它仍然会产生相同的错误.(作为参考,Egghead演示在这里:http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter).到目前为止,我已经在这个网站上阅读了至少六个类似的问题,并尝试了所提供的每个解决方案,但没有一个摆脱这个错误或导致复仇者搜索 - 在视频演示中工作得很好 - 实际上起作用正常.
HTML:
<div ng-app="myApp">
<div ng-controller="AvengersCtrl">
<input type="text" ng-model="search.$" />
<table>
<tr ng-repeat="actor in avengers.cast | filter:search">
<td>{{actor.name}}</td>
<td>{{actor.character}}</td>
</tr>
</table>
</div>
</div>
使用Javascript:
var myApp = angular.module('myApp', []);
myApp.factory('Avengers', function () {
var Avengers = {};
Avengers.cast = [
{
name: "Robert Downey Jr.",
character: "Tony Stark / Iron Man"
},
{
name: "Chris Evans",
character: "Steve Rogers / Captain America"
},
{
name: "Mark Buffalo",
character: "Bruce Banner / The Hulk"
}
];
return Avengers;
})
function AvengersCtrl($scope, Avengers) {
$scope.avengers = Avengers;
}
简单地说,有人可以提供一个可以解决这个错误的解决方案,以及用简单的英语(不是博士级别的"Angular Obscurese")解释是什么导致它(简而言之)和需要什么做了避免吗？
编辑:道歉,但上面从教程中引用的jsfiddle链接不再有效.我删除了断开的链接.提到的教程仍可供查看.
Kha*_* TO 48
尝试使用No Wrap - In Head或No wrap in in body in your fiddle:
工作小提琴:http://jsfiddle.net/Q5hd6/
说明:
当DOM 完全加载时,Angular开始编译DOM .您注册要运行的代码onLoad(小提琴中的onload选项)=>注册myApp模块为时已晚,因为angular开始编译DOM,而angular看到没有命名模块myApp并抛出异常.
通过使用No Wrap - In Head,您的代码如下所示:
<head>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>
<script type='text/javascript'>
//Your script.
</script>
</head>
您的脚本有机会在角度开始编译DOM之前运行,并且myApp当角度开始编译DOM时已经创建了模块.
Cét*_*tia 10
你必须使用JSFiddle加载选项:
将其设置为" No wrap - in body"而不是"onload"
工作小提琴:http://jsfiddle.net/zQv9n/1/