单页网页应用程序设计方法答案

【问题标题】：Single page web application design approach单页网页应用程序设计方法
【发布时间】：2016-10-09 13:25:22
【问题描述】：

在开始之前，我对网页开发的经验/知识很少，并且对常用编程语言有中级知识。

我正在学习 AngularJS(JavaScript)/HTML/CSS 并尝试构建单页应用程序，并且我有 JSON API 资源（例如，http://..../Month/Day.json）

在应用程序中，我希望有 2 个或更多显示（例如，概述和详细视图）

我的第一个问题是，如果最终用户会从主视图切换到详细视图。如果两种视图具有完全不同的显示结构，应该如何构建 HTML 文件？（再说一次，我对 HTML 的了解是新手）

第二个问题是，如果我需要根据一些 JavaScript 属性/值检索不同的 JSON 文件（或数据）。如何使用 AngularJS 实现这一点？我知道 $http 方法会检索一个 JSON 文件，但是如何使用不同的 URL 再次发出此请求？

干杯，周末愉快！

【问题讨论】：

这个问题很笼统。尝试开始构建应用程序，当您遇到问题时，您会发布一个专门针对该问题的问题。

标签： javascript html angularjs json single-page-application

【解决方案1】：

如前所述，您的要求可以通过 UI-Routing 来实现。

很少有额外的配置可以让您实现这一点。要具体而不是探索整个模块。从这些开始

第一种情况，

您的 Index.html 中有学生列表
单击一个学生姓名 -> 导航到 studentDetails.html
在这种情况下，您可以使用一个名为 RESOLVE 的属性甚至可以在导航之前预先填充数据。

Clear Explanation is given here

第二种情况，

您有两个部分应该向某些用户显示和隐藏在名为 classDetails.html
如果某个学生正在查看，他应该看不到教职员工班级信息。
如果员工正在查看，他/她应该会看到整个班级的详细信息。
为了解决这个问题，我们在 ui-routing
中有一个名为 NAMED VIEWS 的属性
两者是不同的视图，但将使用相同的控制器。同时探索（抽象状态） Sample Demo with code

对于您的第二个问题，请找到以下代码 sn-p。

创建一个服务，可以通过注入控制器作为依赖项来重用它

angular.module('myApp').factory('dataService', function ($http) {
    var connectionurl = 'http://localhost:8000/';
    return {
        ////Common Service call for json files
        getJsonContent: function (jsonfileName, successcallback) {
            $http({
                method: 'GET',
                url: connectionurl + jsonfileName + '.json'
            })
            .success(function (data, status, headers, config) {
                successcallback(data);
            })
            .error(function (data, status, headers, config) {
                //error handling
            })
        }
    }
});

在控制器中使用上述服务

angular.module('myApp').controller('myController', function ($scope, dataService) {

    ////Function triggered on some event
    $scope.someFunction= function (value_changed_in_view) {
        if (value_changed_in_view)
        {
            dataService.getJsonContent("jsonfileA",function (successcall) {
                $scope.variable_name= successcall;
            })
        }
        else {
            dataService.getJsonContent("jsonfileB",function (successcall) {
                $scope.variable_name= successcall;
            })

        }
    }
});

【讨论】：

【解决方案2】：

1) 既然您提到您使用的是 Angular JS，您可以使用 Angular JS 功能，如 ng-route/ui-route。这使用户能够在同一页面内加载多个视图。对于 HTML 部分，您可以使用主视图和详细视图选项创建简单的导航栏，这将加载不同的视图。

<div ui-view></div>

上面的 div 将从您的视图中加载内容，即每当您的 ng/ui 路由下的状态或 url 匹配时，它就会将该 html 合并到上面的 div 中。它可以是主要的或详细的。以下链接将帮助您了解更多： https://github.com/angular-ui/ui-router

2 ) 对于第二个问题，我不确定我是否完全理解你。如果要加载不同的 JSON，可以在 Angular JS 中定义控制器内部不同的函数，并调用所需的 JSON 文件。

【讨论】：

感谢您的回答。这绝对回答了我的第一个问题。我想我对第二个问题不太清楚。请让我改写一下，所以如果我先加载 /1-1.json，然后用户想查看 /1-2.json 的不同数据等等......如果我有数百万个 json 文件，我我相信不能将所有这些 url 放入 diff 函数中。我可以考虑创建 var urlBuilder = "http://..."+firstNum+"/"+secondNum; ...这是处理多个 JSON 文件的正确或最有效的方法吗？

【解决方案3】：

 A simple Single Page Application using AngularJs.

Download

Extract and execute in your local machine which will give you little idea about SPA

【讨论】：