AngularJS应用程序从多个屏幕收集数据

我正在研究在不同屏幕之间切换的应用程序。每个屏幕都通过用户选择一个按钮并点击它或选择一个单选按钮来收集用户的数据。至少有5-6个屏幕。我需要关于如何以及在何处存储收集的数据的想法，以及在不同屏幕之间移动的最佳方式是什么：切换页面内div的显示内容或转到完全不同的页面。每个屏幕上的数据来自不同的数据库表。AngularJS应用程序从多个屏幕收集数据

到目前为止，我已经完成了一个屏幕 - 它从数据库中提取数据（通过Web API调用）并基于所提取的数据，在超链接中显示不同的图像。

我想要做的是捕获用户点击哪个超级链接并将该值存储在某个位置（一直持续到所有数据被收集并存储在数据库中的位置），然后移至下一个屏幕。我有点困在这里，需要一些帮助和想法。

这是我走到这一步：

UI的屏幕1：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Types</title> 
<script src="../../Scripts/angular.js"></script> 
<script src="TypesCtrl.js"></script> 
</head> 
<body ng-app="myApp"> 
<div ng-controller="myController"> 
    <h3>Select a type</h3> 
    <br /> 
    <table> 
     <tr> 

      <td ng-repeat="Type in Types"> 

       <a href="#"><img src="Images/type1.png" ng-show="Type.TypeId=='1'" /></a> 
       <a href="#"><img src="Images/type2.png" ng-show="Type.TypeId=='2'" /></a> 
       <a href="#"><img src="Images/type3.png" ng-show="Type.TypeId=='3'" /></a> 
       <a href="#"><img src="Images/type4.png" ng-show="Type.TypeId=='4'" /></a> 
    </td> 


    </tr> 
    </table> 
</div> 
</body> 
</html>

，这里是我的角度控制器：

(function() { 
    angular.module("myApp", []).controller("myController", TypeCtrlFunction); 

    TypeCtrlFunction.$inject = ["$scope", "$http"]; 
    function TypeCtrlFunction($scope, $http) { 
     $http.get('http://localhost:49358/api/myAPI/GetTypes'). 
     then(function (result) { 
      $scope.DeviceTypes = result.data; 
     }); 
    }; 
})();

我会很感激一些帮助来获得我向前移动

来源

2016-01-29 ElenaDBA

首先，我认为你应该使用视图，每个屏幕的视图，我建议你也为每个屏幕创建一个服务，每个屏幕服务存储从特定屏幕需要的数据单击事件），然后创建另一项服务，收集之前服务中存储的数据并将该数据发送到服务器。 –

您可以在不同状态/控制器之间共享数据，可以通过设置一项服务或使用rootScope。通常使用服务是更好的做法。然后您可以使用uiRouter更改视图。用于建立一个例子规定：

app.config(['$stateProvider', '$urlRouterProvider', 
function ($stateProvider, $urlRouterProvider) { 
$urlRouterProvider.otherwise("/main"); 

$stateProvider 
    .state('main', { 
    url: '/main', 
    templateUrl: 'main.html' 
    }) 
    .state('main.mainstuff', { 
    url: '/mainstuff', 
    templateUrl: 'mainstuff.html' 
    }) 
    .state('main.secondstuff', { 
    url: '/secondstuff', 
    templateUrl: 'secondstuff.html' 
    }); 
}]);

Here是表示使用嵌套状态如何实现一个plunker。这个例子使用rootScope，但你应该考虑像AndyHasIt提到的那样使用服务。

来源

2016-01-29 21:07:56

您可以使用ui-routing在不同视图之间切换。至于存储数据有两种方法我会这样做。一种是使用服务来存储值，或者您也可以使用本地存储或cookies在浏览器相同的

来源

2016-01-29 21:12:47 Nijeesh

为了控制器之间共享数据，使用服务：

app = angular.module('MyApp', []); 
app.service('SharedDataService', function() { 
    return { 
    someVar: 'hello' 
    } 
}) 

app.controller('Controller1', function(SharedDataService, $scope) { 
    $scope.value1 = SharedDataService.someVar; 
}) 

app.controller('Controller2', function(SharedDataService, $scope) { 
    $scope.value1 = SharedDataService.someVar; //The same value 
})

到同一页内加载不同的页面我建议你使用ngRoute或uiRouter

来源

2016-01-29 21:16:20 andyhasit

AngularJS应用程序从多个屏幕收集数据

回答

相关问题