码迷,mamicode.com
首页 > 其他好文 > 详细

Argument 'xxx' is not a function, got undefined,初学Angular的第一个坑

时间:2015-01-15 15:51:22      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:

  终于考完试了,在没更新的这一段时间里,一直都在忙于应付考试。不过在期间也是接触到不少好玩的东西,比如Html5的Canvas,我用lufylegend的Html5引擎做了个《看你有所色》的游戏。还有最近刚开始玩的Angular。

  Angular也是早有听说了啊,一直没闲下功夫研究,趁着放假,学一学。慕课网(www.imooc.com)里有一套教程,还是很不错的。但是真正上手编码的时候就发现,尼玛!例子都跑不起来,全是报错,Argument ‘xxx‘ is not a function, got undefined是最显眼的错误。我们先来看看教程中的“错误”代码是怎样的。

  来一个最简单的 Hello World 吧!

技术分享

  我们一般接触到的第一个入门教程都是类似与这样的,代码简单。我们有个ng-app作为Angular的启动口,然后ng-controller="helloCtrl"控制p标签。View层,则用双花括号出入数据greeting的message值。然后在下面的script定义了一个helloCtrl的函数,并为$scope.greeting赋了值。这一切看起来都是那么自然,想象中,浏览器就该出现,"Hello, World!"。可惜的是,浏览器给了我们这样的回复。

  技术分享

  没错,这就是开头所说的那个。于是我弄不懂,为什么老师可以跑通,我却跑不通,大家都是Angular-1.3.0。国内不给力,很难找到答案,最后去StackOverflow找到了。因为从Angular-1.3.0 beta15开始,Angular不再支持全局的Controller!那么问题来了,如何在Angular里定义模块呢?

  当然这篇blog是为了让大家学习Angular的时候别遇到闭门羹,我大致说一下。AngularJs里,有一个angular.module,模块机制就是靠这个来加载的。我们来看看如何可以重新出现梦寐以求的“Hello World”。

  技术分享

  我们看看,改了什么,ng-app="myApp"首先给入口赋了名字,然后再下面进行模块的初始化。在angular.module(String, moduleArray)函数里,第一个String参数是该模块的名字,第二个参数是所依赖的模块(这里暂时用不着),返回了myApp这个模块,然后再通过模块的controller方法定义helloCtrl控制器即可。

 

  当然我们要解释依赖模块的话,我们可以看一下稍作修改的第三版Demo

技术分享

仅仅是多定义一个helloController模块,这样myApp,就可以仅仅作为启动口,而不会混杂着控制器。我们可以定义多个js文件,清晰明确的通过模块梳理整个项目的结构。

Argument 'xxx' is not a function, got undefined,初学Angular的第一个坑

标签:

原文地址:http://www.cnblogs.com/YikaJ/p/4226313.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!