如何使用batarang调试angularjs

AngularJS的官方网站上给出了这个框架的基本使用方法，如：

如何引入AugularJS，从而让你的web应用使用该框架

如何添加控件，并对其进行数据绑定

如何进行表单验证

如何与服务器通信

如何创建可重用的组件

如何对组件进行本地化

如何让应用可嵌入、可注入和可测试

另外，网站上还给出了一系列教程，跟随这些内容，我们可以从深入浅出地逐渐对AngularJS的各种特性和用法有很好的了解，进而很好地开始使用这一框架。

但是，正如Brian Ford所说，官方文档中并没有告诉开发者，当应用逐渐增长，其中包含上万甚至几十万行代码的时候，应该如何组织和管理它，而他的blog正是对这些内容以及最佳实践的总结。

这篇blog特别关注的是大型应用程序，作者首先给出的建议是，尽量不要让应用变得太巨大。而应该编写小型、功能专注的、模块化的部分，然后逐渐把它们组合起来，变得越来越大，从而构成你的应用。

接下来，Brian Ford首先讲述了如何组织应用的结构，然后对性能、测试、工具、服务器和构建过程做了简要的总结。

在应用的组织结构方面，Brian Ford针对各个方面给出如下建议：

目录：建议在根目录中只放置indexhtml一个文件，然后根据需要创建scripts、styles、views等目录，在scripts目录下，首先会存放appjs文件，然后在之下又可以创建多个子目录，如：controllers、directives、filters、services、vendor等，在其中分门别类地存放不同的内容。并且，随着你为应用创建更多内容，也许会增加更多子目录来存放各种文件。

文件：每个文件中应该只有一件事物，这件事物可能会是控件、指令、过滤器或者服务等等。这会生成比较小但更专注的文件。也有利于更好地进行测试。

模块：首先在appjs中定义和配置所有模块，如：

angularmodule('yourAppName', ['yourAppDep']);

angularmodule('yourAppDep');

然后在模块中定义控件、服务等，如：

angularmodule('yourAppDep')controller('MyCtrl', function () {

//

});

依赖关系：一般来说，服务、控件、指令等应该拥有尽可能少的依赖关系，这是非常好的软件开发实践，会有助于测试。API应该分层。控件尤其不能综合多种不同级别的抽象。

指令：对指令使用app专用的前缀，这有助于避免与第三方的组件重名。例如下面的代码中就用“btla”作为前缀：

angularmodule('yourAppDep')directive('btlaControlPanel', function () {

//

});

服务：你可以使用下面的方式声明服务：

angularmodule('yourAppDep')service('MyCtrl', function () {

//

});

模型：AngularJS作为JavaScript框架，其独到之处就在于让你可以完全掌控模型层。这是AngularJS的强大之处，因为应用程序的核心是你的数据，而各种应用之间的数据又有很大区别。所以Brian Ford强烈建议要仔细考虑使用和中数据，以及将会如何存储数据。

控制器：建议控制器以“Ctrl”开头，如：

angularmodule('yourAppDep')controller('MyCtrl', function () {

//

});

除了上述内容，Brian Ford还在文章中针对性能、测试等方面给出了各种建议：

在性能方面，AngularJS应用一般会非常非常快。大多数应用不需要做任何特殊的优化，因此，除非你发现严重的性能问题，否则就应该把时间花在其他方面来改善应用。

对于大型项目来说，测试非常重要。它让你可以自信地进行重构，而这对于保持大型项目代码整洁非常重要。大型应用应该既拥有单元测试，也要拥有端到端（end-to-end）测试。单元测试有助于定位问题，而端到端的测试能够确保整个应用像期望的那样工作。每个控制器、服务、过滤器和指令都应该拥有一系列单元测试。而应用的每个特性都应该拥有端到端的测试。

在工具方面，首先推荐使用Yeoman，从而获得最佳实践和很好的项目结构，另外还有AngularJS Batarang，它对于调试和找到性能瓶颈会很有效。

在服务器方面，你可以使用任何想要的服务器和AngularJS协作。它只是客户端的程序库。我的推荐和喜欢的设置是使用Nodejs加nginx。我使用nginx存放静态文件，使用Nodejs创建RESTful的API和嵌入的（socketed）应用。对于云提供商，我曾经成功使用过Nodejitsu 和Linode。前者会让你更容易地部署程序，你不需要关心服务器的环境。如果你需要对服务器环境有更多控制，那么Linode会让你从底层控制虚拟机。Linode还提供了很好的API，可以用来管理虚拟机。

构建过程方面，我认为Angular还需要做更多改进，我在2013年最大的目标就是要对此有所贡献。我已经发布了ngmin，希望这个工具可以最终解决为生产环境最小化AngularJS应用的问题。

……

最后，Brian Ford做出结论：AngularJS是一种非常适合编写大型应用的JS框架。你可以直接拿来使用，它很快，并且会对组织应用的结构很有帮助。

Angularjs中的routeProvider的resolve的作用是渲染模板的。

Angularjs 中的 $qProvider 的 resolve 没有执行的话，模板就不会渲染。

AngularJS试图成为WEB应用中的一种端对端的解决方案。这意味着它不只是WEB应用中的一个小部分，还是一个完整的端对端的解决方案。这会让AngularJS在构建一个CRUD（增加Create、查询Retrieve、更新Update、删除Delete）的应用时显得很“固执”（原文为 opinionated,意指没有太多的其他方式）。但是，尽管它很“固执”，它仍然能确保它的“固执”只是构建应用的起点，并且仍能灵活变动。AngularJS的一些出众之处如下：

构建一个CRUD应用可能用到的全部内容包括：数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。

测试方面包括：单元测试、端对端测试、模拟和自动化测试框架。

具有目录布局和测试脚本的种子应用作为起点。

AngularJS 2 尽管还在Alpha阶段，但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别，以及新的设计目标将如何实现。

1从移动app开发上面分析：

Angular 1x 专注于web开发，没有涉及到移动这方面的内容，还好后来杀出个程咬金IONIC移动app开发框架，让angularjs1x很好的支持了移动开发

Angular 2目标：原生移动支持 – iOS 和 Android

Angular 2 会有两层，应用层和渲染层。例如一个组件可以用不同的 @View 修饰器修饰，根据运行环境可以在运行时生效。

与 React Native 一样，Angular 2 支持：

一次学习，到处书写。

这意味着创建原生应用时可以重用你在创建 web 应用时学习的知识。尽管总是有些区别。

2从服务器端渲染提供支持分析：

支持服务器端的渲染对于搜索引擎的优化和用户感知体验来说是非常重要的；在一个比较大型的Angular 1 的应用中，即使使用了预先定义的缓存模块，我们可以清楚地看到当应用开始启动时，页面的加载过程。

这时候看来 Angualr2 的这部分特征不是很清晰明朗，但是这种思路或许可以从以下几个方面得到体现：

启动开始， 同时所有的组件都被绑定

而渲染没有实现

一个页面在服务器被渲染后 ， 然后发送到客户端

Angular 将会把它解析 ，接着会吧解析后的页面注入到 DOM 中，这样就避免了出现闪烁的效果

3从依赖注入分析

在Angular 1 的世界里，依赖注入在构建多模块应用时是一项技术的飞跃， 但是在一些极端的案例中，如果不做出一些重要的变化是不能解决这些问题的。

Angular 1x 包含对象全局池

Angular 1 其中一个 DI 案例中每个应用仅有一个对象全局池。这就意味着，如果说主路由 loadsbackendService 我们导向了路由 B，可以延迟加载其他服务指定到这个路由。

问题就是，我们说可以延迟加载一个 secondbackendService，使用完全不同的实现：这就会重写第一个！当前还没有办法同一名字有两个不同实现的两个服务，这就会阻止用一个安全的方式从 Angular 1 实现延迟加载。

Angular 1 会静默重写模块，当他们有相同的名字

这是一个特性，允许在测试的时候模拟替换服务层的服务，但是如果恰巧在同一模块加载了两次就会发生问题。

Angular 1x 的多重依赖注入机制

在 Angular 1 中， 我们可以使用在多重地方使用不同的方法进行注入：

在链接方法中通过位置注入

在直接定义中通过名字注入

在controller方法中通过名字，等等。

Angular 2 将会作出怎样的该进

而在 Angular 2 中有且仅有一种依赖注入机制： 在构造函数中通过类型注入。

constructor(keyUtils: KeyboardUtils) {

thiskeyUtils = keyUtils;

}

});

事实上，如果只有一种机制，那么它将变得更加容易学习。同时这种依赖注入器是类似层级结构，在不同层次的组件树，有可能实现对相同类型的不同实现。

如果一个组件没有定义依赖，它会代理给上层注入器查找依赖，依次往上。这让 Angular 2 提供原生的懒加载成为可能

4从主要目标分析

Angular 2 的主要目标是创建一个简单易用并且快速工作的 web 框架。让我们看看这是如何达到的：

目标：更易于推论

在当前版本的 Angular 中，我们有时不得已对应特定的使用场景推论框架内部构建，比如必须推论应用事件初始化和摘要循环：

在 Angular 1 中没有摘要循环结束事件 (查看原因)，因为这种事件可能会促发更多的变化，以至于使摘要循环持续下去

我们必须推论何时调用 $scopeapply 或 $copedigest，而这并不总是容易的

有时我们必须调用 $timeoutto让Angular 结束摘要循环，当 DOM 稳定时再做一些 *** 作

为了使 Angular 2 更易于推论，一个目标是创建更多开箱即用的透明内部构建。开始之前，让我们看看 Angular 1 的绑定机制是如何实现的，然后如何使它更透明。

话说：Angular1x显然非常成功，那么，为什么要剧烈地转向Angular2？

1性能的限制

AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移，各种特性 被加入进去以适应不同场景下的应用开发。然而由于最初的架构限制（比如绑定和模板机制），性能的 提升已经非常困难了。

2快速变化的WEB

在语言方面，ECMAScript6的标准已经完成，这意味着浏览器将很快支持例如模块、类、lambda表达式、 generator等新的特性，而这些特性将显著地改变JavaScript的开发体验。

在开发模式方面，Web组件也将很快实现。然而现有的框架，包括Angular1x对WEB组件的支持都不够好。

3移动化

想想5年前现在的计算模式已经发生了显著地变化，到处都是手机和平板。Angular1x没有针对移动 应用特别优化，并且缺少一些关键的特性，比如：缓存预编译的视图、触控支持等。

4简单易用

说实话，Angular1x太复杂了，学习曲线太陡峭了，这让人望而生畏。Angular团队希望在Angular2中将复杂性 封装地更好一些，让暴露出来的概念和开发接口更简单。

是angularjs版本的问题，采用136版本。

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

《AngularJS权威教程》（[美] Ari Lerner）电子书网盘下载免费在线阅读

资源链接：

链接：>  提取码：fxlg    

书名：AngularJS权威教程

作者：[美] Ari Lerner

译者：赵望野

豆瓣评分：73

出版社：人民邮电出版社

出版年份：2014-8

页数：476

内容简介：本书是资深全栈工程师的代表性著作，由拥有丰富经验的国内AngularJS技术专家执笔翻译，通俗易懂、全面深入，是学习AngularJS不可错过的经典之作。无论是出于工作需要，还是好奇心的驱使，只要你想彻底理解AngularJS，本书都会让你感到满意。

本书将涵盖AngularJS的如下概念。

双向数据绑定

依赖注入

作用域

控制器

路由

客户端模板

服务

通过XHR实现动态内容

测试

过滤器

定制表单验证

深度测试

定制指令

专业工具

对IE的支持

作者简介：作者简介：

Ari Lerner

是一位全栈工程师，拥有多年AngularJS经验，自办并运营AngularJS电子报ng-newslettercom，在著名硅谷工程师培训学校Hack Reactor担任AngularJS讲师。他的工作涉及软件开发的各个层次，包括基础设施开发、前端应用开发和性能优化。他目前住在旧金山一个阳光明媚的地方，还是FullStackio创始人。

译者简介：

赵望野

前端工程师，前端基础技术组leader，曾经负责豌豆荚20的前端架构设计和主要开发工作，目前负责Front-end Technical Infrastructure的建设，在工作中有丰富的AngularJS使用经验。新浪微博@赵望野。

徐飞

2005年至今一直从事企业应用前端架构，对富因特网应用有较深刻的认识，致力于前端的高效开发，研究过Backbone和AngularJS的源码，翻译过讲解AngularJS基本原理的文章，对脏数据检测和基于存取器两种监听方式的差异有深刻认识。

何鹏飞

网名basecss，目前就职于腾讯CDC，任前端工程师。喜欢阅读，喜欢前端技术，崇尚开源。工作之余翻译过Grunt和Lesscss相关文档，同时也是Lesscss中文社区贡献者。

waiting 时间太长－－－－ 查看waiting 的意思，以及TTFB，

TTFB ，是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送>

常用的表单验证指令

1 必填项验证

某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

<input type="text" required />

2 最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：

<input type="text" ng-minlength="5" />

3 最大长度

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"：

<input type="text" ng-maxlength="20" />

4 模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：

<input type="text" ng-pattern="/[a-zA-Z]/" />

5 电子邮件

验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：

<input type="email" name="email" ng-model="useremail" />

6 数字

验证输入内容是否是数字，将input的类型设置为number：

<input type="number" name="age" ng-model="userage" />

7 URL

验证输入内容是否是URL，将input的类型设置为 url：

<input type="url" name="homepage" ng-model="userfacebook_url" />

以上就是关于如何使用batarang调试angularjs全部的内容，包括:如何使用batarang调试angularjs、Angularjs中的routeProvider的resolve的作用是什么、AngularJs 1.x和AngularJs2的区别等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！