如何使用 AngularJS 创建交互丰富的 Web 应用程序？答案

【问题标题】：How to create interaction-rich web app with AngularJS?如何使用 AngularJS 创建交互丰富的 Web 应用程序？
【发布时间】：2014-05-26 15:29:13
【问题描述】：

自从我接触 AngularJS 以来，这一直是我的问题。

是的，AngularJS 在表示和破坏逻辑之间提供了彻底的分离。然而，我发现自己处于两难境地，有时我真的无法抗拒直接从我的服务中操作一些 DOM 元素的诱惑，这显然不是最佳实践，因为 AngularJS 建议在指令中这样做，我觉得这很累，尤其是在我想创建具有沉浸式体验的应用的情况下。

最近我正在使用 node-webkit 从事一个原生应用程序项目。我们想利用 AngularJS 构建一个带有 HTML5 和 Node.js 的多文档应用程序。但我无法找到实现这一目标的方法。就我而言，即使是嵌套视图也不容易创建，也不推荐使用 AngularJS，更不用说多窗口了。

与此同时，我发现 Backbone 在这方面非常令人满意。但是，出于其他原因，我仍然更喜欢 AngularJS。

那你怎么看？这个问题有什么解决办法吗？那里有任何开源项目吗？代码示例也非常感谢。提前谢谢。

【问题讨论】：

当你说通过指令操作 DOM 很累时，你能详细说明一下吗（我个人觉得更容易和“安全”）？您能否向我们展示一个具体的示例，以便我们理解您为什么觉得它令人生畏？
@AntónioSérgioSimões 说，为了与 AngularJS 进行对话，我需要创建一个指令。首先，如果对话框包含根据用户的实时输入而更改的动态 DOM，我发现指令没有多大用处（我很保守，所以我仍然会选择用指令包装它，但这不是拖累吗？）；相反，我发现直接使用 jQuery 更加灵活和简洁。其次，为了符合语义规则，在 HTML 文档中放置一个对话框而不是动态附加它不是一个好习惯。根据您的意见，我应该在哪里解决这个问题？Thx
您仍然可以在指令中使用纯 jQuery，另外还可以直接引用要附加新 HTML 的元素，而不是执行 DOM 查询。
补充一点，有时我发现做一些“肮脏”的 DOM 事情是不可避免的，这些事情不符合最佳实践，例如。 window.onscroll = 函数（）{}。你觉得我应该把它放在哪里？我应该为此创建一个指令并将其附加到根元素，还是应该为这类事情创建一个单独的“dirty.js”？对于后者，访问 $scope; 会有问题。然而，对于前者，该指令似乎有点不必要。
引用：“即使是嵌套视图也不容易创建，也不推荐使用 AngularJS” 你检查过 Angular UI-Router 吗？ github.com/angular-ui/ui-router 我建议查看页面底部的视频，它们很好地展示了如何创建具有多个相互独立的部分的嵌套视图。希望这会有所帮助

标签： javascript html angularjs backbone.js node-webkit

【解决方案1】：

处理 onscroll 的简单指令可能是这样的：

    app.directive('myScrollWindow',function($window){

    return function(scope,element,attrs) {

       angular.element($window).bind('scroll',function(){

       // do your stuff here
       // for example:
       if(this.pageYOffset >= 50) {
         // do something
       }


       });
       scope.$apply();
     }
   });

scope.$apply() 是这个工作的关键。

重点是你几乎可以在指令中做任何事情。

更新

您可以添加一个按钮并像这样显示模式：（我假设您正在使用 Twitter Bootstrap 作为模态）

   app.directive('blah',function(){

    function link(scope,elem,attrs){
        var modal = elem.find('.modal');

        scope.openDialog = function(){
            modal.show();                
        }
    }

return {
  restrict:'E,A',
  link: link,
  template:"<button type=\"button\" ng-click=\"openDialog()\">Click me</button><div class=\"modal hide fade\">...</div>"
}
});

element.find() 只会在指令的模板内查找。它不会对模态 css 类进行完整的 DOM 搜索。这就是指令的美妙之处

【讨论】：

如果我想在用户单击按钮时打开一个对话框，我是否应该编写另一个指令作为属性并将其附加到按钮上？或者是否可以将“onclick”属性设置为范围内的 OpenDialog() 函数？
好的。感谢您的努力。我将您的设置为已接受。 :)
谢谢。尽管下面有很好的答案:) 事情是，指令在性能方面可以非常有效，就像我上面所说的那样，您可以执行非常有效的 DOM 查询，这些查询只会在指令的“范围”内查看......并且一旦你开始经常使用它们，它就会成为你的第二天性
在这里快速添加：对于任何看到上述示例并快速尝试的人，请注意，默认情况下，Angular 仅附带 jQuery 的一个子集，其中 #find() 仅限于标记名。 docs.angularjs.org/api/ng/function/angular.element
没错。我应该指出这一点。如果您想使用 jQuery 的完整版本而不是 Angular 附带的 jQLite，您需要在 BEFORE Angular 核心之前引用 jQuery 核心。

【解决方案2】：

您绝对应该仔细研究 ionic。它们仍处于测试阶段，但在从 UI 到性能的所有方面都取得了巨大的进步。

ionic 库非常直截了当，就 f/e 逻辑而言，angular 非常棒，并且到目前为止，就 API 而言，cordova 证明了自己是生产级材料。为跨平台解决方案拥有（几乎）单一的代码库，在尽快推出原型时，比任何其他考虑因素都重要。

ionic framework docs

cordova API

【讨论】：

感谢您的回答。 Ionic 是一个针对移动设备的混合跨平台开发框架，而我这里所说的“应用程序”是一个广义概念，包括运行在移动操作系统以外的平台上的 webapps 和原生应用程序。

【解决方案3】：

如果您不反对引入另一个框架，我会推荐Twitter Bootstrap 3 和UI Bootstrap。 UI Bootstrap 是 Angular 团队编写的一组指令。我发现它在执行我们需要的所有 UI 操作方面非常全面。当然，如果您需要更多功能，您可以随时扩展指令。

甚至还有一个针对Modal Dialog 的指令，它很有效。看看吧。

【讨论】：

好提示 :) 不过，您认为在不与 AngularJS 分离的情况下创建交互式动画是否可行？ Angular-UI 使用 CSS3 过渡处理动画，优雅但不够灵活。
在 nganimate.org 查看 Angular Animations。它使用 CSS3 动画。我发现围绕 Angular 建立了一个非常强大的社区，因此能够为我需要构建的任何东西找到一个好的解决方案。但是，您在问题中提到了 Backbone，因为这可以让您更接近金属，它可以让您更加灵活。意识到您将编写更多 Angular 为您提供 OOTB 的样板代码。