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

I am slightly puzzled on how to use angularjs to build a blog-like web site.

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

If you think of an ordinary blog,,, and say,, I am building it using php and mysql.. what I don't understand is how do I make angular get an article based on id..

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

I can load data for a list of all articles.. I can load data for a single page (from a static json),, I understand how to send http requests,, but how do I access

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

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

Obviously, I want to load the same template for each separate blog post.. but I have not yet seen a single example that explains this simply.

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

If I have three posts in my database with id 1,2,3 how is angular meant to generate links to each individual article? I understand that I can load data to assemble urls but what urls? I suppose I am confused with routing.

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

Could you recommend a SIMPLE and understandable example of this? Could you suggest how to think about this?

你能推荐一个简单易懂的例子吗?你能建议怎么想这个吗?

Thanks!

3 个解决方案

#1

In this short explanation I will use examples based on official tutorial. Propably somwhere in your application you created controllers module with code close to that:

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

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

// other controllers etc.

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

We will be back here in a moment :) If you have controllers module, you can create a route linked to the specific 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...
  }]);

Well but what we can do with this :postId parameter? Lets go back to our controller:

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

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

As you see, we are passing $routeParams here and then our BlogPost resource (it will be explained). Simplifying (again), in $routeParams you have all the params that you put in the $routeProvider for exact route (so :postId in our example). We got the id, now the magic happens ;)

如您所见,我们在此处传递$ routeParams,然后传递BlogPost资源(将对其进行解释)。简化(再次),在$ routeParams中,您拥有所有在$ routeProvider中放置精确路径的参数(因此:在我们的示例中为postId)。我们得到了id,现在魔术发生;)

First you need to add services and/or factories to your app (and look, we are using ngResource):

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

Now you know what is our BlogPost in controller :) As you see default value for postId is "all" and yes, our api should retrieve all posts for postId = "all". Of course you can do this in your own way and separate this to two factories, one for details and one for list/index.

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

How to print all of the blog names? Quite simple. Add list routing without any special params. You already know how to do this so let's skip it and continue with our list controller:

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

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

Voila! All posts in our $scope variable! Thanks to this, they are accessible in the template/view :) Now we just need to iterate those posts in our view, for example:

瞧! $ scope变量中的所有帖子!多亏了这个,它们可以在模板/视图中访问:)现在我们只需要在视图中迭代这些帖子,例如:

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

And this is it:) I hope you will find AngularJS quite easy now! Cheers!

就是这样:)我希望你现在能够轻松找到AngularJS!干杯!

#2

I think what you want to use for this is $routeParams. Have a look at this video from egghead.io which explains how to use it:

我想你想要用的是$ routeParams。看一下egghead.io上的这个视频,它解释了如何使用它:

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

#3

It's a good practice to use hash navigation. So your routing should look like this

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

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

#1