棱角分明的角落
棱角分明的角落
原文：https://medium.com/hackernoon/edgy-corners-of-angularjs-f61e5bb295cc
确切地说，对于 1.x 版本，我不是在这里歌颂 BackboneJs 或 KnockoutJs，我也不想在它们之间进行比较，但在使用它大约两年后，有时我想我希望有人应该事先告诉我这个尖锐的角落。
著名的 AngularJs 学习曲线
我和我的许多 JavaScript 开发者朋友都经历过这种情况。有几次，我们以为我们几乎知道它是如何工作的，而第二天，砰！一些新的东西出现了，我们去了 WTF！我们从来没想过。
1.双向数据绑定
意思是:
- 当模型中的属性更新时，UI 也会更新。
- 当 UI 元素得到更新时，更改会传播回模型。
许多开发人员没有意识到的是，仅仅因为它看起来很酷，给人一种哇！对您应用程序的影响并不意味着您需要双向数据绑定，它的成本非常高，因为这是通过脏检查和摘要周期实现的。
脏检查:
在每个浏览器事件上运行一个摘要循环，从字面上评估应用程序中的每个表达式(真的！)并且如果它发现该表达式的值已经改变，它更新表达式的值。所有这些都发生在眨眼之间，所以你不会真的看到浏览器延迟，但当当前 DOM 结构上的表达式达到 2000 时，你就能看到问题了。
解决方案:
几个月前，Google 发布了 AngualrJs 1.5.x，它具有单向数据绑定特性，可以帮助最小化这个问题
消化周期:
我们已经讨论了 digest cycle 的问题，但是我所面临的最大问题之一是，当一些东西在 AngualrJs 的范围之外发生变化时，我们必须手动调用一个低级 API $scope。$apply()同时，如果 Anguar 已经自动启动了“已经在进行中”的摘要循环，将会弹出一个错误，它会让你崩溃！
解决方案:
尚未找到。
2.依赖注入
在中，角度依赖项是通过参数的名称注入的。
function MyController($scope, $window) { // … }这里角称。toString()，获取参数的名称，然后在包含所有现有依赖项的列表中查找它们。
看不出问题吗？
- 尝试缩小您的代码，它将停止工作。
- 即使您偶然错过了一个依赖项，AngularJs 也不会运行，您会在屏幕前看到一个空白页。
- 忘记惰性加载，你必须在调用 angular.bootstrap 之前加载所有的依赖项。
解决方案:
您可以使用以下语法…
someModule.controller(‘MyController’, [‘$scope’, function($scope) { }]);或者这个
MyController.$inject = [‘$scope’, ‘$document’];或者使用类似 ng-annotate 的插件。
3.排除故障
JavaScript 中的调试有时令人头疼，但 AngularJs 让它变得更加困难，
<div ng-repeat=”user in users”> {{ user }} </div>如果在这个绑定中有任何错误，而不是在控制台中显示，元素不会被添加到 DOM 中，因为绑定中的错误根本不会触发，因为 JavaScript 中发生的错误被内部角度拦截器捕获，并且被浏览器解释为捕获的错误！哼！
解决方案:
尚未找到。
4.指令和所有不必要的复杂性
指令:
每个人都为他们疯狂，人们只是因为某些原因崇拜他们！但是我很务实，这里是指令声明的完整语法。要理解这个语法以及为什么需要它，真的要花很多时间。不是写做什么，而是想怎么做。可悲的是，复杂性是无用的。没有逻辑上的理由将 3 个方法的逻辑分开(编译、链接、控制器)，所有这些都可以很容易地在一个方法中实现。还要考虑到有些函数得到作用域，有些没有，有些只执行一次，有些每次都用$digest 循环，而且每个指令也有优先级。即使为了在 angular 世界中集成一些代码，您也需要将其包装在一个指令中。现在不要误解我，一旦你掌握了它们，它们是有史以来最棒的东西，但是框架应该让开发者的生活变得简单而不是复杂。
解决方案:
努力练习和学习它们，期待它会有回报。
无法进行服务器端渲染:
如果你试图使用服务器端渲染，例如为了加速页面渲染，或者为了 SEO(或者两者都是)，那么你会失望的！
解决方案:
您将需要使用 prerender.io(该服务解析您的部分内容，并为您提供应该提供给爬虫的 HTML 文件)。但是，啊——这是一个黑客，而不是问题的解决方案！
做同一件事的方法太多:
Angular 提供了很多方法来做同样的事情，比如不同种类的服务(工厂、服务、提供商)。还有几种使用指令的方法(元素、属性、注释、相同范围、无范围、隔离范围)，以及几种使用控制器的方法。
所有这些都增加了复杂性、新开发人员的学习曲线、缺乏约定以及缺乏最佳实践来实施。这对 angular 周围的生态系统，无论是用户开发者还是库开发者，都是不利的。
5.路由器:
AngularJs 使用 ng-router 进行路由，正如你可能知道的那样，它使用起来相当简单，但它缺乏基本功能(嵌套视图和状态)，因此，为此你需要使用 Angular-ui router，它非常完美，我已经在许多项目中使用过它，但开始使用它非常困难，有时你需要使用其他库来使用 Angular ui router。
让我们搞清楚，你正在使用 AngularJs 来解决你的问题，你现在正在使用 ui 路由器来解决路由问题，并且使用其他第三方(或第四方)库来与 Angular ui 路由器(pheww)一起工作..
现在，我知道 AngularJs 如何没有被设计成今天的样子，它已经有机地成长起来，但这些都是一些早就应该解决的粗糙边缘。
现在不要误解我，我喜欢 AngularJs，我仍然推荐给那些应用程序架构需要它的人。我已经开始在 Angular 2.0 中制作小应用程序，这些问题大部分都不存在，所以如果你是 Angular 新手或者还没有开始开发，你可以使用 1.5.x 版本或 2.0 版本(显然在稳定发布后！)
感谢阅读。我们非常感谢您的反馈和意见。
干杯，
沙希瓦特
