2013-08-07 9 views
17

URL Get Teil der URL in AngularJS

person/show/31586#tab1 

Ist

person/show/31586 

oder

sein kann, es möglich, die ID in Winkel Art und Weise zu bekommen? Das Routing wird nicht von angular verwaltet. Die obige URL lädt eine Seite und nur einige Inhalte auf der Seite werden von angular verwaltet.

Antwort

33

Der Dienst $location analysiert die URL aus der Adressleiste des Browsers und stellt die URL für Ihre App zur Verfügung. Da Sie normale URL-Pfad- und Suchsegmente verwenden, müssen Sie html5Mode mit $locationProvider auf true festlegen.

Standardmäßig verwendet $locationProvider hashbangs. Wenn Sie also html5Mode nicht auf true setzen, erhalten Sie eine leere Zeichenfolge, wenn Sie versuchen, den URL-Pfad abzurufen.

Nachdem Sie html5mode festgelegt haben, können Sie den URL-Pfad mit dem $location-Dienst abrufen und eine eigene Regel schreiben, um den Pfad zu verarbeiten.

Zum Beispiel davon ausgehen, dass Ihre vollständige URL wie folgt aussieht: http://example.com/person/show/321

Dann in main.js Sie haben könnten:

angular.module("MyAPP",[],function($locationProvider){ 
    $locationProvider.html5Mode(true); 
}); 

function MainController($location){ 
    var pId = $location.path().split("/")[3]||"Unknown"; //path will be /person/show/321/, and array looks like: ["","person","show","321",""] 
    console.log(pId); 
} 

Und in index.html könnten Sie haben:

<!DOCTYPE html> 
<html lang="en" ng-app="MyAPP"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Angular test</title> 
    </head> 
    <body ng-controller="MainController"> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
     <script src="js/main.js"></script> 
    </body> 
</html> 

Hope Diese ist hilfreich für dich.

+0

In diesem Szenario ist der einzige Vorteil der Verwendung von Injektions $ Ortsabhängigkeit? (Scheint wie NG sollte eine bequeme API zur Verfügung stellen ...) – ryanwebjackson

13

Wenn Sie das letzte Stück der Schnur bekommen möchten, können Sie so etwas wie dieses

function MainController($location){ 
    var pId = $location.path().split(/[\s/]+/).pop(); 
    console.log(pId);   //321 
} 
1

Falls jemand anderen Ländern hier tun Hilfe suchend in Bezug auf die URL in Angular abruft. Gelegentlich müssen möglicherweise eine der absUrl zugreifen:

console.log($location.absUrl()); 
http://127.0.0.1:3000/home