Angular Navigation

[meste]

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

    <div ng-controller="HomeController">
        <a ng-href="#" ID="btnHome" data-ng-click="start2Change('home');">Home</a>&nbsp;&nbsp;&nbsp;
        <a ng-href="#" ID="btnWeb" data-ng-click="start2Change('media');">Media</a>&nbsp;&nbsp;&nbsp;
        <a ng-href="#" ID="btnSound" ng-click="start2Change('sound');">Sound</a>&nbsp;&nbsp;&nbsp;
        <a ng-href="#" ID="btnPress" ng-click="start2Change('press');">Presse</a>&nbsp;&nbsp;&nbsp;
    </div>
   
    <div class="page">
        <div ng-view></div>
    </div>

In der JS-Datei wird im Controller der Event abgefangen und die HTML-Datei wird übergeben

(function (module) {
    module.controller("HomeController", function ($scope, $location, $http) {
        $scope.start2Change = function (newRoute) {
            $location.path("Sites/" + newRoute + ".html");
            $scope.Url = "Sites/" + newRoute + ".html";
            $scope.templateUrl ="Sites/" + newRoute + ".html";
        };
    });
}(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.

    <a ng-href="#/home" ID="btnHome" ...></a>
    <a ng-href="#/media" ID="btnWeb" ...></a>


    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when("/media", { templateUrl: "Sites/media.html", controller: "HomeController" })
            .when("/sound", { templateUrl: "Sites/sound.html", controller: "HomeController" })
            .when("/press", { templateUrl: "Sites/presse.html", controller: "HomeController" })
            .when("/cont", { templateUrl: "Sites/contact.html", controller: "HomeController" })
            .when("/imp", { templateUrl: "Sites/impressum.html", controller: "HomeController" })
            .otherwise({ redirectTo: "Sites/home.html", controller: "HomeController" });
    }]);

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

 

[Quaese]

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:

<div>
  <a href="#" ID="btnHome">Home</a>
  <a href="#/media" ID="btnWeb">Media</a>
  <a href="#/sound" ID="btnSound">Sound</a>
  <a href="#/press" ID="btnPress">Presse</a>
</div>
<div class="page">
  <div ng-view></div>
</div>

Und ändere den Router:

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when("/media", { templateUrl: "Sites/media.html" })
        .when("/sound", { templateUrl: "Sites/sound.html" })
        .when("/press", { templateUrl: "Sites/presse.html" })
        .when("/cont", { templateUrl: "Sites/contact.html" })
        .when("/imp", { templateUrl: "Sites/impressum.html" })
        .otherwise({ redirectTo: "Sites/home.html" });
}]);

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