如何用AngularJS创建富交互的web应用

How to create interaction-rich web app with AngularJS?

本文关键字：web 应用 交互 何用 AngularJS 创建      更新时间：2023-09-26

自从我接触AngularJS以来，这个问题一直困扰着我。

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

最近我在做一个使用node-webkit的原生应用项目。我们想利用AngularJS的优势，用HTML5和Node.js构建一个多文档应用。但我想不出实现这一目标的方法。在我看来，即使是嵌套视图也不容易创建，也不推荐使用AngularJS，更不用说多窗口了。

与此同时，我发现Backbone在这方面相当令人满意。然而，由于其他原因，我仍然更喜欢AngularJS。

你觉得怎么样?这个问题有什么解决办法吗?有开源项目吗?代码示例也非常受欢迎。

处理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搜索。这就是指令

的美妙之处

你一定要仔细看看ionic。它们仍处于测试阶段，但在从UI到性能的各个方面都有了巨大的改进。

ionic库非常直接，angular在f/e逻辑方面非常出色，而cordova迄今为止在API方面证明了自己是生产级材料。对于跨平台解决方案来说，拥有(几乎)单一的代码基础比任何其他考虑因素都重要。

离子框架docs

API科尔多瓦

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

甚至还有一个用于模态对话框的指令。看一下

相关文章：