-I have made an EDIT at the bottom of my original post -For my plunker, please visit this link
Currently, I am learning AngularJS by following a tutorial located here.
At this moment, I am stuck on the step called 'Faking comment data'. I have created various models and a service in my float.js file. However, there seems to be an issue as I am unable to view any posts that contain the fake data I added. Can someone provide guidance on what needs to be corrected for me to see this fake data as instructed in the tutorial?
Below is the content of float.js:
angular.module('FLOAT', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$stateProvider
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}])
angular.module('FLOAT', [])
.factory('posts', [function(){
var o = {
posts: []
};
return o;
}])
// More code goes here...
In addition, here is the index.html file:
<html>
<head>
<title>FLOAT</title>
// Additional script and CSS links...
</head>
// HTML template content...
<body ng-app="FLOAT">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
// More content and templates...
</body>
</html>
EDIT:
Based on some feedback, I have combined everything into one main module with one ui.router module. However, I am facing an issue where
{{post.upvotes}} {{post.title}} {{post.title}}
are not binding correctly in the view. Instead of evaluating, the code itself appears. Any ideas on how to resolve this problem?
Here is the updated section from FLOAT.js file:
// ui-router and main module configuration...
angular.module('FLOAT', [])
// Factory, controllers, and other code snippets follow...