Javascript Angularjs-动态页面，相同的模板，如何通过id访问和加载文章

我对如何使用angularjs构建一个类似博客的网站有点困惑

如果你想到一个普通的博客，然后说，我正在用php和mysql构建它。。我不明白的是，我如何让angular获得基于id的文章

我可以加载所有文章列表的数据。。我可以加载单个页面的数据（从静态json），我知道如何发送http请求，但如何访问

mysite.com/page?id=1 or 
mysite.com/page?id=2 or 
mysite.com/page?id=3

显然，我想为每个单独的博客文章加载相同的模板。。但我还没有看到一个简单的例子来解释这一点

如果我的数据库中有三篇id为1,2,3的文章，angular如何生成每个文章的链接？我知道我可以加载数据来组装URL，但是什么URL？我想我被路线弄糊涂了

你能推荐一个简单易懂的例子吗？你能建议一下怎么考虑这个问题吗

---

谢谢

我想你想用$routeParams来做这个。请看来自egghead.io的这段视频，其中解释了如何使用它：

---

使用散列导航是一种很好的做法。所以你的路线应该是这样的

mysite.com/blog/#!/id=1
mysite.com/blog/#!/id=2

---

在这个简短的解释中，我将使用基于的示例。 可能在应用程序中，您在其中创建了控制器模块，代码与此接近：

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

// other controllers etc.

blogControllers.controller('BlogPostCtrl', ['$scope',
// more and more of controller code

我们马上回来：）如果您有控制器模块，您可以创建链接到特定控制器的路由：

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

blogApp .config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      // other routes
      when('/post/:postId', {
        templateUrl: 'partials/blog-post.html',
        controller: 'BlogPostCtrl'
      }).
      // other...
  }]);

blogControllers.controller('BlogPostCtrl', ['$scope', '$routeParams', 'BlogPost',
  function($scope, $routeParams, BlogPost) {
    $scope.post = BlogPost.get({postId: $routeParams.postId});
  }]);

blogControllers.controller('BlogListCtrl', ['$scope', 'BlogPost',
  function($scope, BlogPost) {
    $scope.blogPosts = BlogPost.query(); // no params, so we are taking all posts
  }]);

但是我们可以用这个

：postId

参数做什么呢？让我们回到控制器：

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

blogApp .config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      // other routes
      when('/post/:postId', {
        templateUrl: 'partials/blog-post.html',
        controller: 'BlogPostCtrl'
      }).
      // other...
  }]);

blogControllers.controller('BlogPostCtrl', ['$scope', '$routeParams', 'BlogPost',
  function($scope, $routeParams, BlogPost) {
    $scope.post = BlogPost.get({postId: $routeParams.postId});
  }]);

blogControllers.controller('BlogListCtrl', ['$scope', 'BlogPost',
  function($scope, BlogPost) {
    $scope.blogPosts = BlogPost.query(); // no params, so we are taking all posts
  }]);

如您所见，我们在这里传递

$routeParams

，然后传递我们的

BlogPost

资源（将对此进行解释）。（再次）简化，在

$routeParams

中，您拥有您在

$routeProvider

中输入的用于精确路线的所有参数（在我们的示例中为so

：postId

）。我们拿到了身份证，现在魔法发生了；）

首先，你需要添加到你的应用程序中（看，我们正在使用）：

现在您知道控制器中的

BlogPost

是什么了：）正如您看到的

postId

的默认值是“all”，是的，我们的api应该检索postId=“all”的所有帖子。当然，您可以用自己的方式完成这项工作，并将其分为两个工厂，一个用于详细信息，另一个用于列表/索引

如何打印所有博客名称？很简单。添加没有任何特殊参数的列表路由。您已经知道如何执行此操作，因此让我们跳过它，继续使用我们的列表控制器：

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

blogApp .config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      // other routes
      when('/post/:postId', {
        templateUrl: 'partials/blog-post.html',
        controller: 'BlogPostCtrl'
      }).
      // other...
  }]);

blogControllers.controller('BlogPostCtrl', ['$scope', '$routeParams', 'BlogPost',
  function($scope, $routeParams, BlogPost) {
    $scope.post = BlogPost.get({postId: $routeParams.postId});
  }]);

blogControllers.controller('BlogListCtrl', ['$scope', 'BlogPost',
  function($scope, BlogPost) {
    $scope.blogPosts = BlogPost.query(); // no params, so we are taking all posts
  }]);

瞧！我们的

$scope

变量中的所有帖子！由于这一点，它们可以在模板/视图中访问：）现在我们只需要在视图中迭代这些帖子，例如：

<ul class="blog-posts">
    <li ng-repeat="blogPost in blogPosts">
        <a href="#/post/{{blogPost.id}}">{{blogPost.title}}</a>
    </li>
</ul>

就是这样：）我希望你会发现AngularJS现在很容易！

---

干杯

本视频介绍如何将参数传递给控制器。然后，您需要使用该参数进行AJAX调用，以获取日志内容的博客数据或HTML。好的，我看看如何使用该参数来构建链接和传递参数。我要玩这个。当你说AJAX时，你指的是angularjs$http？我很想看到它的实际应用，但这段视频确实有很大帮助。非常感谢！我仍然有点挣扎，但随着我的前进，它变得越来越容易。我需要掌握身份验证和其他一些东西，它会变得更好。