javascript - 关于 'the angular way' 的不安全感

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它.

7年前关闭。




Improve this question




我有很多 jQuery 背景，目前正在研究 Angular。
到目前为止，我一直抵制使用 jQuery 来按照我以前的方式完成工作的冲动。
我想真正学会以 Angular 方式做事。

以下是我遇到的一些事情，我真的很想得到一些 Angular 专业人士的意见:

添加用户交互。
标准场景:如果用户这样做，就那样做。
我应该为每种情况创建指令还是向 Controller 添加方法？
我如何决定是用它做一个指令还是一个 Controller 方法？

为多个元素添加相同的功能
假设我有一堆 div 散布在页面上，甚至只是表格的几列。
在 jQuery 中，如果我想做某事，当用户点击其中任何一个时，我会执行 $('div').click(...)或 $('#mytable th').click(...)在 Angular 中，我知道如何做到这一点的唯一方法是 ng-click 指令，当将此指令添加到每个元素时，它会导致非常冗长的代码。
特别是因为我认为 angular 应该使代码更具可读性，所以我想知道是否有更好的解决方案。

代码分离
我喜欢 Angular 的一件事是努力将 html 保留在 html 文件中，并将 js 保留在 js 文件中。这实际上是 jQuery 最让我恼火的事情之一。
但是指令的设置方式与此相矛盾。在这里您定义一些模板 html 代码(或链接模板文件)。用户交互处理程序也是如此(即用户单击此 -> 显示该消息)。
所以最后我再次筛选代码以找出那段特定的 html 代码来自哪里。我在这里错过了什么吗？

MVC
在大多数示例中，模型是在 Controller 内部定义的。
不应该在其他地方定义真正的 MVC 分离吗？例如，总是为模型创建服务，因为通常至少模型的一部分是由服务加载的？还是我在这里越界了？

app.js
这更像是一个旁注:我发现对于节点和 Angular 来说，约定是调用主文件“app.js”令人困惑。如果我在编辑器中打开了这两个文件，我必须单击它们以查看哪个是哪个。我知道我可以随心所欲地说出我想要的名字，但正如我所说，我想做正确的事情，只是想知道这是否从来没有打扰过其他人......也许 Angular 应该考虑执行约定“app_ng.js”或其他东西...？

出于可读性目的，请将您的想法发布为答案，而不是评论。

谢谢，
简

Answer 1

用户交互
这些都可以使用指令和 Controller 来完成。对于何时使用 Controller 或何时使用指令没有严格的规定。通常小的一次性交互代码在 Controller 中完成，但更复杂的交互逻辑在指令中完成。可重用的交互逻辑应始终在指令中完成。与 DOM 操作相同。这也应该在指令中完成。

多个元素，相同的功能
通常，在这种情况下，您无论如何都应该/正在生成这些元素。例如使用 ng 重复。这将其减少为更改 1 行。在不是这种情况的情况下，您可以创建一个检查子级的父级指令。但是，您也可能只需要一个自定义指令。例如多个 div 在整个页面上做类似的事情？应该是指令的完美示例。然后，您可以在指令中使用模板，也可以在指令链接或 Controller 函数中使用更具体的逻辑。

html-js 分离
大多数指令使用 templateUrl 来做模板，将它们保存在部分 html 页面中。一些库在运行时预先设置了 $templateCache，因此 Angular 不需要请求这些模板。 (也允许通过替换 $templateCache 条目来进行自定义。)在开发工具中查看 DOM 时，可能并不完全清楚该 html 来自何处，但如果您在 DOM 树中查找，您会发现该指令负责。在旧版本的 Angular 中，指令可以使用“replace: true”来替换 DOM 中的实际指令，但在 1.3 中已弃用。所以，现在你有了指令。接下来是实际查找指定指令的位置。这在很大程度上取决于您的项目布局，但是对于良好的项目布局，它就像浏览到正确的文件夹一样简单。例如bla-date-picker:前缀是 bla，所以它在 blabla 模块中。打开 blabla 模块，找到一个指令文件夹。打开指令文件夹，找到 datePicker。然后在指令定义中查看它是直接使用模板还是使用模板 html 文件。

关于 Controller 中的代码，您应该已经知道您在哪个 Controller 中。例如，再次查看 DOM 树并查看哪些 Controller 是父 Controller 。然后你只需要找到正确的 Controller 文件(同样，这取决于你的项目布局。一个好的布局会很容易找到)。使用良好的 DOM 布局，该对象最多有 2-3 个 Controller 父级，并且大多数情况下，树中最底层的 Controller 将拥有您正在寻找的代码。

但是请注意， Angular 不会对您施加很多限制。所以你仍然可以把项目弄得一团糟，让东西很难找到(例如，在 1 个文件中定义所有内容，使用 $rootScope，使用 100 个嵌套 Controller 等)。由开发人员来确保这些事情不会发生。在一个好的项目中，找到东西应该很容易和直接。在一个糟糕的项目中，好吧....

MVC
Angular 不是 MVC 框架。您可以将它用于 MVC，但您不必这样做。通常示例很小，这意味着为了简洁起见，它不使用最佳实践。所以是的，一般来说，您希望在服务(或作为服务)中定义模型。

应用程序.js
您不需要将 Angular 与节点一起使用。此外，您可以随意命名。例如，在我的项目中，我没有用于 Angular 的 app.js，而只有一个以 app 模块命名的文件。更好的是，我有 2 个独立的项目。 1 个后端(主要是 API)和 1 个 Angular 前端项目。因为使用 Angular 几乎不需要模板引擎，您可以将所有 Angular 文件作为静态文件提供。这意味着将其分离到自己的项目中相对容易。