Как сделать многоуровневую/мажорную форму angularjs на одной странице/url

Я пытаюсь найти разумные подходы в AngularJS для создания функции, состоящей из нескольких этапов (т.е. мастера), но связанных с одной страницей /URL. Данные с одного шага должны были бы отправить данные (или обмениваться данными с) следующим шагом.

Основные моменты:

  • url должен оставаться тем же (т.е. http://mydomain/myapp/nameupdater) для всех шагов и
  • данные могут быть отправлены среди шагов (т.е. я должен предоставить данные, найденные с шага 1, для заполнения данных на шаге 2).

Например,, предположим, что у меня есть функция, которая выполняет массовое обновление имен:

  • В шаге 1 функция заставляет вас искать имя.
  • На шаге 2 функция представляет список имен, найденных с шага 1, и позволяет пользователю редактировать их.

Я начал подход, где каждый шаг имел свой собственный вид и контроллер. И angular-ui-router поддерживал состояния функции. Но я понятия не имею, как поделиться данными между этими шагами.

Кто-нибудь знает о хорошем подходе к созданию многоступенчатых/магических форм в angularjs?

My Код плунжера здесь моей очень слабой попытки.

Ответы

Ответ 1

Я думаю, что лучший способ сделать это - использовать ng-switch, только один контроллер, один маршрут, без перезагрузки, используя переменные, общие для всех шагов, например:

<div ng-controller="stepCtrl">
   <div ng-switch="step">
      <div ng-switch-when="1">
         <!-- here you can include your step 1 template,
              or simply just hardcode it here: -->
         <div ng-include src="'.../step1.html'">
         <button ng-click="setStep(1)"></button>
      </div>
      <div ng-switch-when="2">

         <div ng-include src="'.../step2.html'">
         <button ng-click="setStep(2)"></button>
      </div>
      <div ng-switch-when="3">
         <div ng-include src="'.../step3.html'">
         <button ng-click="setStep(3)"></button>
      </div>
   </div>
</div>


     yourApp.controller('stepCtrl',function($scope){
        $scope.step = 1;
        $scope.setStep = function(step){
           $scope.step = step;
        }
      });

Таким образом вы также можете манипулировать URL-адресом, чтобы добавить шаг в конец вашего текущего местоположения.

ОБНОВЛЕНИЕ:

На самом деле этот ответ давно, в наши дни я лично предпочитаю использовать ui-router, который является отличным модулем, который вы можете ввести в приложение AngularJs и сделать его еще более крутым с вложенными представлениями. Говоря о вложенных представлениях, ниже приводится мой новый подход к многопоточной форме с некоторой анимацией:

Сначала:

Using $stateProvider declare any steps you want in separate views : 

 app.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

    .state('wizard', {// this will be the wrapper for our wizard
        url: '/wizard',
        templateUrl: 'wizard.html',
        controller: 'wizardController'
    })
    .state('wizard.stepOne', {// this will be the wrapper for our wizard
        url: '/stepOne',
        templateUrl: 'stepOne.html',
        controller: 'wizardController'
    })
    .state('wizard.stepTwo', {// this will be the wrapper for our wizard
        url: '/stepTwo',
        templateUrl: 'stepTwo.html',
        controller: 'wizardController'
    })

Затем в нашем "wizard.html" мы можем иметь что-то вроде этого:

    <div id="container">

    <div>
        <h2>Our multistep form wizard</h2>


        <div id="status-buttons" class="text-center">
            <a ui-sref-active="active" ui-sref=".stepOne"><span>1</span> Step One</a>
            <a ui-sref-active="active" ui-sref=".stepTwo"><span>2</span> Step Two </a>

        </div>
    </div>
   <!-- Here we specify our view that is a container for our subviews(steps) , which in our case can be a form !-->

    <form id="signup-form" ng-submit="submit()">
        <!-- nested state views will be inserted here -->
        <div  ui-view></div>
    </form>

</div>

И, очевидно, для наших шагов мы должны иметь разделенные html файлы. Таким образом, у нас все еще есть один контроллер, url будет обновлен, и мы также можем добавить анимацию angular.