2016-04-13 2 views
0

Ich habe folgenden Code unten, wo ich Angular Routing verwendet, um Benutzer zu neuen Registrierungsformularen zu leiten. Die App funktioniert so. Der Benutzer sieht eine Webseite, die ihn auffordert, zwischen einem "digitalen Zitat" oder einem "Bildschirmzitat" zu wählen, indem er auf die entsprechende Schaltfläche klickt. Sobald die Schaltfläche angeklickt ist, sollte sie auf eine andere Seite geleitet werden, die das entsprechende Registrierungsformular anzeigt. In Bezug auf die verschiedenen Anmeldeformulare habe ich das alles aufgebaut. Aber ich habe ein großes Problem in Bezug auf die Funktionalität. Wenn der Benutzer auf die Schaltfläche klickt, sollte die Registrierung auf einer anderen Seite geladen werden. Ich bin mir nicht sicher, wie ich das machen soll. Richtig, nicht ich benutze eine NG-View-Direktive, was bedeutet, dass die Buttons und die anfänglichen Fragen immer noch bleiben. Mein Ziel ist, dass sobald Sie auf den Button klicken, nur noch die entsprechenden/verschiedenen Registrierungsseiten angezeigt werden. Jede Hilfe oder Anweisung würde sehr geschätzt werden. Ich glaube nicht, dass Angular das lösen kann. Danke die Haupt page-> index.htmlSeitenrouting nicht genau wie ich es vorhabe

<html ng-app="myHome"> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
     <title>Home Page</title> 
     <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" /> 
     <link rel="stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css"/> 
     <link rel="stylesheet" href="/css/redirect.css"/> 
     <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"> </script> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><!--This is to call Angular JS--> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
     <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script> 
     <script src="/js/redirect.js"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row" id="rotate"> 
       <div class="col-md-6 col-md-offset-3"> 
        <img src="/css/Logo_75.png"> 
       </div> 
      </div> 
      <div class="row"> 
       <h1>WHAT TYPE OF QUOTE ARE YOU REQUESTING:</h1><br> 
       <h1>DIGITAL OR SCREEN QUOTE?</h1> 
      </div> 
      <div class="row"> 
       <div class="col-md-6 col-md-offset-3"> 
        <button type="button" class="btn btn-success"><a href="#/digital">DIGITAL QUOTE</a></button> 
        <button type="button" class="btn btn-success"><a href="#/screen">SCREEN QUOTE</a></button> 
       </div> 
      </div> 
     </div> 
     <div class="container"> 
     <div ng-view></div> 
     </div> 
    </body> 

Die Winkel JS-Datei oder die redirect.js Datei wie folgt aussieht:

var app = angular.module('myHome', [ngRoute]); 
.config(['$routeProvider', function($routeProvider) { 

    $routeProvider 
     .when('/', { templateUrl: '/index.html' }) 
     .when('/digital', { templateUrl: '/digital.html' }) 
     .when('/screen', { templateUrl: '/screen.html' }) 
     .otherwise({ redirectTo: '/' }); 
}]); 

wo digital.html das Anmeldeformular für die ist digitale Option und screen.html ist die Bildschirm-Registrierungsformularoption. Wenn jemand diese Registrierungsformulare sehen möchte, kann ich auch diese Dateien einfügen. Vielen Dank für deine Hilfe.

+0

was meinst du mit anderer Seite? Neue Registerkarte? Wenn ja, setze das Attribut "target =" _ blank "' auf deinen Link. Dies öffnet die Seite in verschiedenen Tabs. – Rayz

Antwort

1

Wenn der Benutzer auf die Schaltfläche klickt sollte die Registrierung in einer anderen Seite lädt

Wahrscheinlich können Sie es in der nächsten Art und Weise lösen.

Klicken Sie einfach auf die Schaltfläche klicken Sie auf neue Seite vom Server. (Entfernen # von href = "#/digital") und erstellen Sie neue Route (/ digital) in Ihrer serverseitigen Anwendung.

+0

Hallo Pomah, Vielen Dank für Ihre Antwort. Gibt es trotzdem einen Mustercode, wie ich das machen würde? Ich habe vergessen zu erwähnen, dass ich Frontend-Entwickler bin und keine Erfahrung mit Backend-Programmierung habe. Ich vermutete, dass Inwound Knoten für diese Art von Ziel verwenden müsste. Nochmals vielen Dank für Ihre Hilfe – afzaaldeveloper1

+0

Wenn Sie mir hier schreiben ([email protected] können wir es mit weiteren Details besprechen) –

0

Der einzige Weg, dies zu tun ist, Anker-Tag mit target = "blank" zu verwenden. Angular ist total SPA, also wird es (ng-view) niemals erlauben, die Seite in einem neuen Fenster zu öffnen (was ich denke, dass du versuchst). Es ist besser, dass Sie den Tag <a> für Ihren aktuellen Bedarf verwenden.

Verwandte Themen