I have an angular.js application with basic setup, for example: My index.html displays static things like Top / Sidebar. Inside I have a <div ng-view></div> to show partial html files like my home.html
After entering my application index.html with it, the Controller MainCtrl loads the same way as my home.html with the corresponding HomeCtrl . So all that should be.
After I applied the fix (so the reboot will not “forget” the user, and I will not log out - I based it on the example http://www.sitepoint.com/implementing-authentication-angular-applications/ ) I tried to reload my page. But now only my home.html .
NOTE. I posted the results below
Which makes sense, here is part of my app.js :
$routeProvider.when('/', { templateUrl: 'views/home.html', controller: 'HomeCtrl', resolve: { auth: function ($q, authenticationSvc) { var userInfo = authenticationSvc.getUserInfo(); if (userInfo) { return $q.when(userInfo); } else { return $q.reject({ authenticated: false }); } } } }) .when('/login', { templateUrl: 'views/login.html', controller: 'LoginCtrl', login: true })
Thus, it is obvious that at startup / application only shows home.html . But how can I achieve what I already have when I enter a page, usually after login?
My main problem seems to be at the moment for me that I'm not quite sure how and why index.html loads normally when I log in. Here is what I do in my LoginCtrl after the SignIn process:
$location.path("/");
I searched the Internet for some detailed explanations on this topic, but unfortunately I have not found anything useful yet. Can someone explain to me why this works in the first place and how I can make it work to reload pages? Thanks!
edit I read here ( https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode ) that I need to change my express configuration. I tried:
app.all('/*', function(req, res, next) { res.sendfile('public/index.html', { root: __dirname }); });
I am using $locationProvider.html5Mode(true);
But when I log in, my page refreshes again until it works.
edit2: ok, after reading lots on html5mode and how to use it with an expression, I'm pretty sure that my error is in the backend, and not in Frontend.
Here are the parts of my server.js (express config)
app.use(require('less-middleware')(path.join(__dirname, 'public'))); app.use(express.static(__dirname + '/public')); app.set('view engine', 'html'); app.set('views', __dirname + '/public/views/'); require('./routes')(app); // contains my other routes app.get('/', function(req, res) { res.render('index'); }); app.get('/views/:name', function (req, res) { var name = req.params.name; res.render('views/' + name); }); app.get('*', function(req, res) { res.redirect('/'); });
my folder structure:
/server.js /routes /public/app.js /public/index.html /public/views/home.html /public/controllers/xxxCtrl.js
I read a lot of posts about stackoverflow and other sites that basically say that
app.get('*', function(req, res) { res.redirect('/'); });
should be enough to make it work, but for me it doesn't work.
Edit3: A brief description of my current problem:
When I reload the page with only partial html, for example, for example. home.html loading. Incomplete page with index.html . Here is a brief description of my code:
in the app.js (angular) configuration, I configured:
$locationProvider.html5Mode(true); // I tried my app without html5mode, but then everything breaks - but I need the html5mode anyway $routeProvider.when('/', { templateUrl: 'views/home.html', controller: 'HomeCtrl', resolve: { auth: function ($q, authenticationSvc) { var userInfo = authenticationSvc.getUserInfo(); if (userInfo) { return $q.when(userInfo); } else { return $q.reject({ authenticated: false });} } } })
my authenticationSvc :
.factory("authenticationSvc", ["$http", "$q", "$route", "$window", "$location", function ($http, $q, $route, $window, $location) { // login, logout function init() { console.log("init"); if ($window.sessionStorage["userInfo"]) { userInfo = JSON.parse($window.sessionStorage["userInfo"]); } } init();
and on the server side, server.js :
app.get('/:name', function (req, res) { var name = req.params.name; res.sendFile('views/' + name); // res.sendFile(__dirname + '/public/index.html'); // uncommented, since it didn't work }); require('./routes')(app); // this is my last route: app.get('*', function (req, res) { res.redirect('/#' + req.originalUrl); });
from my understanding of this "should be" enough configuration for expression and angular for collaboration.