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.
