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

Question

我对如何使用angularjs构建类似博客的网站感到有些困惑.

如果你想到一个普通的博客,,,并说,我正在使用php和mysql构建它..我不明白的是我如何使角度得到一个基于id的文章..

我可以为所有文章的列表加载数据..我可以为单个页面加载数据(来自静态json),我了解如何发送http请求,但我如何访问

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

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

如果我的数据库中有三个帖子,ID为1,2,3角度是如何生成每个单独文章的链接的？我知道我可以加载数据来组装网址但是网址是什么？我想我对路由感到困惑.

你能推荐一个SIMPLE,可以理解的例子吗？你能建议怎么想这个吗？

谢谢!

Answer 1

在这个简短的解释中,我将使用基于官方教程的示例.在您的应用程序中,您可以创建控制器模块,其代码接近于:

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

那么我们可以用这个:postId参数做什么呢？让我们回到我们的控制器:

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

如你所见,我们正在经过$routeParams这里,然后是我们的BlogPost资源(将会解释).简化(再次),$routeParams你拥有所有$routeProvider准确路线中的参数(:postId在我们的例子中).我们得到了id,现在魔术发生;)

首先,您需要向您的应用添加服务和/或工厂(看起来,我们正在使用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}
    });
  }]);

现在你知道我们BlogPost的控制器是什么:)正如你看到的默认值postId是"all"和是的,我们的api应该检索postId ="all"的所有帖子.当然,您可以按照自己的方式执行此操作,并将其分为两个工厂,一个用于详细信息,另一个用于列表/索引.

如何打印所有博客名称？非常简单.添加列表路由,没有任何特殊参数.你已经知道如何做到这一点,让我们跳过它并继续我们的列表控制器:

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!干杯!