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进行下载,如下:
 
 
 
第二步:打开chrome浏览器,点击右上角的那个灰色的按钮,然后选择更多工具,然后选择扩展程序,如下:
 
 
 
 
第三步:点击扩展程序之后,来到如下的界面,勾选右上角的“开发者模式”,然后,单击“加载已解压的扩展程序...”,如下:
 
第四步:进入文件选择界面,把我们刚刚在git上面下载的batarang的解压后的文件夹选择中,然后确定:
 
 
 
第五步:我们发现扩展程序下面就会多了一个angularjs batarang的扩展,如下:
 
 
第六步:重启chrome,也即关闭chrome,然后再打开chrome。然后,我们按下f12调出的开发者工具面板,会发现多了一个angularjs按钮,如下:
 
但是这里面什么都没有。一片空白,那么坑终于来了,下面我们一起来研究一下到底是怎么回事了。这时候,我们再次打开“扩展程序”面板,去看个究竟。我们会发现,batarang那里有个错误提示,如下:
 
 
 
 
然后,我们再点击那个错误去查看错误的原因,如下:
 
我们会发现,竟然报出了angular is undefined的错误,然后再点击在“开发者工具中查看”如上图红色所示,然后进入到开发者工具面板如下:
  我们会发现,全部的地方用到的angular都没有定义。这是怎么回事呢?是因为我们下载的是源代码,里面依赖的第三方模板还没有安装,那该怎么办呢?很简单,只需要在我们的解压的目录里面执行 npm install,安装好依赖之后,再导入浏览器就OK啦。
 
 

angular学习第一天——安装batarang踩到的那些坑儿的更多相关文章

  1. Oracle学习第一天---安装和基础入门

    国庆七天假,决定静下心来入门Oracle数据库. 环境:Ocacle 11g 软件安装包和安装图解,大家可以在我的百度网盘上下载:链接:http://pan.baidu.com/s/1ntjDEnZ ...

  2. Angular学习第一步

    前端开发越来越流行了,作为后端开发人员,也开始需要学习前端了.随着前端技术的发展,前端技术也越来越复杂,复杂程度不亚于后端,各种框架各种设计模式前端都用上了,什么AngularJS,Angular, ...

  3. python学习第一天 -安装配置及其输入输出

    Python, 是一种面向对象.解释型计算机程序设计语言. python适合领域: 1.Web网络和各种网络服务 2.系统工具和脚本 3.作为“胶水”语言把其他语言开发的模块包装起来方便使用 pyth ...

  4. Git学习第一天--安装Git和创建版本库

    Windows上安装Git msysgit是Windows版的Git,从https://git-for-windows.github.io下载(备份:百度网盘),然后按默认选项安装即可. 安装完成后, ...

  5. Oracle学习第一篇—安装和简单语句

    一 安装  10G ----不适合Win7 Visual Machine-++++Visual Hard Disk 先安装介质(VM)---便于删除 11G-----适合Win7 1 把win64_1 ...

  6. java 学习第一步---安装JDK以及配置环境变量

    1.下载jdk 链接:https://pan.baidu.com/s/1FiTGhxdHK0KTFawdkLT26g    提取码:zcy0    我已经在官网上面下载了1.8的jdk,通过百度云盘分 ...

  7. windows下 sbulime text 安装less2css踩的几个坑

    sublime 就不介绍了,less2css 是一个安装在sublime上的插件,可以让你书写less后自动生成css文件,而且还可以提示less的语法错误. 搜了一下相关的教程,很多都写的不全,按照 ...

  8. Java 学习第一步-JDK安装和Java环境变量配置

    Java学习第一步——JDK安装及Java环境变量配置 [原文]  2014-05-30 9:09  Java SE  阿超  9046 views Java作为当下很主流的编程语言,学习Java的朋 ...

  9. day1:java学习第一天之eclipse安装

    选择开发语言的学习其实不用纠结,如果你说自己是做开发的,连最流行的开发语言都不会,好像说不过去,并且最流行也说明用的人多,优秀的人也会,自己要提高要多向优秀的人学习.想明白这点其实选择就好说了,再一个 ...

随机推荐

  1. java中各种运算符的优先级

    最高级 1: var++和var-- 2:+ .- .(正负号,非加减).++var.--var 3:(type)强制转换 4:!(非) 5:*./.%. 6:+.-(加减运算) 7:<= .& ...

  2. 1.Python爬虫入门一之综述

    要学习Python爬虫,我们要学习的共有以下几点: Python基础知识 Python中urllib和urllib2库的用法 Python正则表达式 Python爬虫框架Scrapy Python爬虫 ...

  3. vue 手写组件 集合

    Num.1 :  链接 向右滑动, 显示删除按钮,  根据touchStart touchEnd 的 clientX 差距 > 30; 说明是向左滑动, 显示; 改变 e.currentTarg ...

  4. VS Code 使用小技巧

    所有插件查找地址(https://marketplace.visualstudio.com/) 编码快捷方式(http://docs.emmet.io/cheat-sheet/) 安装插件出现  错误 ...

  5. SQL注入之Sqli-labs系列第二十一关(基于复杂性的cookie POST报错注入)和二十二关(基于双引号的cookie POST报错注入)

    开始挑战第二十一关(Cookie Injection- Error Based- complex - string) 和二十二关(Cookie Injection- Error Based- Doub ...

  6. 微软Power BI 每月功能更新系列——4月Power BI 新功能学习

    本月Power BI Desktop的更新,除了常规的视觉和数据连接器改进之外,还有两个非常大的功能改进,交互式的报表.问答,用户直接在Desktop可以询问有关的数据问题,面对层出不穷的用户需求,这 ...

  7. python学习笔记第一周

    目录: 一.基础概念 1.变量与常量介绍 2.引号的使用 3.条件判断 4.while与for循环 5.input输入 6.getpass模块 7.python编码 二.作业 1.个人登录系统 2.多 ...

  8. ORA-03001,GATHER_TABLE_STATS数据库自动收集统计信息报错

    1.根据Alert报错信息,查询Trace日志 /oracle/app/oracle/admin/fgsquery/bdump/fgsquery_j001_11111.trc Oracle Datab ...

  9. [LeetCode&Python] Problem 404. Sum of Left Leaves

    Find the sum of all left leaves in a given binary tree. Example: 3 / \ 9 20 / \ 15 7 There are two l ...

  10. codefoce Cooking Time

    #include <bits/stdc++.h> using namespace std; struct T { // 贪心 优先弹出相邻靠后的材料 int id; int p; bool ...