angularjs作为一个新兴的JavaScript框架,因其具有不少新特性,比如mvc开发模块,双向数据绑定等等,使其名声大噪。我也久闻其大名,然而因为时间问题,一直都没有去接触过他。这几天工作室那边不是特别忙,于是决定花点时间来亲近一下他。
之前买了一本《精通angularjs》,书还没开始看,今天就翻了几页。里面有提到chrome的batarang拓展可以很好的调试angular应用,所以决定先把它下载下载并且安装了,毕竟,工欲善其事必先利其器嘛。
因为防火墙的原因,chrome是无法直接去Google APP Store获取到batarang插件的。后来,在网上搜了一下,很多都说可以下载一个batarang的后缀名为“.crx”的文件,然后直接拖到chrome的扩展程序那里进行安装即可,可是虽然是安装成功了,但是却用不了啊。
所以,最后办法了,只能去github下载了batarang包,然后打算手动的安装它。本来以为这只是很简单的事情,可是,哪知道结果遇到了那么多坑啊!废话不多说了,下面就把我今天的安装步骤及遇到的坑和大家share一下哈。
第一步,到github上面搜索一下batarang,或者直接到https://github.com/angular/batarang/releases去下载batarang,我选择为了最新版本的v0.10.4的zip进行下载,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/6f5ba47427c657322aa9b2ad16a8d296.png)
第二步:打开chrome浏览器,点击右上角的那个灰色的按钮,然后选择更多工具,然后选择扩展程序,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/f0ea8bd762b82a734b13418f9f9b978d.png)
第三步:点击扩展程序之后,来到如下的界面,勾选右上角的“开发者模式”,然后,单击“加载已解压的扩展程序...”,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/a2b941a134bdb0a1309a9d8d767d0456.png)
第四步:进入文件选择界面,把我们刚刚在git上面下载的batarang的解压后的文件夹选择中,然后确定:
![](https://i-blog.csdnimg.cn/blog_migrate/1e0aecd335e8a0add6d9ee8785529f6f.png)
第五步:我们发现扩展程序下面就会多了一个angularjs batarang的扩展,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/732db6dcb107fee401dbbbe2bc18a217.png)
第六步:重启chrome,也即关闭chrome,然后再打开chrome。然后,我们按下f12调出的开发者工具面板,会发现多了一个angularjs按钮,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/ddd211c57b0f5da13e7f3a5e79c8a421.png)
但是这里面什么都没有。一片空白,那么坑终于来了,下面我们一起来研究一下到底是怎么回事了。这时候,我们再次打开“扩展程序”面板,去看个究竟。我们会发现,batarang那里有个错误提示,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/e1dc3921e9590253c614bb0422111051.png)
然后,我们再点击那个错误去查看错误的原因,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/6cda7f4ae133f9b0a1784b97d7420473.png)
我们会发现,竟然报出了angular is undefined的错误,然后再点击在“开发者工具中查看”如上图红色所示,然后进入到开发者工具面板如下:
![](https://i-blog.csdnimg.cn/blog_migrate/52760901a79519f82240accad23c35f3.png)
我们会发现,全部的地方用到的angular都没有定义。这是怎么回事呢?是因为我们下载的是源代码,里面依赖的第三方模板还没有安装,那该怎么办呢?很简单,只需要在我们的解压的目录里面执行 npm install,安装好依赖之后,再导入浏览器就OK啦。