Angular.js error 404 routing

Question

I've got a simple angular.js app with two views: /login & /register. My index.html looks this way:

... 
<body>
<ul class="menu">
  <li><a href="#/login">Login</a></li>
  <li><a href="#/register">Register</a></li>
</ul>
<div ng-view></div>
...(javascript inclusions)...

app.js

var adventureApp = angular.module('ownAdventure', [
      'ngRoute',
      'ngCookies',
      'Login',
      'Register'
    ]);

adventureApp.config(['$routeProvider', '$locationProvider',
  function ($routeProvider){
    $routeProvider
    .when('/login', {
        controller: 'LoginController',
        templateUrl: '/login/login.view.html'
    })

    .when('/register', {
        controller: 'RegisterController',
        templateUrl: '/register/register.view.html'
    })

    .otherwise({ redirectTo: '/login' });
}]);

I've got both Login and Register modules in sepparate .js files, and added the LoginController and RegisterController accordingly in both files exactly the same.

login.controller.js (same with register):

'use strict';

var loginController = angular.module('Login', ['ngRoute', 'ngCookies']);

loginController.controller('LoginController', ['$scope',
  function($scope) {
    $scope.test = 'This is a simple test';
}]);

Both login/ and register/ folders are inside the app/ folder at the same level as app.js, therefore I cannot figure out why I constantly get the following error message: GET http://localhost:8000/login/login.view.html 404 (Not Found)

Thank you in advance.

I'm using an Ubuntu 14.04, but I don't know if it has anything to do with the problem, I've tested the angular-phonecat tutorial and works fine. — Urco
– Urco, Commented Sep 19, 2015 at 17:17

Vamsi · Accepted Answer · 2015-09-19 17:32:55Z

2

"The error message : GET http://localhost:8000/login/login.view.html 404 (Not Found)" Implies that there is no login.view.html in the given folder hierarchy or it is not accessible at the given moment. As this error is related to your code, we will not bother about it. Coming to the folder hierarchy, what is your application name? (I believe it is "ownAdventure"). So the index.html page loads at "localhost:8080/ownAdventure/". You mentioned "Both login/ and register/ folders are inside the app/ folder at the same level as app.js" it doesn't help much, because you didn't mention the folder hierarchy for app.js. I assume that app.js is right under your app folder.

In that case "localhost:8080/ownAdventure/login/login.view.html" will be accessible.

Note: "templateUrl: '/login/login.view.html'" the path provided here is relative to the parent path, not to the file from which it is called(in this case app.js).

answered Sep 19, 2015 at 17:32

Vamsi

6844 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Urco Over a year ago

My app name is 'ownAdventure', but that does not mean that the route is "localhost:8080/ownAdventure/". In angular-phonecat tutorial in angular.js official webpage you can see it. App module is 'phonecatApp' while the index route is 'localhost:8000/app/#/phones'. On the other side, as you deduced I've got an app/ folder and both login/ and register/ folders inside, at the same level as the app.js file.

Vamsi Over a year ago

Yeah your are right about the first part. Can you mention the index route? and I believe that you are unable to access localhost:8000/login/login.view.html from the browser

Urco Over a year ago

I am definitely surprised, as I assume the GET should be localhost:8000/app/login/login.view.html , but fails to retrieve it. I don't know what you mean for index route.

Vamsi Over a year ago

anyway I figured the index route :). Now I got your actual concern!!! Why "templateUrl: '/login/login.view.html'" resulted in a get request for " localhost:8000/login/login.view.html " instead of "localhost:8000/app/login/login.view.html" am I correct?

Urco Over a year ago

Yep! I just figured it out too and was posting the answer! You got the credit though, It was hell of a concentration lapse.. thank you!

|

Collectives™ on Stack Overflow

Angular.js error 404 routing

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related