Question

我正在尝试使用AngularJS制作博客。主页查询我的第三方服务，返回我所有文章/帖子的数组。我在主页上显示这些帖子的缩短版本，并且想要阅读更多＆＃34;在每个帖子下，通过URL参数将该帖子的ID传递到另一个HTML页面：

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' 
  })
});

然而，点击＆＃34;阅读更多＆＃34;链接不会加载post.html，而是加载显示File not found: /post/2B1K9K2DHqsYaGYcms2YeW的网页。由于post.html未加载，因此该路线似乎未正确设置。

Answer 1

这不是很难，但您需要在应用上设置路由。您可以在现有应用中创建此功能，或将其分成新功能，这取决于您。以下是您需要在代码中包含的相关内容：

在您的应用中包含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);

});

显然，根据所有设置的方式，你的实现会有所不同，你可能想要为你的元素选择比我更好的名字，但这些是你需要做的事情来实现这一点。工作。它实际上非常简单。

如何在AngularJS中读取URL参数？

1 个答案: