1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Angular Navigation

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von meste, 13. September 2017.

  1. meste

    meste Erfahrenes Mitglied

    Hallo allerseits,

    habe eine Frage bzgl. html Datei in div laden.

    In einer Index.html sind einige Buttons definiert und ein div in welcher der Content geladen werden soll
    Code (Text):
    1.     <div ng-controller="HomeController">
    2.         <a ng-href="#" ID="btnHome" data-ng-click="start2Change('home');">Home</a>&nbsp;&nbsp;&nbsp;
    3.         <a ng-href="#" ID="btnWeb" data-ng-click="start2Change('media');">Media</a>&nbsp;&nbsp;&nbsp;
    4.         <a ng-href="#" ID="btnSound" ng-click="start2Change('sound');">Sound</a>&nbsp;&nbsp;&nbsp;
    5.         <a ng-href="#" ID="btnPress" ng-click="start2Change('press');">Presse</a>&nbsp;&nbsp;&nbsp;
    6.     </div>
    7.    
    8.     <div class="page">
    9.         <div ng-view></div>
    10.     </div>
    In der JS-Datei wird im Controller der Event abgefangen und die HTML-Datei wird übergeben
    Code (Text):
    1. (function (module) {
    2.     module.controller("HomeController", function ($scope, $location, $http) {
    3.         $scope.start2Change = function (newRoute) {
    4.             $location.path("Sites/" + newRoute + ".html");
    5.             $scope.Url = "Sites/" + newRoute + ".html";
    6.             $scope.templateUrl ="Sites/" + newRoute + ".html";
    7.         };
    8.     });
    9. }(angular.module("TestSol")));
    Doch leider wird der div nie mit anderen HTML Dateien befüllt.
    Woran liegt das bzw. was mache ich falsch.


    Habe es auch mit config/routeProvider probiert was auch zu keinen Erfolg führt.
    Code (Text):
    1.     <a ng-href="#/home" ID="btnHome" ...></a>
    2.     <a ng-href="#/media" ID="btnWeb" ...></a>
    3.  
    4.  
    5.     app.config(['$routeProvider', function ($routeProvider) {
    6.         $routeProvider
    7.             .when("/media", { templateUrl: "Sites/media.html", controller: "HomeController" })
    8.             .when("/sound", { templateUrl: "Sites/sound.html", controller: "HomeController" })
    9.             .when("/press", { templateUrl: "Sites/presse.html", controller: "HomeController" })
    10.             .when("/cont", { templateUrl: "Sites/contact.html", controller: "HomeController" })
    11.             .when("/imp", { templateUrl: "Sites/impressum.html", controller: "HomeController" })
    12.             .otherwise({ redirectTo: "Sites/home.html", controller: "HomeController" });
    13.     }]);

    In beiden Fällen kann keine HTML-Datei in das div-Element geladen werden.

    Ziel ist es die Index.html so was wie eine Masterpage zu behandeln und den Inhalt von anderen HTML-Seiten zu laden.


    Wäre für jede Hilfe sehr dankbar

    Lg
    m.e.s.t.e
     
  2. Quaese

    Quaese Moderator Moderator

    Hi,

    das route-Modul rendert das Ergebnis/das neue Templat in die ngView-Direktive (ng-view). Im $routeProvider werden Routen konfiguriert, denen ein Objekt mit zahlreichen Eigenschaften übergeben werden kann. Unter anderem besitzt es die Eigenschaft controller - in diesem kann die Behandlung des neuen Scopes, dh. des Scopes nach dem Ändern der Route, beschrieben werden.

    Baue das HTML mit Navigation wie folgt um - die Routen werden über das href-Attribut übergeben:
    HTML:
    1. <div>
    2.   <a href="#" ID="btnHome">Home</a>
    3.   <a href="#/media" ID="btnWeb">Media</a>
    4.   <a href="#/sound" ID="btnSound">Sound</a>
    5.   <a href="#/press" ID="btnPress">Presse</a>
    6. </div>
    7. <div class="page">
    8.   <div ng-view></div>
    9. </div>
    Und ändere den Router:
    Code (Javascript):
    1. app.config(['$routeProvider', function ($routeProvider) {
    2.     $routeProvider
    3.         .when("/media", { templateUrl: "Sites/media.html" })
    4.         .when("/sound", { templateUrl: "Sites/sound.html" })
    5.         .when("/press", { templateUrl: "Sites/presse.html" })
    6.         .when("/cont", { templateUrl: "Sites/contact.html" })
    7.         .when("/imp", { templateUrl: "Sites/impressum.html" })
    8.         .otherwise({ redirectTo: "Sites/home.html" });
    9. }]);
    Vielleicht hilft dir das weiter. Ansonsten hilft ein Blick in die Konsole - vielleicht wurde ein falsche Pfad zu den Templates vergeben oder ähnliches.

    Ciao
    Quaese
     
Die Seite wird geladen...