Currently, I'm working my way through the MEAN stack tutorial on Thinkster, and encountering a few challenges along the way.
The initial hurdle I faced was with inline views. I attempted to use a script tag with an id of "home.html" and route it using ui router. Unfortunately, this approach didn't yield the desired results. However, I managed to resolve the issue by creating separate files that contained the necessary markup between the script tags.
Now, I'm delving into the world of Node and Express, setting up a local server while adhering to the basic node structure. I have an app.js file at the root of my project and the tutorial code in angularApp.js, located within public/javascripts. Additionally, I've relocated my views to the views folder.
Here's the current directory structure:
Root --- app.js
|
--- views --- index.ejs, home.html, posts.html
|
--- public --- javascripts --- angularApp.js
Upon launching the app, it successfully locates angularApp.js, but encounters difficulty loading home.html resulting in a blank screen.
Below is the configuration section from my angularApp.js:
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('/views/home');
}]);
This is the content of my 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>
<a href="#/posts/{{$index}}">Comments</a>
</span>
- upvotes: {{post.upvotes}}
</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>
I suspect that the problem lies within how I handle the parameters for ui router - I've experimented with various combinations to no avail. I am reaching out for assistance as I seem to be stuck. You can access the full codebase here: https://github.com/Zombiefruit/mean_test_01. My ultimate goal is to successfully inject the view!
Thank you.