在远程JSON中处理多个对象并使用角度js对显示为菜单文件的内容执行CRUD

Handling multiple objects in a remote JSON & performing CRUD to the content displayed as menu file using angular js

本文关键字：菜单 显示 js 文件 CRUD 执行 处理 JSON 对象      更新时间：2023-09-26

两天前，我开始学习angularjs，用于从远程json制作菜单。我浏览了一些基本教程。但是在开始为我的要求编码时卡住了。我面临以下挑战。

1.我知道这可能是一个SPA，每个人都想要angularjs的SPA。我能有一些理由，为什么一个人应该花时间学习这个框架，如果它可以只使用HTML5或任何他知道的东西来完成。

  1. 我的 json 有多个观察对象。其中三个是数组。他们里面有数组。如何使用$http和查询来显示维护菜单中此对象-->数组-->元素层次结构的整个json？

    2. 我

  2. 想要一个显示此层次结构的侧边栏，并且需要在页面上显示我选择的相应对象的菜单。我应该为此使用类似dynatable的东西吗？还是有其他选择？这是最好的方法。任何帮助，不胜感激。:)

这些是一些非常好的问题...从哪里开始。

根据我的经验，你应该决定angularjs是否是你需要走的路。AngularJS是一个全栈前端框架。我可以诚实地说，很多时候，角度对于我所从事的项目来说有点开销。例如，如果这就是你需要做的，那么angularjs对于手头的任务来说太多了。你可以简单地使用jQuery或任何你喜欢的东西。AngularJS非常适合面向模型的应用程序。如果你的应用程序执行繁重的 DOM 操作，那么 angular 的指令可能会变得有点痛苦。根据我的经验，如果你来自jQuery背景，学习曲线是坎坷的。如果你有时间深入研究角度，我建议你这样做。但是，如果时间不对你有利，我不建议你用Angular开始一个项目。尽管如此，Angular是一个相当不错的框架。

在

开始使用 anuglar 之前（不要仅仅因为它被炒作和一个很酷的框架并且每个人都在谈论它而学习它），我强烈建议您先学习设计模式的基础知识、JS中的模块、JS中的OOP和其他基本概念。这些将帮助您在完全不同的层面上理解角度，并帮助您确定角度是否适合您。

要回答与您的菜单相关的问题，您可以简单地获取所需的 json，如下所示：

// Simple GET request example :
$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

您可以像对待任何其他 json 对象一样对待响应，然后您可以像这样构建菜单结构

angular.forEach(data, function(value, key) {
   $scope.menu = ...
});

对于您的侧边栏，您可以制定指令：参考： http://www.w3schools.com/angular/angular_directives.asp

像这样：

angular.module('yourapp')
   .directive('menu', function($http) {
      return {
          restrict: 'E',
          template: '<div ng-repeat="item in menu"></div>',
          link: function(scope, element, attr) {
              $http.get('/path/to/json')
                 .success(function(data) {
                     var menu = process_json_data(data);
                     $scope.menu = menu;
                 });
          }
      };
   });

如果你愿意的话，这是一个粗略的草图，是这个概念的伪图。

希望这有帮助。让我知道！

干杯

  1. 将学习 Angular 视为一项投资，您将比使用 jQuery 或类似组合的纯 HTML 更容易完成许多任务。 我并不是说你永远不需要jQuery或任何其他库，但是像Angular这样的框架将在很多方面帮助你。 2way 模型绑定允许您反映模型更改以查看或查看模型更改，而无需任何编码。MVC 结构可帮助您在客户端维护干净的代码。还有其他好处。你应该谷歌哪些主题Angular可以帮助你。

  2. 您可以在 Angular 上使用模型绑定显示您收到的任何数据。 假设您的 JSON 响应如下

    var response = {a: ['stack', 'overflow', 'com'], b: {d: 12, e:15}, c: { a: [1,2,3], b: 'test'}};

您可以根据需要轻松地在 HTML 上显示此响应

<span ng-repeat="data in response.a track by $index">{{data}}</span>

或者，您可以构建嵌套视图。

  1. 您应该阅读有关 Angular 文档的更多信息。 如果要显示一些简单的数据，可以绑定到菜单上的单击事件，并在控制器上为此数据设置一些文本。 如果您需要的是带有左侧菜单的复杂视图，则应选择单独的控制器和视图。

你应该从Angular教程开始学习

相关文章：