2016-11-18 2 views
2

Dies ist meine Heimat-index.js DateiWarum wird mein AngularJS Homepage laden nicht, wenn sie von sich selbst verknüpft

var homeIndexModule = angular.module("homeIndex", ["ngRoute"]); 

homeIndexModule.config(["$routeProvider", function ($routeProvider) { 

    $routeProvider.when("/", { 
     templateUrl: "/templates/topicsView.html", 
     controller: topicsController 
    }) 
    .when("/newmessage", { 
     templateUrl: "/templates/newTopicView.html", 
     controller: newTopicController 
    }) 
    .when("/message/:id", { 
     templateUrl: "/templates/singleTopicView.html", 
     controller: singleTopicController 
    }) 
    .otherwise({ redirectTo: "/" }); 

}]); 

ich eine Basis-HTML-Seite haben, die auf vier Seiten verbindet.

<ul> 
    <li>@Html.ActionLink("Home", "Index", "Home")</li> 
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
    <li>@Html.ActionLink("About", "About", "Home")</li> 
    <li>@Html.ActionLink("My Messages", "MyMessages", "Home")</li> 
</ul> 

Wenn die Seite lädt es geht auf "http:/localhost: 51264/# /", die auf die Homepage geladen und alles funktioniert (die "/templates/topicsView.html" Seite). Aber wenn ich (von dieser Seite) wieder auf den Home-Link klicke, geht es zu "http://localhost:51264/#", ohne den Schrägstrich und das topicsView.html wird nicht geladen. Wenn ich den Schrägstrich zurück gebe, lädt es sich gut.

Wenn ich die Homepage von der Seite Kontakte zugreifen lädt es richtig „http:/localhost: 51264/# /“

wenn „/ # /“ ist der richtige Ort für die Homepage ist das in Ordnung, so lange wie ich sicherstellen konnte, wenn jemand auf "/ #" zugreift, leitet es dorthin um.

+1

Mögliche Duplikat http://stackoverflow.com/questions/29074401/route-to-different-viewuse-html-actionlink-and -ng-view-in-sicht-in-asp-net-mvc – maurycy

Antwort

0

Bitte fügen <base> Tag in Ihrem <head> Tag der Seite

<head> 
    <base href="/"> 
    //Note:- But when you go live replace above line by "sub-context" of your Application URL 
    //e.g Your application is running on www.example.com/testApp/ 
    //then change above <base> tag to <base href="/testApp/"> 
    ... 
</head> 

Zusätzliche, , wenn Sie von URL von '#' loswerden wollen, dann verwenden Sie bitte folgenden Code

app.config(['$locationProvider', function ($locationProvider) {   

    $locationProvider.html5Mode({ 
     enabled: true, 
     requireBase: false 
    }); 
}]) 

Link for Referenz: https://docs.angularjs.org/error/$location/nobase

Ich hoffe, diese Lösung hilft Ihnen bei der Lösung Ihres Problems

-1

Ich habe es selbst nicht getestet, aber ich denke, diese Änderung funktioniert:

<ul> 
    <li>@Html.ActionLink("Home", "#/", "Home")</li> 
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
    <li>@Html.ActionLink("About", "About", "Home")</li> 
    <li>@Html.ActionLink("My Messages", "MyMessages", "Home")</li> 
</ul> 

Nur in verändern obigen Code ist "Index""#/" wurde, so dass Ihre Winkel Weg richtig arbeiten kann.

0

Vielleicht Teil 1 & 2 meiner Antwort HERE Guide Sie Routen zu handhaben und ...

1) # von url

app.config(['$locationProvider', function ($locationProvider) { 

    $routeProvider.when('/any_route', { 
     templateUrl: 'view.html', 
     controller: 'Controller' 
    }) 

    $locationProvider.html5Mode({ 
     enabled: true, 
     requireBase: false 
    }); 

}]); 

2) Überprüfen Sie Ihre MVC Entfernen Routing

Till Vielleicht hatten Sie jetzt einen HomeController, um index.cshtml zurückzugeben und Ihre Angular App hochzufahren.
Nach dem Entfernen # von Angular Routing, müssen Sie MapRoute für alle Ihre Routen festlegen.
Da in dieser Situation das erste Mal Sie versuchen, Routen wie www.site.com/any_route Angular App noch nicht geladen zu besuchen, so versucht es, Seite von MVC Routing zu bekommen. Aber danach $routeProvider seine Pflichten erfüllen.

routes.MapRoute(
    name: "any_route", 
    url: "any_route", 
    defaults: new { 
     controller = "Home", 
     action = "Index", 
     id = UrlParameter.Optional 
    } 
); 
0

habe ich mehrere Idee

  • manuell Route

Die andere ist die letzte Schrägstrich in URL für leere Stelle konfigurieren. Wenn ich zum ersten Mal auf "# /" klicke, winkele die URL nach # // um und lade ng-view. Wenn ich es ein zweites Mal anklicke, weil die aktuelle URL # // ist, ist es nicht identisch mit der URL in der Config ("# /"), auf die ich geklickt habe. Angular löst die Methode zur Standortänderung aus und lädt die ng-view zusätzlich neu Angular leitet die URL erneut zu # // um. Wenn ich das nächste Mal auf die URL klicke, macht eckig dasselbe.

In diesem Fall braucht man eine andere Konfiguration für leere URL zu schreiben,

$routeProvider.when("", { 
     templateUrl: "/templates/topicsView.html", 
     controller: topicsController 
    }) 

Nun, wenn diese URL leer oder mit einem Schrägstrich ist, dann ist es an der richtigen Stelle gehen.

  • Sie gehen zu zwingen, die URL neu laden

Ansonsten: Sie sollten $route.reload() verwenden, um die Reload zu erzwingen. Aber es macht die Seite

zu laden und nehmen Sie einen Blick auf diesem discussions

Verwandte Themen