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: > > 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> > <body ng-app="flapperNews"> > <div class="row"> > <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 > > <script type="text/ng-template" id="/home.html"> > <div class="page-header"> > <h1>Flapper News</h1> > </div> > > <div ng-repeat="post in posts | orderBy:'-upvotes'"> > <span class="glyphicon glyphicon-thumbs-up" > ng-click="incrementUpvotes(post)"></span> > {{post.upvotes}} > <span style="font-size:20px; margin-left:10px;"> > <a ng-show="post.link" href="{{post.link}}"> > {{post.title}} > </a> > <span ng-hide="post.link"> > {{post.title}} > </span> > </span> > <span> > <a href="#/posts/{{$index}}">Comments</a> > </span> > </div> > > <form ng-submit="addPost()" > style="margin-top:30px;"> > <h3>Add a new post</h3> > > <div class="form-group"> > <input type="text" > class="form-control" > placeholder="Title" > ng-model="title"> > </div> > <div class="form-group"> > <input type="text" > class="form-control" > placeholder="Link" > ng-model="link"> > </div> > <button type="submit" class="btn btn-primary">Post</button> > </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 > > > -- 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.
