AngularJs参考错误:未定义angular

16

我尝试添加一个自定义过滤器,但是如果我使用以下代码:

angular.module('myApp',[]).filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});
但是如果我这样做,我会在 firebug 中看到 "ReferenceError: angular is not defined" 的错误信息。
应用程序的其余部分正常工作,我在 div 标签中使用 ng-app 而不是 html 标签,并且引入了 https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js

你是否引用了 app/js/filters.js - Andrea Ligios
你的意思是要包含一些AngularJS文件还是将代码放在filter.js文件中? - FAvIo41
为了创建一个新的过滤器,您需要创建一个phonecatFilters模块,并将您的自定义过滤器注册到该模块中:http://docs.angularjs.org/tutorial/step_09 - Andrea Ligios
你确定你正在加载angular.js脚本吗?你能提供一个带有示例的jsfiddle吗? - bmleite
1
好的,最后我意识到了问题。这是一个带有旧代码的单个页面。我正在向 ajax 部分页面注入 angular。如果您遇到同样的问题,请将 angular.js 放在基本 html 中,并使用 $scope 进行解决。感谢大家。 - FAvIo41
9个回答

47

在包含任何其他js文件之前,应首先包含include angular行。


1
由于Angular需要在使用之前加载,因此如果不将它放在顶部,将会出现引用错误。@lborgav - Erik

10

由于本地与远程引用的差异,我遇到了类似的问题。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="lib/js/ui-grid/3.0.7/ui-grid.js"></script>

由于ui-grid.js依赖于angular.js,因此在加载ui-grid时需要先加载angular.js。但是在上述情况下,ui-grid.js【本地引用文件】在angularjs【从互联网加载】之前被加载了,

如果我同时在本地引用angular.js和ui-grid,并且在ui-grid之前声明angular.js,则问题得以解决。

<script src="lib/js/angularjs/1.4.3/angular.js"></script>
<script src="lib/js/ui-grid/3.0.7/ui-grid.js"></script>


5

始终确保在HTML文件中首先引用js文件(angular.min.js)。例如:

---------------- 此引用将引发错误 -------------------------

< script src="otherXYZ.js"></script>
< script src="angular.min.js"></script>

----------------- 这个引用将会如预期一样正常工作 -------------------

< script src="angular.min.js"></script>
< script src="otherXYZ.js"></script>

5

由于这是一个单页应用程序,所以使用的解决方案是:

通过 AJAX 加载内容,就像加载其他控制器一样,然后调用:

angular.bootstrap($('#your_div_loaded_in_ajax'),["myApp","other_module"]);

"other_module"是什么? - Naila Akbar
1
调用其他模块的示例 - FAvIo41

2

如果您正在使用rails和angular-rails gem,则可以通过将以下缺失的行添加到application.js(或适用于您情况的任何文件)来轻松解决问题:

//= require angular-resource

2

正如@bmleite在评论中提到的,您可能忘记加载angular.js。

如果我创建一个包含angular指令但未包含angular.js的fiddle,则在Chrome控制台中会出现完全相同的错误:Uncaught ReferenceError: angular is not defined


1
我遇到了这个问题,因为我在Mac上将ngBoilerplate复制粘贴到我的项目中,但Finder没有显示隐藏文件。 因此,.bower没有与ngBoilerplate的其余部分一起复制。 因此,bower将资源移动到bower_components(默认)而不是vendor(配置为)中,我的应用程序没有获得angular。 可能是一个边角案例,但它可能会帮助这里的某个人。

0
如果您从 Google 下载了 angular.js 文件,您需要确保每个人都具有读取权限,否则它将无法被您的 HTML 文件加载。默认情况下,它似乎以无权限的方式下载,因此您还将收到以下消息:

获取 http://localhost/myApp/js/angular.js

这让我抓狂了大约半个小时!

0

如果在使用AngularJS时,对于包含过滤器的文件使用“async defer”,那么我认为会发生这种情况:

<script src="js/filter.js" type="text/javascript" async defer></script>

如果您这样做,只需删除“async defer”。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接