如何在AngularJS中读取URL参数？

问题描述：

我想用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没有得到加载。

你*可以在'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); 

});

显然，这将是基于一切是如何为您的实现不同，你可能会想选择更好的名字你元素比我做的要多，但这些都是你需要做的工作。这其实很简单。

我尝试添加类似于您的第二条路线的路线。但我似乎无法实现它。我编辑了我原来的帖子，你能告诉我为什么它可能不起作用吗？ –

我认为我的问题可能是我试图将这种方法合并到一个多页面网站中。此路由仅适用于单页角度应用吗？ –

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

如何在AngularJS中读取URL参数？

相关推荐