Question

在开始之前，我在网页开发方面的经验/知识很少，并且掌握了常见编程语言的中级知识。

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

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

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

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

干杯，周末愉快！

Answer 1

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

然而，几乎没有其他配置可以让您实现这一目标。具体而不是探索整个模块。从这些

开始

第一种情况，

您的 Index.html
点击studentName - ＆gt;导航至 studentDetails.html
在这种情况下，您可以使用名为 RESOLVE 的属性可以在导航前预先填充数据。

Clear Explanation is given here

第二种情况，

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

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

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

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）由于您已经提到过使用Angular JS，因此您可以使用Ang-JS功能，例如ng-route / ui-route。这使用户可以在同一页面内加载多个视图。对于HTML部分，您可以使用选项Main和Detailed View创建简单的导航栏，该选项将加载不同的视图。

<div ui-view></div>

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

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

Answer 3

 A simple Single Page Application using AngularJs.

Download

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

单页Web应用程序设计方法

3 个答案: