एक पेज/यूआरएल

Question

पर एंजुलरज मल्टी-स्टेप/विज़ार्ड फॉर्म कैसे करें I AngularJS में कई चरणों (यानी एक जादूगर) से बना एक फ़ंक्शन बनाने के लिए उचित दृष्टिकोण जानने का प्रयास कर रहा हूं लेकिन इससे जुड़ा हुआ है एक पेज/यूआरएल। एक चरण से डेटा को अगले चरण में डेटा (या डेटा साझा करने के लिए) भेजना होगा।

मुख्य बिंदु इस प्रकार हैं:

• यूआरएल एक ही रहना चाहिए (यानी, http://mydomain/myapp/nameupdater) सभी चरणों और के लिए,
• डेटा चरणों (यानी के बीच भेजा जा सकता है, मैं देना है चरण 2 में डेटा को चरण 2 में डेटा को पॉप्युलेट करने के लिए मिला)।

उदाहरण लिए, मान लीजिए कि मैं एक समारोह है कि नाम के एक बहु-अपडेट करता है:

• चरण 1 में समारोह आप एक नाम के लिए खोज करता है।
• चरण 2 में फ़ंक्शन चरण 1 से मिले नामों की एक सूची प्रस्तुत करता है और उपयोगकर्ता को उन्हें संपादित करने की अनुमति देता है।

मैंने एक दृष्टिकोण शुरू किया जहां प्रत्येक चरण का अपना दृष्टिकोण और नियंत्रक था। और, angular-ui-router समारोह के राज्यों को बनाए रखा। लेकिन, मुझे नहीं पता कि मैं चरणों के बीच डेटा कैसे साझा करूंगा।

क्या किसी को कोणीय में बहु-चरण/विज़ार्ड रूप स्थापित करने के लिए एक अच्छा दृष्टिकोण पता है?

इस पर मेरे बहुत कमजोर प्रयास के Plunker code is here।

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

इस तरह आप यूआरएल को अपने वर्तमान स्थान के अंत में एक कदम जोड़ने के लिए भी कुशलतापूर्वक उपयोग कर सकते हैं।

अद्यतन:

वास्तव में इस सवाल का जवाब बहुत समय पहले के लिए है, इस दिन मैं व्यक्तिगत रूप से ui-router जो एक महान मॉड्यूल जो आप अपने AngularJS आवेदन करने के लिए इंजेक्षन और यह और भी नेस्टेड साथ शांत कर सकते हैं का उपयोग करना पसंद विचार

पहले:: नेस्टेड विचारों का भाषण, bellow कुछ एनीमेशन के साथ एक multystep फार्म के लिए अपने नए दृष्टिकोण है

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 फ़ाइलें अलग किया जाना चाहिए। इस तरह, हमारे पास अभी भी एक नियंत्रक है, यूआरएल अपडेट किया जाएगा, और हम कोणीय एनीमेशन भी जोड़ सकते हैं।