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);
}]);