-1

My current setup is as follows: enter image description here

Starting the server and going to localhost takes me to home.ejs as stated here (in my front end routing):

enter image description here

However, when I go to localhost:3000/posts, the posts template is infact not being injected into my index file (where my ui-view is). Ive been following the mean stack guide from thinkster, but have been making a few changes (not using inline templates)

My question is, how do I setup my routing such that localhost:3000/posts will actually take me to the posts page?

Meeoh
  • 463
  • 4
  • 11

2 Answers2

0

You are dealing with two types of routing, client side and server side. Client side is located in your app.config function in your angular code. That function should be calling html files, which are located in your public directory. These files are not rendered server side via express and they wouldn't not be able to read the ejs format.

Typically with MEAN stack applications, you just render your index file when the user logs in, and from there the Angular router takes over with html files and you handle your routing from there. If you don't want Angular routing, you have to set up your index.js file to render pages as they are called with res.render('posts')

You can change your posts.ejs file into an html file, and just call it via Angular when the user navigates to localhost/#/posts (depending on your version and configuration of Angular).

Your Express server side routing will handle your API calls as you have defined in index.js. In order to call those APIs, you will make GET or POST requests via Angular's $http method, through a service or factory.

Hope that helps, if not, let me know and I can elaborate or provide examples.

Eric Hartmann
  • 756
  • 5
  • 12
  • This is what I've been looking for, for SO long! An indepth explanation of the differences between server-side and client-side routing. Im going to give it a shot now that I actually understand the difference, and I'll post back with how it goes. Thank you! – Meeoh Jul 20 '15 at 18:58
  • I changed my router to look like so http://puu.sh/j6lJZ/10fb3917e4.png and renamed the file to posts.html, but im still receiving this error: http://puu.sh/j6lFW/0e6d9fa217.png – Meeoh Jul 20 '15 at 19:05
  • What are you doing when receiving that error? Is your index page rendering ok? You should be able to navigate to localhost/#/posts and the angular route should take over, you might need to move that html file to a folder which can be seen by the front end. You should also make sure you have this line in your app.js file app.use(express.static(__dirname + '/public')); – Eric Hartmann Jul 20 '15 at 19:15
  • Oh wait a minute! So I'm using this line of code $locationProvider.html5Mode(true); So I dont have the # after localhost:3000, but when i go to localhost:3000/posts, i get that error, when i go to localhost:3000/#/posts, it works fine, any idea why? – Meeoh Jul 20 '15 at 19:19
  • When you are calling localhost:3000/posts you are hitting the server, and there is no route for that url on express. The # denotes the client side routing, so they could be conflicting. There are also a lot of issues with Angular and client side routing, here is a similar thread http://stackoverflow.com/questions/19617293/issue-with-html5mode-in-angularjs – Eric Hartmann Jul 20 '15 at 19:24
  • Hmm are you sure its a conflict? Im not sure if the angular router is taking over or not. I just tried a simple test page like this, http://puu.sh/j6o1I/091680d03f.png and I receive the same error as before! – Meeoh Jul 20 '15 at 19:39
  • ??? I have no idea, that seems like a different question than this thread. That's an Angular html5 mode question, I would open a new question or reference one of the other threads, – Eric Hartmann Jul 20 '15 at 19:43
0

To solve this, I used Eric Hartmanns solution. By changing posts.ejs to posts.html, and letting the angular router take over on client side, the page was being rendered. However, when typing in localhost:3000/posts in the address bar, the page wasnt being rendered and the server was being hit for some reason. To get around that I simply made a new get route in express and re-rendered index whenever that route was hit like so: 

router.get('/', function(req, res) {
 res.render('index');
});
Meeoh
  • 463
  • 4
  • 11