对'棱角分明的方式;

Insecurities about 'the angular way'

本文关键字：方式      更新时间：2023-09-26

我有很多jQuery背景，目前正在进入angular
到目前为止，我一直抵制着加入jQuery以按照以前的方式完成任务的冲动。
我真的很想学会用棱角分明的方式做事。

以下是我遇到的一些事情，我真的很想听听一些棱角分明的专业人士的意见：

  1. 添加用户交互
    标准场景：如果用户这样做，那么就那样做
    我应该为每种情况创建指令还是向控制器添加方法
    我如何决定是用它发出指令，还是只是一个控制器方法？

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

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

  4. MVC
    在大多数例子中，模型是在控制器内部定义的
    难道不应该在其他地方定义它来实现真正的MVC分离吗？例如，总是为模型创建一个服务，因为通常至少模型的一部分是由服务加载的，那该怎么办？还是我越界了？

  5. app.js
    这更多的是一个附带说明：对于node和angular，约定是调用主文件"app.js"，这让我感到困惑。如果我在编辑器中打开了这两个文件，我必须点击它们来查看哪个是哪个。我知道我可以随心所欲地说出名字，但正如我所说，我想把事情做好，我只是想知道这是否从未困扰过其他人。。。也许angular应该考虑强制执行约定"app_ng.js"或其他什么。。。？

为了便于阅读，请将您的想法作为答案而非评论发布。

谢谢，
一月

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

  2. 多个元素，相同的功能
    通常情况下，您应该/正在生成这些元素。例如使用ng重复。这将减少为更改1行。在情况并非如此的情况下，您可以制定一个检查子级的父指令。然而，也可能是您只需要一个自定义指令的情况。例如，多个div在页面上做类似的事情？应该是一个指令的完美例子。然后，您可以在指令中使用模板，也可以在指令链接或控制器函数中使用更具体的逻辑。

  3. html js分离
    大多数指令都使用templateUrl来执行模板，从而将它们保留在部分html页面中。一些库在运行时预先为$templateCache设置种子，这样angular就不需要请求这些模板。(还允许通过替换$templateCache条目进行自定义。(在开发工具中查看DOM时，可能不完全清楚html来自哪里，但如果您在DOM树中查找，您会发现负责它的指令。在旧版本的angular中，指令可以使用"replace:true"来替换DOM中的实际指令，但在1.3中，这是不赞成的。所以，现在你有了指令。接下来是实际查找指令的指定位置。这在很大程度上取决于您的项目布局，但对于良好的项目布局来说，它就像浏览到正确的文件夹一样简单。例如bla日期选择器：前缀是bla，所以它在blabla模块中。打开blabla模块，找到一个指令文件夹。打开指令文件夹，找到datePicker。然后在指令定义中，您可以看到它是直接使用模板还是使用模板html文件。

    对于存在于控制器中的代码，您应该已经知道您所在的控制器。例如，通过再次查看DOM树并查看哪些控制器是父控制器。然后你只需要找到正确的控制器文件(同样，这取决于你的项目布局。好的布局会让你很容易找到(。有了一个好的DOM布局，对象最多会有2-3个控制器父级，而且通常树中最低的控制器会有您要查找的代码。

    然而，请注意，棱角分明并没有给你带来太多的限制。因此，你仍然可以把项目搞得一团糟，让东西很难找到(例如，在一个文件中定义所有内容，使用$rootScope，使用100个嵌套控制器等(。这取决于开发人员来确保这些事情不会发生。在一个好的项目中，找东西应该简单明了。在一个糟糕的项目中，嗯。。。。

  4. MVC
    Angular不是MVC框架。你可以将它用于MVC，但你不必这样做。通常示例都很小，这意味着为了简洁起见，它没有使用最佳实践。因此，是的，通常您希望在服务中定义模型(或作为服务(。

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

相关文章：