0

I'm a beginner on AngularJs and I have encountered a problem that I don't understand why and I hope you guys can help or enlighten me. I'm trying to build a single page application with angularJS + expressJS everything work fine but until I refresh my page, for example I'm at localhost:3000(which is my homepage) and I access to localhost:3000/login it work perfectly fine but if I refresh the page the css doesn't include on localhost:3000/login , because i'm injecting the login.ejs file into the ng-view on "/"(where css file located "index.ejs") but once i refresh the page the browser only load login.ejs which i didn't include css on it. your help is greatly appreciated

Before i post the question on stack overflow i have posted it on google+ group to seek help on it however my problem is still unsolved i think i have written the code wrongly or something. if you have the time please check out my code below :

this is my express middleware ( one of the user on google+ told me to move my app.router to below express.static)

app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/public/views');
app.set('view engine', 'ejs');
app.use(express.cookieParser());
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);

this is the routes after the middleware(the main is main.ejs just some data i inject on "/" route)

app.get('/', routes.index,function(req, res){
res.render('main')
});
app.get('/:path',function(req, res){
var path = req.params.path;
res.render(path);
});
app.get('*', function(req, res) {
  res.redirect('/' + req.path);
});

in this case i inject data into index.ejs inside index.ejs contain

<div ng-view=''></div>

along with javascript and css

in my angularjs file

var app = angular.module('myApp',[]).
 config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'main.ejs',
        controller: 'IndexCtrl'
      }).
      when('/login',{
      templateUrl: 'login.ejs',
        controller: 'IndexCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
    $locationProvider.html5Mode(true);
  }]);

1 Answer 1

1

This line is your problem

$locationProvider.html5Mode(true);

To use the Html5 mode you have to configure your server to always serve the index page on requests. Another alternative is to make the login page a partial of index (index will be a container for all your css and javascript, "master page"). Have a look at ejs-locals.

So for it to work without changes you nedd to disable html5 mode

$locationProvider.html5Mode(false);

This will add a # tag to your browser address. So when you navigate to localhost:3000/ and click the login link it will send you to #/login, for the server you never moved from index page but angular knows how to pick that up and will render your page correctly.

there are lots of examples on the web, and stackoverflow.

Hope it helps.

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

2 Comments

thank you very much ! , may i know how to configure a html5 mode server to serve the index page on requests ?
@JohnLim I would love to help you but I have no idea, I think its complicated but not impossible. In angular docs they wrote this "Server side Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)" have a look here stackoverflow.com/questions/17646843/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.