This is my first dive into Angular/the MEAN stack, and I am following along with this tutorial. Have been trying get my routing right, but for now I am faced with a blank index.html that will not route to home or display any html...
Can anyone catch the fault with my routing/configuration?
Here's a fiddle with my existing HTML/JS copied and pasted.
The HTML:
<html> <head> <title>Reddit Clone</title> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script> <script src="app.js"></script> <style> .glyphicon-thumbs-up { cursor:pointer } </style> </head> <body ng-app="redditClone"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <ui-view></ui-view> </div> </div> <script type="text/ng-template" id="/home.html"> <div class ="page-header"> <h1> Reddit Clone</h1> <span> <a href="#/posts/{{$index}}">Comments</a></span> </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"></input> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Link" ng-model="link"></input> </div> <button type="submit" class="btn btn-primary">Post</button> </form> </script> <script type="text/ng-template" id="/posts.html"> <div class="page-header"> <h3> <a ng-show="post.link" href="{{post.link}}"> {{post.title}} </a> <span ng-hide="post.link"> {{post.title}} <span> </h3> </div> <div ng-repeat="comment in post.comments | orderBy:'-upvotes'"> <span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(comment)"> </span> {{comment.upvotes}} - by {{comment.author}} <span style="font-size:20px; margin-left:10px;"> {{comment.body}} </span> </div> <form ng-submit="addComment()" style="margin-top:30px;"> <h3>Add a new comment</h3> <div class="form-group"> <input type="text" class="form-control" placeholder="Comment" ng-model="body"></input> </div> <button type="submit" class="btn btn-primary">Post</button> </form> </script> </body> </html> The JS:
var app = angular.module('redditClone', ['ui.router']); // configuration app.config([ '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url: '/home', templateUrl:'/home.html', controller: 'MainCtrl' }); .state('posts', { url: '/posts/{id}', templateUrl: '/posts.html', controller: 'PostsCtrl' }); urlRouterProvider.otherwise('home'); }]); // FACTORY app.factory('posts', [function(){ var o = { posts: [] }; return o; }]) // CONTROLLERS app.controller('MainCtrl', [ '$scope', 'posts', function($scope, posts){ $scope.test = 'Hello World!'; $scope.posts = posts.posts; $scope.addPost = function() { if (!$scope.title || $scope.title ==='') {return;} $scope.posts.push({ title: $scope.title, link: $scope.link, upvotes: 0, comments: [ {author: 'Joe', body: 'Cool post!', upvotes: 0}, {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0} ] }); $scope.title = ''; $scope.link = ''; } $scope.incrementUpvotes = function(post) { post.upvotes += 1; } }]) app.controller('PostsCtrl', [ '$scope', '$stateParams', 'posts', function($scope, $stateParams, posts){ $scope.post = posts.posts[$stateParams.id]; $scope.addComment = function() { if($scope.body === '') {return;} $scope.post.comments.push({ body: $scope.body, author: 'user', upvotes: 0 }); scope.body= ''; } }]); 
