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

在这个简短的解释中，我将使用基于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中用于确切路由（在我们的示例中为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} }); }]);）。我们得到了id，现在魔术发生了;）

首先，您需要将services and/or factories添加到您的应用中（看看，我们正在使用ngResource）：

BlogPost

现在您知道控制器中的postId是什么:)如您所见，blogControllers.controller('BlogListCtrl', ['$scope', 'BlogPost', function($scope, BlogPost) { $scope.blogPosts = BlogPost.query(); // no params, so we are taking all posts }]);的默认值为“all”，是的，我们的api应检索postId =“all”的所有帖子。当然，您可以按照自己的方式执行此操作，并将其分为两个工厂，一个用于详细信息，另一个用于列表/索引。

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

$scope

瞧！我们<ul class="blog-posts"> <li ng-repeat="blogPost in blogPosts"> <a href="#/post/{{blogPost.id}}">{{blogPost.title}}</a> </li> </ul>变量中的所有帖子！多亏了这个，它们可以在模板/视图中访问:)现在我们只需要在视图中迭代这些帖子，例如：

{{1}}

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

Answer 2

我认为您想要使用的是$ routeParams。看看egghead.io上的这个视频，它解释了如何使用它：

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

Answer 3

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

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

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

3 个答案: