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

Question

我对如何使用 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？我想我对路由感到困惑。

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

谢谢!

Answer 1

在这个简短的解释中，我将使用基于 official tutorial 的示例.可能在您的应用程序的某个地方您创建了 Controller 模块，代码接近于此:

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

// other controllers etc.

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

我们稍后会回来 :) 如果您有 Controller 模块，您可以创建链接到特定 Controller 的路由:

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...
  }]);

但是我们可以用这个 :postId 参数做什么呢？让我们回到我们的 Controller :

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

如您所见，我们在此处传递 $routeParams，然后传递我们的 BlogPost 资源(稍后会对此进行解释)。再次简化，在 $routeParams 中，您拥有放入 $routeProvider 中的所有参数以获取确切路线(因此我们的 :postId例子)。我们得到了 id，现在奇迹发生了 ;)

首先你需要添加services and/or factories到您的应用程序(看，我们正在使用 ngResource ):

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

blogServices.factory('BlogPost', ['$resource',
  function($resource){
    return $resource('action/to/get/:postId.json', {}, {
      query: {method:'GET', params: { postId: 'all' }, isArray:true}
    });
  }]);

现在你知道 Controller 中的 BlogPost 是什么了 :) 如你所见，postId 的默认值为“all”，是的，我们的 api 应该检索 postId 的所有帖子=“全部”。当然你可以用你自己的方式来做，把它分成两个工厂，一个用于细节，一个用于列表/索引。

如何打印所有的博客名称？非常简单。添加没有任何特殊参数的列表路由。您已经知道如何执行此操作，所以让我们跳过它并继续我们的列表 Controller :

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

瞧!我们的 $scope 变量中的所有帖子!由于这一点，它们可以在模板/ View 中访问 :) 现在我们只需要在我们的 View 中迭代这些帖子，例如:

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

就是这样:)我希望你现在会发现 AngularJS 非常简单!干杯!