一些AngularJS相关的编程思想简介

在过去的几个月里，我一直在角世界旅游，现在回想起来，这是很难想象我会写一个大的前端应用每天数据绑定框架像Angular.js，backbone.js及其合作伙伴的底线。JS。我不能相信我和他们做的工作。

也许我有点偏见，但考虑到我所做的一切是在浏览器中实现PS图象处理软件式编辑。它有几种完全不同的方法来渲染相同的数据。

图层以图形形式呈现，占据了大部分屏幕，它们被列在面板中，您可以删除它们。
当你选择一个图层时，它的边缘被一条虚线包围，它会在列表中高亮显示。
同样，面板中的层的大小和它们的大小取决于画布。
我上面提到的面板可以被拖拽、折叠和关闭。

如果没有一个框架，像Augular一样，这种交互，数据连接，并查看同步可以很容易地成为一个持续的噩梦。到当地的模型修改和纠正所有相关的观点与角度听起来几乎像一个作弊的能力。加入，消除或改变水平问题就是改变对象。水平，x = 10，完成。没有地方手动取消，手动修改每一个实例中的DOM级别，甚至与DOM因为这个问题。

角让我们去到我们从未想到的地方，比如设置一个快捷键盘，使我们能够在现有环境中进行应用。例如，文件编辑快捷键（如B：切换黑体文字）使我们编辑一个文件。
类似地，我们将这些快捷键添加一个描述（通过注册我们创建的服务），然后我们可以在快捷栏上显示快捷键的列表以及它们的描述。此外，我们编写了一个指令，以便将单独的DOM元素绑定到它们的快捷键。当鼠标停留在元素上一段时间后，会有提示让您知道此时可用的快捷键。

天使可以让我们做我们做梦都没想到的事。
说实话，我们并不是在写Web应用程序，Web只是一个媒介，当我们提高了对角的理解时，代码变得更模块化，更独立，更连接到交互，它自然变得更加棱角分明。
然后通过角，我指的是高度互动性和丰富的应用开发理念落后augular.javaｓｃｒｉｐｔ，类似的事情，让我们开发软件的部分，我们仍然觉得不可能一会儿前。
我们甚至已经发展成熟的历史控制板改变DOM成历史上选定的点，使它工作的很好的能力，至少可以说，当你回到历史控制板的兴奋，检查那些角能力的相关数据，并更新每一个微小的细节在你看来完美的工作。

这并不总是容易的，基本代码总是变成一个无休止的混乱。
事实上，在过去的几周里，我们一直在更新和重写我们的前端的整个架构。在我们开始重写，看看更新角的优势因为0.10.6.if你看看更改日志的过程中，你知道这是一个非常漫长的过程。

在这个重构过程中，我们以一种错误的方式对待角度，以一种角度的方式。

在我们的例子中，有许多问题是错误的。在我们把代码库放在可爱的状态之前，我们必须解决这些问题。

在全局范围声明控制器（控制器）中

这是一个角度初学者很容易做的例子。如果你熟悉角，你会熟悉这个模式。

在window.loginctrl / /风…
无功loginctrl =函数（美元范围，DEP1，DEP2）{
作用域/默认值
}；

（loginctrl.prototype.resetpassword =功能）{
密码按钮单击处理程序
}；

在这一点之后
loginctrl注入= {美元。美元范围，DEP1，'dep2}；
此代码不包含在闭包中，或者，所有的声明都在根范围内，全局窗口对象，混蛋，真正的角度方法是使用它提供的模块API（API），但是正如您所看到的，甚至文档和建议步骤都过时了，建议您使用全局范围：

这样，伟大的事情就会发生。

您的应用程序的控制器
Var XmplController =函数（美元范围、迎宾、用户）{
scope.greeting美元= greeter.greet（用户名称）；
}
Angular.js的文件

使用模块（模块）允许我们以以下方式重写控制器（控制器）：

Angular.module（'myapp）。控制器（'loginctrl，
美元的范围，'dep1 '，'dep2，
功能（美元范围，DEP1，DEP2）{
严格使用；

作用域/默认值

（$ scope.resetpassword =功能）{
密码按钮单击处理程序
}；
}
}）；
我发现了一个美丽的实践使用角控制器，您必须在所有地方使用控制器（控制功能），因为该方法依赖于你需要控制注射，但也提供了新的控制范围，我们会从需求来包装我们所有的脚本调用的函数（自我表达自我调用函数表达式），这样（function（）{ }）（）。

依靠注入

在第一个示例中，您可能已经注意到，依赖于注入注入的使用。另一方面，大多数API模块允许您将一个函数作为参数，或者将一个依赖数组作为一个参数，然后依赖于这些依赖函数。这是我的一点爱，但这应该是错的。在大多数情况下，文件在你的文件，不需要一个参数数组形式；但现实是你需要的。如果你不跑ngmin之前你使用压缩机来压缩你的代码，事情会变得更糟。
因为你没有使用数组格式{ $范围，…}宣布你的依赖包，显然，你看起来简洁的方法参数会降低到类似于B，C，D和E，有效杀死角的依赖注入的能力。我认为他们在建立框架做出了重大的错误，这是类似的，我不喜欢Require.js和他们的麻烦和模块最后的结论。

如果他不能在产品中使用它，有什么用呢

我的态度是因为你使用的产品框架，有些代码已经写的。这是实用的工具，经常被用于发展和偶尔使用产品的使用，如控制台和错误报告。如果语法甜蜜（可读性）仅用于的发展，它将变得毫无意义。

我对这些事很生气，现在一切都结束了。谈论美元…

减少jQuery扩散

在深度上，这个应用程序是类似于角的程序

如果我要写一angular.js今天从零开始应用，我不会立即包括jQuery，我会强迫自己用angular.element相反。

如果jQuery的存在，angular.element API将它包起来，并将角团队实现jQuery API，提供另一种选择jqlite命名。这并不意味着jQuery是坏的，或者说我们需要一个实现地图API。只是因为使用jQuery似乎没有角的想法。
让我们来看一个具体的、愚蠢的示例，在声明控制器的地方，它使用jQuery在元素之上执行类操作。

Div.foo（NG控制器= 'fooctrl）

Angular.module（'foo）。控制器（'fooctrl功能（范围）{）
$（'。foo）。AddClass（'foo-init）；

美元美元范围。（看功能（）{（）{
$（'。foo）。ToggleClass（'foo-something-else）；
}）；
}）；
但是，我们可以使用我们希望使用角的方法来代替。

Angular.module（'foo）。控制器（'fooctrl功能（美元范围，$元）{
element.addclass美元（'foo-init）；

美元美元范围。（看功能（）{（）{
$element.toggleClass ('foo-something-else');
}）；
}）；
最后一行不能通过jQuery直接操作或操作DOM（更改属性，添加事件侦听器）。

如果您仍然是jQuery，那么有许多文章需要阅读，比如这个迁移指南，以及我对如何使用jQuery的批判性思考。
我不想说我们要完全删除jQuery，我们有其他更重要的目标，例如，发布我们的产品。在这个时候，它是删除jQuery的依赖有意义。这可以简化我们的控制器，我们创建一个指令处理DOM和使用angular.element即使这实际是jQuery。

我们依靠一些恶心的jQuery UI，当然，我们不只是使用它的对话框，它的很多用途。例如，拖动列表项，把它放在一个有序的列表，如果你不使用jQuery UI，它会涉及到很多代码。所以，事实上，有jQuery UI没有很好的替代品。拖放功能可以由一个轻量级的拖放库角画滴取代，但对元素排序插件，它仍然依赖于jQuery UI。

管理代码库

另一个问题，我们需要在迁移的解决是整个代码库被挤在一个大的文件。该文件包含所有的控制器，所有的服务，所有的指令，和每个控制器的具体代码。我指出一点，可以让我们准确地包含每个文件的一个组成部分。目前，我们只有很少的文件，但我们不知道的一个组成部分。大部分是因为教学使用的服务与外界分享数据。

虽然它没有角，我们模块化的CSS样式表（stylesheet）。我们增加了两个词的前缀，用于每个组件的CSS类名称。例如，PN是一个前缀，表示一个面板（面板）；a.ly前缀，表示层（层），等等。这样做的直接好处就是你不必考虑组件的CSS类。因为你已经建立了命名空间，你很少使用CSS类名称了。另一个好处是减少嵌套。我们使用复杂的表达式如# div.layer.handle div布局编辑器，现在我们只need.ly-handle-content.deep嵌套只发生额外的选择包括，例如，foobar {残疾人}：悬停，或最坏的情况下，like.foo-bar.br-baz。
下面是我们设置的CSS类命名规则：

用两个字符来描述组件名：
更换nested.ly-foo.bar with.ly-foo-barname
避免内联样式，始终使用CSS类名，这降低了非接口的一致性，提高了语义解释。
不要使用ID在CSS中分配值
在实现了这种面向组件的CSS声明方法之后，我也思考了很久的类汤方法。

角迫使你编写代码，但在更深的层次上，它迫使你去思考。过了一会儿，它就像服务器端的实现，或者是一个不堪忍受的黑客会议。这一切都取决于你的选择。

接近完美

让我们分析一下应用程序的一个部分，即层。
div.cv-layer（
NG重复=层page.layers反|
AP层，
NG MouseDown =selectlayer（层。ID）
NG MouseUp =selectlayer（层。ID）
NG双击=doubleclicklayer（层）
隐藏层
）

在这里，我们使用CV层类，也就是说，这个元素是画布的组成部分（帆布指的地方，我们画一层，不要混淆html5canvas）。然后，我们使用一个ngrepeat标签在一个类似的循环在每个创建的每一层类似的元素。并通过反滤我们写，所以最后一层的顶部可以看到球员标签的用户，实际上是用来画一层的任务，无论它是一幅画，或一些文本，HTML，或什么的。事件标签（NG MouseDown，MouseUp NG，NG双击）是用来使药物事件。这些事件将由我们的选层服务处理。最后的nghide标签，我不想多说这是必要的。
这么多的函数（角：有点夸张），角的成功使它看起来很简单。在某种程度上，它告诉你它们是怎样的，更重要的是，它允许你分解你需要考虑的不同的问题，这样你就可以在不把一切都考虑进去的情况下编写简洁的代码。简而言之，它降低了复杂性，使复杂的变化变得简单。

我希望在不久的将来会有更多关于角码的文章，特别是，我愿意讨论在升级代码时遇到的一些情况，如何解决问题，让其余部分同时工作。