如何在AngularJS中讀取URL參數？

-1

我想用AngularJS做一個博客。主頁查詢我的第三方服務，返回所有我的文章/帖子的數組。我顯示在主頁上這些職位的縮短版本，並希望有下，通過URL參數傳遞該職位的ID到另一個HTML頁面每篇文章「更多」：如何在AngularJS中讀取URL參數？

的index.html：

<div ng-controller="blogCtrl" id="blog"> 
    <div class="post" ng-repeat="post in posts"> 
     <div class="header"> 
     <h1>{{ post.fields.title }}</h1> 
     <p class="date">{{ post.sys.createdAt | date}}</p> 
     </div> 

     <p>{{ post.fields.body | cut:true:1600:' ...'}}</p> 

     <a href="post.html?id={{ post.sys.id }}">read more</a> 
    </div> 
    </div>

我需要做什麼post.html，以便我可以讀取URL參數中的值id？我是否需要在post.html中創建一個新的angularJS應用程序？

編輯：

我已經改變了閱讀更多鏈接<a href="post/{{post.sys.id}}">，我試圖建立以下途徑：

app.config(function($routeProvider){ 
    $routeProvider 
    .when('/post/:postid',{ 
    templateUrl: '/post.html', 
    controller: 'postCtrl' 
    }) 
});

然而，點擊「更多」鏈接不加載post.html，而是一個頁面，說File not found: /post/2B1K9K2DHqsYaGYcms2YeW。該路線似乎沒有得到適當的設置，因爲post.html沒有得到加載。

來源

2015-09-05 Sam D20

你*可以在'post.html'頁面創建一個新的角度應用程序，但更好的方法是使用路由器，如角度路由器或ui-router來處理路由並將角度用作單頁面應用程序溫泉）。通過這種方式，您沒有另外一個名爲post.html的頁面。 – Claies

事實上，有更多優雅的方式來處理'read more'鏈接，甚至不需要新的頁面。 – Claies

我絕對正在考慮有一個SPA風格的博客，但暫時，併爲了學習的目的，我希望各個職位有自己的網頁。是否可以使用角度路由與單個角度的應用程序，並有多個HTML頁面？ –

這並不是所有這些都很難做到的，但是您需要在您的應用中設置路由。您可以在現有的應用程序中創建此功能，或將其分離爲新的應用程序，這取決於您。下面是你需要在代碼中包括相關的事情：

在您的應用程序包括ngRoute作爲一個依賴：

var myApp = angular.module('myApp', ['ngRoute']);

還包括你的應用程序的路由配置：

myApp.config(function($routeProvider){ 

    $routeProvider 
     .when('/someroute', { 
      templateUrl: 'someFolder/withSomeFile.html' 
     } 
     .when('/someroutewithparamters/:aftercolonisparameter', { 
      templateUrl: 'someFolder/post.html' 
     } 

});

您也可以包含一條默認路線，但如果您不願意，則不需要。請確保在您的index.html中包含angular-route.js以使其正常工作。

現在在你的控制器，你可以簡單地這樣做：

myApp.controller('postCtrl', function($routeParams, $scope, postFactory){ 

    $scope.post = postFactory.functionToLoadPost($routeParams.aftercolonisparameter); 

});

顯然，這將是基於一切是如何爲您的實現不同，你可能會想選擇更好的名字你元素比我做的要多，但這些都是你需要做的工作。這其實很簡單。

來源

2015-09-05 20:04:20

我嘗試添加類似於您的第二條路線的路線。但我似乎無法實現它。我編輯了我原來的帖子，你能告訴我爲什麼它可能不起作用嗎？ –

我認爲我的問題可能是我試圖將這種方法合併到一個多頁面網站中。此路由僅適用於單頁角度應用嗎？ –

您是否在index.html中包含了角度路由文件，或者是否包含ng-app屬性的文件？像這樣：''？ –

如何在AngularJS中讀取URL參數？

回答

相關問題