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

Posted

技术标签:

【中文标题】Angularjs - 动态页面,相同的模板,如何通过 id 访问和加载文章【英文标题】:Angularjs - dynamic pages, same template, how to access and load article by id 【发布时间】:2013-12-12 04:53:51 【问题描述】:

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

如果你想到一个普通的博客,,,,说,,我是用phpmysql构建的。。我不明白的是我如何让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?我想我对路由感到困惑。

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

谢谢!

【问题讨论】:

【参考方案1】:

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

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,现在奇迹发生了 ;)

首先,您需要将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
    );
  ]);

现在您知道控制器中的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 很容易! 干杯!

【讨论】:

非常感谢!我仍然有点挣扎,但随着我的努力变得越来越容易。我需要掌握身份验证和其他一些东西,它会变得更好。【参考方案2】:

我认为您要为此使用的是 $routeParams。看看 egghead.io 的这个视频,它解释了如何使用它:

http://egghead.io/lessons/angularjs-routeparams

【讨论】:

本视频介绍了如何将参数传递给控制器​​。然后,您需要使用该参数进行 AJAX 调用,以获取博客数据或帖子内容的 HTML。 好的,我知道如何使用它来构建我的链接并传递参数。我会玩这个。当您说 AJAX 时,您指的是 angularjs $http?我很想看到它的实际效果,但这个视频确实很有帮助。【参考方案3】:

使用哈希导航是一种很好的做法。所以你的路由应该是这样的

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

【讨论】:

以上是关于Angularjs - 动态页面,相同的模板,如何通过 id 访问和加载文章的主要内容,如果未能解决你的问题,请参考以下文章

如何使用angularjs处理动态菜单

同时打开共享相同指令的2个下拉列表

AngularJS地址栏变化为啥不跳转到页面

AngularJS 具有相同模板的多个路由不应重新渲染

AngularJS 路由精分

AngularJS:从列表中动态添加组件