DetailController 나는이와 각도 응용 프로그램 만든

Question

AngularJS와의 라우팅 JS 스크립트를

/** 
* Services 
**/ 
var app; 

app = angular.module('example.api', ['ngRoute', 'ngResource', 'controllers']); 

app.factory('Post', ['$resource', function($resource) { 
    return $resource('/api/posts/:id', {post: '@id'}); 
}]); 

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/posts/:id', {templateUrl: "static/js/post_detail.html", controller: "PostListController"}) 
        .when('/posts', {template: '<p>No link selected</p>', controller: "PostDetailController"}) 
        .otherwise({redirectTo: '/posts'}); 
}]); 

/** 
* Controllers 
**/ 
var controllers; 

controllers = angular.module('controllers', []); 

controllers.controller('PostListController', ['$scope', 'Post', function($scope, Post) { 
    $scope.posts = Post.query(); 
}]); 

controllers.controller('PostDetailController', ['$scope', 'Post', function($scope, Post) { 
    $scope.post = Post.query(); 
}]); 

이 HTML 템플릿 :

<div class="row" ng-app="example.api"> 
    <div class="col-md-2" ng-controller="PostListController"> 
     <ul> 
      <li ng-repeat="post in posts"> 
       {% verbatim %} 
        <a href="#/posts/{{ ::post.id }}">{{ ::post.id }}</a> 
       {% endverbatim %} 
      </li> 
     </ul> 
    </div> 
    <div class="col-md-10" ng-controller="PostDetailController"> 
     <div ng-view></div> 
    </div> 
</div> 

내 문제가 PostDetailController입니다. $resource을 올바르게 사용하는 방법을 모르겠습니다. 방금 시도했습니다 $scope.post = Post.query()하지만 아마도 변수를 보니 리소스를 말할 필요가 id 생각합니다.

설명서를 검토했지만 아직 파악하지 못했습니다.

내 PostListController에 게시물을로드하기 전에 먼저 내 렌더링되지 않은 템플릿을 표시하는 웹 사이트를 피할 수 있는지 알고 싶습니다. 실제로 문제는 아니지만 렌더링 전에 사이트가 깜박 거리는 것은 추한 것입니다.

Answer 1

1. 특정 항목을 얻으려면 Post.get(id)을 사용하십시오.

2. resolver을 사용하십시오. 이를 통해 새로운 경로로 리디렉션하기 전에 일부 약속을 해결하기 위해 각을 잡습니다.

편집 :

당신은 경로의 ID를 얻기 위해 $routeParams를 삽입해야합니다. 이제 다음과 같이 할 수 있습니다 : $scope.post = Post.get($routeParams.id);