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

我对如何使用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,角度意味着如何生成指向每篇文章的链接? 我知道我可以加载数据来组装网址,但网址是什么? 我想我对路由感到困惑。

你能推荐一个简单和可以理解的例子吗? 你能建议如何思考这个吗?

谢谢!


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

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在我们的示例中为: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非常容易! 干杯!


我认为你想用这个是$ routeParams。 看看这个来自egghead.io的视频,它解释了如何使用它:

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


使用散列导航是一种很好的做法。 所以你的路由应该看起来像这样

mysite.com/blog/#!/id=1
mysite.com/blog/#!/id=2
链接地址: http://www.djcxy.com/p/77893.html

上一篇: dynamic pages, same template, how to access and load article by id

下一篇: Angularjs Best Practice for Data Store