Angular chrome 插件 Batarang 使用 - 推酷
Angular chrome 插件 Batarang 使用
Angular chrome 插件 Batarang ，它对于调试和找到性能瓶颈会很有效。安装后在开发者工具上会多出一个AngularJs选项。通过Enable复选框决定是否启用。
安装地址：
Models 作用域嵌套，可以从根对象一层一层深入到作用域内部。
可以看作用域是怎么嵌套的，以及模型是如何被添加到作用域上的。
Performance 性能
可以查看大量的作用域和模型对象的性能。
Watch Tree 监控树，点击树的节点，跳转至相应的element元素上。
Service Dependencies 服务依赖关系
通过图表把服务之间的依赖关系可视化
红线代表依赖
Options 提供一些选项，选择后在页面中用不同颜色实线表示。
Help 帮助信息，说明各个选项的作用。
Elements(元素) 标签的 Properties (属性) 有一个AngularJs Properties区域，用来检查绑定在特定元素作用域上的模型。
console 控制台
同时把元素的作用域展示在控制台中，可以在控制台中使用$scope变量来访问它。
输入$scope后，可以查看属性。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致AngularJs如何使用angular-chart和n3-line-chart这样的插件？
我是使用yeoman自动生成的angularjs框架,想在自己的单页面应用中加入图表元素
尝试一：angular-chart,()
跟随着教程一步一步来，到了angular.module('myModule', ['chart.js']);这一步卡住了,当我在对应的controller中这样写后，重新运行应用，发现页面上内容消失了，即ng-view的div块内没有内容了，但是console栏并没有报错。我也尝试了把['chart.js']写在app.js中，同样没有效果。
尝试二：n3-line-chart,();
同样，在 angular.module('myApp', ['n3-line-chart']) ;这一步卡住了，在对应controller中这样写后，重新运行应用，页面内容消失了，去掉这个['n3-line-chart']就好使。Angularjs 好用插件 - 简书
Angularjs 好用插件
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。它具有的特性有：
自动化双向数据绑定
语义化标签
bootstrap 是 HTML、CSS 和 JS 框架，让前端工程师可以更快速、简单的建立网站。在 angularjs 中使用 bootstrap，ui.bootstrap 是必备插件。其具体支持的有
js-data 是 angularjs 的模型层，是受 ember-data 所启发而制作的插件，它由一个方便的，与框架无关，内存缓存管理数据，然后使用适配器与各种持久层进行交流。使用它来建立模型，可以让代码的更加简洁、条理更加清晰，自然维护起来就更加方便了。
angular-notify 是 angularjs 简约并可扩展的通知服务。其基本有成功和失败两种样式。
text-angular 是一个轻量级的，双向绑定 angularjs 文本编辑器。其功能有：具有对图片的简单大小编辑、文本简单排版、插入视频、生成 html 代码等。但是它并不支持 markdown 语法编辑，并且插入图片不能选择图片上传功能，只能简单的插入网址，所以在应用到项目中，要根据需求使用或者对 text-angular 源代码进行修改使用。
angular-paginate-anything 是 angularjs 的一个分页插件。优点是可以在分页的同时动态的加载数据，有利于数据的请求速度和处理速度。这个在表格的处理上，将是个得力助手。
datetimepicker 是 angularjs 的时间选择器，精确到分。使用了 bootstrap 的样式，因此看起来也很美观，是个不错的选择。7
优秀生成器
由 yeoman 团队制作的 angularjs 生成器， 让我们快速建立具有合理的默认值和最佳实践的项目。与 ember-cli 相似，使用命令创建控制器、模型、过滤器等等的文件，非常的方便。项目结构按功能的方式划分，简单、易于找到代码的位置，有利于项目的维护。配上 angularjs 代码编写规范，那样代码会更加的清晰，这也是开发者们的一大福音。
a bug here您所在的位置： &
面向AngularJS开发人员的21款实用工作流工具
面向AngularJS开发人员的21款实用工作流工具
核子可乐译
最近一段时间以来，AngularJS已经成为Web领域人气最高的技术方案，而这要归功于其在简化Web应用程序开发方面所起到的良好收效。目前，AngularJS已经成为开发人员与技术爱好者社区当中最炙手可热的名头之一。在AngularJS的帮助下，我们可以构建起一系列Web应用程序及网站方案。如果各位朋友感兴趣，也推荐大家点击此处查阅《AngularJS学习免费电子书》来做好利用该技术进行开发的前期准备。
最近一段时间以来，AngularJS已经成为Web领域人气最高的技术方案，而这要归功于其在简化Web应用程序开发方面所起到的良好收效。目前，AngularJS已经成为开发人员与技术爱好者社区当中最炙手可热的名头之一。在AngularJS的帮助下，我们可以构建起一系列Web应用程序及网站方案。如果各位朋友感兴趣，也推荐大家点击此处查阅《AngularJS学习免费电子书》来做好利用该技术进行开发的前期准备。
AngularJS应用程序也能够被整合到其它现有系统或者项目当中。它同时也是一套强大的前端框架，可用于设计富用户界面（简称UI）。目前人气较高的AngularJS应用程序包括Ghost（一款博客平台，可不是与蕃茄花园并驾齐驱那款）、Goodfilms移动站点（一个电影回顾站点）以及CVsIntellect（一款简历制作应用）。
好了，如果大家已经身为一名AngularJS应用程序开发人员，那么肯定需要各类辅助工具帮自己更高效地进行项目创建。因此在今天的文章中，我们将共同了解二十一款极具实用性的AngularJS工具。这份清单当中包含有多款代码编辑器、测试工具以及扩展方案等等。下面一起来看。
AngularJS框架
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="498" height="312" alt="Ionic" class="alignnone size-full wp-image-6499" src="/wyfs02/M02/6E/B0/wKioL1WDbcTwMKVaAACwc6RZfps861.jpg" />
Ionic是一套开源前端框架，旨在利用HTML、CSS以及JavaScript实现移动应用程序开发。大家可以借此为AngularJS带来多种更为强大的能力，例如UI交互、手势操作与动画效果等等。此外，大家还可以生成动画与渐变系统，并为自己的应用程序设计启动画面与图标。Mallzee与Chef Steps就是两款利用Ionic开发而成的知名应用产品。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="497" height="316" alt="Supersonic" class="alignnone size-full wp-image-6500" src="/wyfs02/M00/6E/B4/wKiom1WDbBOTWGVzAADPIDJ35aI815.jpg" />
Supersonic是一款前端框架，专门用于开发数据驱动型混合应用程序以及面向移动设备的酷炫用户界面。除了大量CSS组件之外，大家还能够在Supersonic中以原生方式实现UI组件，例如导航栏、标签栏、抽屉、信息卡以及网格系统等等。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="494" height="318" alt="Lumx" class="alignnone size-full wp-image-6501" src="/wyfs02/M02/6E/B4/wKiom1WDbBWiC4DMAACxtFRUlI0421.jpg" />
Lumx是一款基于AngularjS与谷歌Material设计原则的响应式前端框架。它是一款强大的JavaScript MVC框架，能够以轻松快捷的方式创建出单页面应用程序。大家还可以利用LumX在开发成果中加入流畅动画、日期选择、通知、下拉菜单、文本字段、滚动条以及其它多种功能。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="499" height="314" alt="Radian" class="alignnone size-full wp-image-6502" src="/wyfs02/M01/6E/B0/wKioL1WDbciRKvlxAABncLfGsOA723.jpg" />
Radian是一套AngularJS框架，合适处理多种开发项目。在Radian的帮助下，大家可以将一款AngularJS应用程序拆分成多个可管理的去耦组件，从而将代码的抽象及模块化水平提升到新的层面。Radian基于AMD架构（即异步模块定义）且允许大家将其用于应用程序测试。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="481" height="308" alt="Mobile" class="alignnone size-full wp-image-6503" src="/wyfs02/M00/6E/B0/wKioL1WDbc2hrqvvAACeKrcuVvo436.jpg" />
Mobile Angular UI是一款前端框架，旨在利用Bootstrap 3与AngularJS构建HTML 5移动应用程序。这套框架提供大量Bootstrap 3移动组件，其中包括开关、覆盖、侧边栏以及导航栏等等。目前利用Mobile Angular UI开发的热门应用程序包括Hotelier News以及Good Doctor。
AngularJS代码编辑器
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="498" height="314" alt="Sublime" class="alignnone size-full wp-image-6504" src="/wyfs02/M01/6E/B4/wKiom1WDbB3AFhK2AAD7uqvuRy0550.jpg" />
Sublime Text是一款面向代码、标记与内容整理等工作的跨平台文本编辑器。它提供多种可定制选项，帮助大家进行按键绑定、代码补全、片段、宏以及其它常见操作。在Sublime Text的支持下，我们可以实现变更缩进设置、在编辑过程中进行多重内容选定并变更语法等等。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="493" height="316" alt="CodePen" class="alignnone size-full wp-image-6505" src="/wyfs02/M00/6E/B4/wKiom1WDbCDAnRWaAACi6-GpHv8529.jpg" />
CodePen是一款面向前端Web开发工作的HTML、CSS以及JavaScript代码编辑器。它提供多种功能，具体包括代码审查、调试、实时代码编辑以及协作等。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="515" height="307" alt="JS Fiddle" class="alignnone size-full wp-image-6506" src="/wyfs02/M02/6E/B0/wKioL1WDbdThaNxAAACtC7QyGyU552.jpg" />
JS Fiddle是一款在线代码编辑工具。大家可以利用各自独立的面板分别执行JavaScript、CSS、HTML以及输出代码。大家还可以利用JS Fiddle实现代码片段共享、代码审查、测试、调试以及实时协作等功能。
AngularJS IDE
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="497" height="314" alt="Webstorm" class="alignnone size-full wp-image-6507" src="/wyfs02/M01/6E/B0/wKioL1WDbdfCp7wEAAD201IcXTo459.jpg" />
Webstorm是一款极具人气的JavaScript集成开发环境（简称IDE），允许用户利用Node.js实现客户端/服务器端开发工作。这款工具还内置一款代码编辑器，支持Compass、AngularJS、HTML以及CSS等等。它亦能够实现一系列功能，例如错误检查、重构与代码补全等。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="499" height="317" alt="Aptana" class="alignnone size-full wp-image-6508" src="/wyfs02/M02/6E/B4/wKiom1WDbCjTt0dHAAFKOiA15-A229.jpg" />
Aptana是一款开源的Web应用集成开发环境（简称IDE）。这款工具允许大家构建、测试、编辑、审查并调试HTML、CSS以及JavaScript代码。这款工具基于云环境且拥有高度可定制特性。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="497" height="245" class="alignnone size-full wp-image-6509" alt="Appery" src="/wyfs02/M01/6E/B4/wKiom1WDbdiCAuUsAAEQ_q3YmOw230.jpg" />
Appery是一款基于云的平台，旨在利用公有/私有云选项开发移动及响应式应用程序。大家可以利用它构建起多种iOS、HTML 5以及Android应用程序。这套集成开发环境（简称IDE）还提供可视化编辑器，帮助大家通过简单的拖拽操作利用jQuery Mobile、Angular JS、HTML 5以及Bootstrap组件构建起富用户界面。
AngularJS测试工具
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="496" height="315" class="alignnone size-full wp-image-6510" alt="Protractor" src="/wyfs02/M00/6E/B4/wKiom1WDbdmSh2miAAD70ij7fcQ713.jpg" />
Protractor是一款专门面向AngularJS应用程序的Node.js测试框架。在Protractor当中，其提供一套利用JSON Webdriver Wire协议控制的浏览器，能够以异步方式执行查找及DOM元素交互等操作。因此，它允许大家对各类运行在真实浏览器之内的应用程序进行测试&&正如用户的实际使用过程一样。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="494" height="310" class="alignnone size-full wp-image-6511" alt="Mocha" src="/wyfs02/M02/6E/B0/wKioL1WDb42x7uRpAACFf9gPpH4362.jpg" />
Mocha是一套面向Node.js与该浏览器的JavaScript框架。它同时支持行为驱动与测试驱动两类开发方式。Mocha使得异步代码测试变得非常便捷，而且支持使用任意断言库。Mocha还提供多项定义功能，例如：
&&&& 元生成套件与测试用例
&&&& 将未捕获异常映射至正确测试用例
&&&& 可扩展报告
&&&& 测试特定超时
&&&& 支持节点调试工具
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="494" height="313" class="alignnone size-full wp-image-6512" alt="Code" src="/wyfs02/M01/6E/B0/wKioL1WDb5CikvW7AADXmkKy6Mw784.jpg" />
Code Orchestra是一款用于对移动/Web应用程序进行测试及构建的开发工具。它以程序方式起效，允许用户实时编写代码。当大家编辑代码并点击保存时，相关修改内容会被直接交付至运行中的应用程序。它同时可与AngularJS等多种主流Web技术协作，且支持全部IDE方案。
AngularJS扩展
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="503" height="317" class="alignnone size-full wp-image-6513" alt="ng-inspector." src="/wyfs02/M02/6E/B4/wKiom1WDbeCQC6_6AABhGUCmR3M470.jpg" />
ng-inspector提供一套监督控制面板，用于对AngularJS应用程序进行开发与调试。它属于一款面向Chrome、Safari以及火狐等平台的浏览器插件。该扩展提供DOM高亮显示、层次范围查看、范围模式查看等，且完全以实时方式更新。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="499" height="315" class="alignnone size-full wp-image-6514" alt="Angular-gettext" src="/wyfs02/M01/6E/B4/wKiom1WDbeazr8pVAAFF-p_ukZo198.jpg" />
Angular-gettext是一款面向AngularJS应用程序的翻译工具。它支持超过130种不同种类的语言。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="498" height="295" class="alignnone size-full wp-image-6515" alt="Eclipse" src="/wyfs02/M00/6E/B0/wKioL1WDb5uybHGzAADqM4dmlds437.jpg" />
Eclipse是一套面向Java开发人员的集成开发环境（简称IDE）。不过我们可以利用各类插件轻松对其进行扩展，从而支持多种编程语言，包括JavaScript、Python以及Ruby。AngularJS Eclipse插件能够对Eclipse WTP（即Web工具平台）进行扩展，从而将其转化成一套支持AngularJS表达与命令、Angular Explorer视图的HTML编辑器外加JavaScript编辑。
AngularJS库
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="502" height="312" class="alignnone size-full wp-image-6516" alt="Angular Fire" src="/wyfs02/M02/6E/B0/wKioL1WDb53iUKFwAACtQ7t7O48674.jpg" />
Angular Fire是一套AngularJS代码捆绑方案，用于将Firebase后端与AngularJS应用程序相对接。Firebase是一套Web应用程序开发框架，其主要产品就是Angular Fire&&AngularJS的一套开源库。Firebase SDK与Angular Fire能够提供三向数据绑定、快速数据同步、内置验证与用户管理服务以及免费托管等功能。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="497" height="331" class="alignnone size-full wp-image-6517" alt="Polymer" src="/wyfs02/M00/6E/B4/wKiom1WDbe3BBy6gAAC8qykU89I897.jpg" />
Polymer是一套用于扩展HTML词汇的库。它提供一套声明式语法，能够便捷地对定制化元素进行定义。除此之外，它还提供其它多种功能，例如模板、双向数据绑定以及属性观察等。因此，它能帮助大家以更为精简的代码构建起可以重复利用的Web技术元素。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="498" height="236" class="alignnone size-full wp-image-6518" alt="Twitter Bootstrap" src="/wyfs02/M02/6E/B4/wKiom1WDbe_SrzvmAADRutVArnM888.jpg" />
Twitter Bootstrap是一款高人气HTML、CSS以及JS框架，主要用于面向移动设备的Web应用程序开发任务。UI Bootstrap通过提供一系列基于Bootstrap标记与CSS组件的原生Angular JS命令发挥出Twitter Bootstrap的强大能力，其中包括Accordion、Alert、Carousel、Cooapse、Timepicker以及Dropdown等等。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="503" height="240" class="alignnone size-full wp-image-6519" alt="Angular UI Router" src="/wyfs02/M01/6E/B0/wKioL1WDb6PhnmWlAAEn8uSv6dU896.jpg" />
Angular UI Router是一款面向Angular JS命令的原生库。它作为Angular JS的路由框架起效，能够将界面拆分成一套状态机。它的主要优势体现在强大的状态与视图折叠能力。
我已经把自己整理出的一切有价值信息都囊括在了文章当中。但是可以肯定，目前大家常用的AngularJS工具、扩展及测试方案还有很多。如果各位在实践过程中积累到了其它出色的选项，请在评论栏中与我们分享。
原文链接：
/useful-workflow-tools-for-angularjs-developers/
原文标题：21 Useful Workflow Tools for AngularJS Developers
核子可乐译
【编辑推荐】
【责任编辑： TEL：（010）】
关于&&的更多文章
Angular.js 是一个MV*（Model-View-Whatever，不管是MVC或者MVVM
随着云计算、物联网、大数据、移动互联网的大发展，你应该知道这些。
讲师： 6人学习过讲师： 3人学习过讲师： 27人学习过
怎样尽可能的缩短浏览器上页面渲染的时间？我们可以从
这周的头版头条是“双十一”。凌晨12点守在电脑前抢东
Angular.js 是一个MV*（Model-View-Whatever，不管是M
本书以轻松幽默的笔调向读者论述了高质量软件开发方法与C++/C编程规范。它是作者多年从事软件开发工作的经验总结。本书共17章，
51CTO旗下网站