Problems with ui-route using Ruby on Rails. Can't find error.

Vini Bol

unread,

Feb 8, 2015, 3:00:01 PM2/8/15

to ang...@googlegroups.com

Hi guys. I'm very new to AngularJS and programming in general. I've been learning for about a year now and this is my first contact with Angularjs. I'm actually desperate at the moment since I've been struggling with a problem for two weeks and I just can't find the solution. I'm trying to learn how to create apps in angular using ROR as back end. For that I'm using this tutorial https://thinkster.io/angular-rails/ . On the building process of this application I'm supposed how to wire everything up. But I'm facing a problem when loading the templates. THere are no errors shown. But the template simply doesn't render in the ui-route tag.

Below I've pasted the code of the front end. The back end is built in rails. I'm using the assets pipeline to load the files as default in rails.

I apologise if my question is not proper in this group or if there is anything you might need to know i'm not supplying here. A better visualisation of the code can be found in my question at http://stackoverflow.com/questions/28314903/ui-routing-not-redering-with-rails?noredirect=1#comment44979779_28314903 with also a screenshot of the browser with the inspection of the loaded files.

I very much appreciate any help.

application.html.erb

<!DOCTYPE html>

<html>

<head>

<title>FlapperNews</title>

<%= stylesheet_link_tag 'application', media: 'all' %>

<%= javascript_include_tag 'application' %>

<%= csrf_meta_tags %>

</head>

<ui-view></ui-view>

</div>

</body>

</html>

__________________________________________________

app.js

// templateUrl: '/assets/templates/_home.html',

angular.module('flapperNews', ['ui.router', 'templates'])

//Provider

.config([

'$stateProvider',

'$urlRouterProvider',

function($stateProvider, $urlRouterProvider) {

$stateProvider

.state('home', {

url: '/home',

templateUrl: '_home.html',

controller: 'MainCtrl',

resolve: {

postPromise: ['posts', function(posts){

return posts.getAll();

}]

}

})

.state('posts', {

url: '/posts/{id}',

templateUrl: '_posts.html',

controller: 'PostsCtrl',

resolve: {

postPromise: ['posts', function(posts){

return posts.getAll();

}]

}

})

$urlRouterProvider.otherwise('home');

}])

___________________________________________________

_home.html

<h1>Flapper News</h1>

</div>

<span class="glyphicon glyphicon-thumbs-up"

ng-click="incrementUpvotes(post)"></span>

</a>

</span>

<span>

<a href="#/posts/{{$index}}">Comments</a>

</span>

</div>

<form ng-submit="addPost()"

style="margin-top:30px;">

<input type="text"

class="form-control"

placeholder="Title"

ng-model="title">

</div>

<input type="text"

class="form-control"

placeholder="Link"

ng-model="link">

</div>

</form>

</script>

________________________________________________________

mainCtrl.js

angular.module('flapperNews')

//Main Controller

.controller('MainCtrl', [

'$scope',

'posts',

function($scope, posts){

$scope.posts = posts.posts;

$scope.addPost = function(){

if(!$scope.title || $scope.title == '') { return; }

posts.create({

title: $scope.title,

link: $scope.link

});

$scope.title = '';

$scope.link = '';

};

$scope.incrementUpvotes = function(post) {

post.upvotes += 1;

};

}])

If you need any more information then this please let me know. Thanks

Ji

unread,

Feb 8, 2015, 5:15:51 PM2/8/15

to ang...@googlegroups.com

Hi Vini,

The reason why the Template doesn't load properly is because you need to provide Rails asset_path for your templateUrl. This means that if 'home.html' is your templateUrl, you have write this as "<%= asset_path 'home.html' %>". This should do the trick. If this still doesn't work, you have to navigate to the proper asset pipeline.

Cheers

Ji

unread,

Feb 8, 2015, 5:17:07 PM2/8/15

to ang...@googlegroups.com

Hi Vini,

The reason why the Template doesn't load properly is because you need to provide Rails asset_path for your templateUrl. This means that if 'home.html' is your templateUrl, you have write this as "<%= asset_path 'home.html' %>". This should do the trick. If this still doesn't work, you have to navigate to the proper asset pipeline.

Cheers

Ji

On Monday, February 9, 2015 at 7:00:01 AM UTC+11, Vini Bol wrote:

Vinicius Bolzani

unread,

Feb 8, 2015, 5:37:05 PM2/8/15

to ang...@googlegroups.com

Hi. Thanks for your answer. I did what you said as a test. I placed that path ruby code in the application.html.erb where the template is supposed to be loaded but it just returned a text in the screen with that string ‘home.html’.

And in fact I understand I’m not supposed to place a specific path in there, but just the <ui-view> tag which should render the proper template according to the state we call. The weird thing is that if you look at the logs or the network inspection

you can see that the template was loaded, but as javascript. Apparently this is part of the default way this ui-router works but I just don’t know if the problem relates to it somehow.

On 9/02/2015, at 11:15 am, Ji <gaf...@gmail.com> wrote:

<%= asset_path 'home.html' %>

Shawn Fan

unread,

Jul 9, 2015, 4:45:00 PM7/9/15

to ang...@googlegroups.com

Hi Vani,

I've been having the same issue ... No errors but the home.html template does not render. I've looked up online, and even find your StackOverflow post (http://stackoverflow.com/questions/28314903/ui-routing-not-redering-with-rails).

However, removing the javascript tag does not work for me....

Do you have any thoughts on this? Or if you could share with me the functional code for this? Thanks in advance...

Ryan Burbank

unread,

Jul 21, 2015, 9:34:03 PM7/21/15

to AngularJS

Hi Shawn & Vani,

I was having the same problem as you all. Looks like there is a compatibility issue between angular-rails-templates and the current version of sprockets. Here is the relevant StackOverflow post.

My using an older version of sprockets you can fix the problem.

Add this line to your Gemfile:

gem 'sprockets', '2.12.3'

then run:

bundle update sprockets

and you should be good to go.

Best,

Ryan

Vinicius Antonio Bolzani

unread,

Jul 21, 2015, 10:53:00 PM7/21/15

to ang...@googlegroups.com

Did you try Shawn's solution?

If not i'll have a look at my code and send u a sample.
Vinicius Antonio Bolzani

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/6g8HeHaE0lw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Vinicius Bolzani

unread,

Jul 21, 2015, 11:47:56 PM7/21/15

to ang...@googlegroups.com

Have you tried Ryan’s solution Shawn? Removing the script tags worked for me.

Reply all

Reply to author

Forward