I have a basic question, taking the first steps with angular.

The example has 3 different routings, which vary in the number of parameters 
they 
receive. I have no problem with root access or dressed by the PostCreate 
controller. But I get error accessing with "/post/id", ie two arguments in 
the URL.

Examples:
1) http://localhost:8080/ => ok, display views/post-list.tpl.html

2) http://localhost:8080/new => ok, display views/post-create.tpl.html

3) http://localhost:8080/post/2 => error, not display 
views/post-detail.tpl.html
Error: "Cannot GET /post/views/post-detail.tpl.html"
It is this trying to find the template in the "post" folder, which is the 
first parameter of the url.

Some code to understand the problem:

app.js

(function () {
  'use strict';

  /* @ngInject */
  angular.module('blog', ['ngRoute', 'blog.controllers', 'blog.services']);

  /* @ngInject */
  function config ($locationProvider, $routeProvider) {
    // saca # en la url
    $locationProvider.html5Mode(true);

    $routeProvider
      .when('/', {
        templateUrl: 'views/post-list.tpl.html',
        controller: 'PostListCtrl',
        controllerAs: 'postlist'
      })
      .when('/post/:postId', {
        templateUrl: 'views/post-detail.tpl.html',
        controller: 'PostDetailCtrl',
        controllerAs: 'postdetail'
      })
      .when('/new', {
        templateUrl: 'views/post-create.tpl.html',
        controller: 'PostCreateCtrl',
        controllerAs: 'postcreate'
      });      

  }

/* @ngInject */
  angular
    .module('blog')
    .config(config);

})();


controllers.js

(function () {
  'use strict';
 
  /* @ngInject */
  angular
    .module('blog.controllers', ['blog.services']);

  /* @ngInject */
  function PostListCtrl (Post) {
    this.posts = Post.query();
  }

  /* @ngInject */
  function PostDetailCtrl ($routeParams, Post, Comment, User) {
    this.user = {};
    this.post = {};
    this.comments = {};

    var self = this;

    Post.query({ id: $routeParams.postId })
      .$promise.then(
        // success
        function (data) {
          self.post = data[0];
          self.user = User.query({ id: self.user.userId });
        },
        // error
        function (error) {
          console.log('ERROR: ' + error);
        }
      );

    this.comments = Comment.query({ postId: $routeParams.postId });

  }

function PostCreateCtrl (Post) {
  var self = this;

  this.create = function() {
    Post.save(self.post);
  };
}

angular
    .module('blog.controllers')
    .controller('PostListCtrl', PostListCtrl)
    .controller('PostDetailCtrl', PostDetailCtrl)
    .controller('PostCreateCtrl', PostCreateCtrl);

})();


index.html

    <div class="container-fluid">
        <div class="row">
            <aside class="col-sm-3">
                <a ng-href="/new">Crear Entrada</a>
            </aside>
            <section class="col-sm-9" ng-view></section>
        </div>
    </div>   

 post-list.tpl.html

<ul class="blog-post-list">
  <li class="blog-post-link" ng-repeat="post in postlist.posts">
    <a ng-href="/post/{{ post.id }}">{{ post.title }}</a>
  </li>
</ul>


Thanks for your time and help.

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to