单页面web应用程序设计方法

Question

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

我正在学习AngularJS(JavaScript)/JavaScript/CSS，并尝试构建一个单独的页面应用程序，我拥有JSON资源(例如，http://..../Month/Day.json)

在应用程序中，我希望有两个或更多的显示(例如，概述和详细视图)

我的第一个问题是，如果最终用户从主视图切换到详细视图。如果两种视图具有完全不同的显示结构，如何构造HTML文件？(再说一次，我在HTML方面的知识还是新手)

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

干杯，祝你周末愉快！

Answer 1

如前所述，您的需求可以通过UI路由来实现。

然而，很少有额外的配置可以使您实现特定的this.To，而不是探索整个模块。从这些开始

第一个案子，

• 你的Index.html里有学生名单
• 单击studentDetails.html导航到studentName ->
• 在本例中，有一个名为解析的属性，您可以使用该属性在导航之前预先填充数据，甚至是。 这里给出了明确的解释。

第二个案子，

• 您应该在一个名为classDetails.html的页面中向某些用户显示和隐藏两个部分。
• 如果有学生正在观看，他就不能看到班里的教职员工信息。
• 如果一名工作人员正在观看，他/她应该看到整个班级的细节。
• 为了解决这个问题，我们在ui-routing中有一个名为命名的视图的属性。
• 两者都是不同的视图，但将使用相同的控制器。(抽象状态) 带代码的示例演示的探讨

关于你的第二个问题，请找到下面的代码片段。

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

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;
            })

        }
    }
});

Answer 2

1)由于您已经提到您使用的是角JS，您可以使用角JS特性，如ng路由/ui路由。这使用户能够在同一页中加载多个视图。对于HTML部分，您可以使用Main和Detailed选项创建简单的导航条，这些选项将加载不同的视图。

<div ui-view></div>

上面的div将从您的视图中加载内容，也就是说，每当在ng/ui路由下的state或url匹配时，它将把该html合并到上面的div.It中，这里可以是主的或详细的。下面的链接将帮助您理解更多：https://github.com/angular-ui/ui-router

2)关于第二个问题，我不确定我完全明白你的意思。如果要加载不同的JSON，可以在角JS中定义控制器内的不同函数，并调用所需的JSON文件。

Answer 3

 A simple Single Page Application using AngularJs. 

下载

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