Angularjs中的多步骤注册表单

时间:2014-08-22 03:18:45

标签: angularjs local-storage

我正构建一个应用程序,其中我的注册流程分为3个部分,个人信息,个人资料图片等,每个部分都在其视图中。 那么,您认为哪种方式是在视图之间保留数据的最佳方式,因此在最后一步中,我可以向用户显示整个数据并要求确认。

本地存储? $ cacheFactory?我真的不知道该怎么做,任何建议都会有用!

提前致谢

3 个答案:

答案 0 :(得分:1)

可以使用cookie或本地存储,但我认为建议采用Angular方式。

  • $ rootScope:你可以在$ rootScope中存储用户数据,只需使用

    $rootScope.userData = { 'userName' : 'first', 'userId' : 'second' };

在新视图中存储和读取数据,记得将$ rootScope注入控制器

  • $ broadcast:angular提供事件$ broadcast和$ emit,因此您可以使用$ on来观看事件并获取您的用户数据。这是一个演示http://jsfiddle.net/whitewolf/5JBA7/15/

  • 路线解决? :如果您将每个步骤中的用户数据发送到数据库, 您可以使用路由配置中的resolve来加载$ http.get()。

  • 的用户数据

添加服务

app.factory("messageService", function($q){
    return {
      getMessage: function(){
         return $q.when("Hello World!");
     }};
});

在路线配置

$routeProvider
.when("/news", {
    templateUrl: "newsView.html",
    controller: "newsController",
    resolve: {
        message: function(messageService){
            return messageService.getMessage();
    }}
})
控制器中的

app.controller("newsController", function (message) {
    $scope.message = message;
});

答案 1 :(得分:0)

这取决于要求。

  • 如果要求用户可以完成两个步骤 稍后回来完成第三步,然后更好地去当地 持久性。
  • 但如果事实并非如此,则无需使用任何持久性 机制。只有你需要正确映射模型。在最终提交时,您可以保留完整的输入数据。

答案 2 :(得分:0)

你正在寻找一个有角度的巫师 如果您使用的是ui-router,则可以使用嵌套状态轻松完成此操作

看看

http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router

  

一种形式(主要国家)
  单独的模板(嵌套状态)

     

注意:仅为主状态指定控制器,而不为嵌套状态指定