AngularJS is the best way to handle state on manually entered URLs

Question

Currently, I have a setting based on the standard meanjs stack template, where I can have users who are logged into this state when they are "logged in" when I look at the URLs of the site. This is due to the fact that the user object is located in the Service, which is becoming publicly available.

However, this only works if I move from the base root, that is, from "/" and navigation only in my application.

If I manually enter a URL, such as '/ page1', it loses the user's global object, however, if I go to the root homepage and go to '/ page1' through the site. Then it’s fine, it sees the global user object in the Service object.

Therefore, I assume that this is due to a full refresh of the page, which loses its global significance, where it moves around the site, is not updated, so you save all your variables.

Some notes:

• I have included HTML5Mode using the '!' Prefix.
• I am using a UI-router
• I use a tag with '/'
• I have a rewrite rule for expressing that after loading all of my routes, I have one last route that takes all the "/ *" and sends back the root index.html file, as that means the stuff is angularjs.

I'm just wondering what are people doing here? Do they return standard cookies and local storage solutions? I am new to angular, so I assume there are libraries for this.

I just wanted to know which recommended way to handle this or what most do, so that I am properly aligned and angular, as I assume.

Update:

If I manually go to a different URL on my site through the address bar, I will lose my user state, however, if I manually go back to the root through the address bar, my user state will be seen again, so it's not just about losing state when updating window. So this seems to be due to code running on the root URL.

I have an express re-entry that manually enters URLs (due to the HTML5 layout mode), should first return index.html, since it contains AngularJs files, and then UI-Route takes over and directs it correctly.

So, I expected that any code in the root will be executed in any case, so it should be like navigating a site or entering an address bar. I have to skip something about angular that has this effect.

Update 2

That's right, so more research has led me to the following:

<script type="text/javascript"> var user = {{ user | json | safe }}; </script> 

What server-side code is for index.html, I think it does not execute when I refresh the page on a new page using the URL manually.

Using hash-bang mode, it works, because in hash-bang mode even I type the URL in the browser, it does not cause an update, where, as in HTML5 mode, it is updated. So right now, the solution I can think of is using sessionStorage.

If there are no better alternatives?

Update 3:

It seems the best way to handle this when using HTML5Mode is that you just need to rewrite a few other things to the express server.

Answer 1

I think everything is fine with you, but you can look at all the routes that your application may need and just look at some basic structure (api, user, session, partials, etc.). It just looks like one of those questions where it is as hard as you want it to become.

As for best practice, you can follow angular -fullstack-generator or meanio .

What you do looks closest to the average. Mostly because they also use ui-router, although they seem to have hashbang preserved, and this seems like more SEO friendly with some independent SPA pages, an option. You can probably install it and find the code before I explain it here, -

 npm install -g meanio mean init name cd [name] && npm install 

angular -fullstack looks like this is a good example of more typical routing:

 // Server API Routes app.route('/api/awesomeThings') .get(api.awesomeThings); app.route('/api/users') .post(users.create) .put(users.changePassword); app.route('/api/users/me') .get(users.me); app.route('/api/users/:id') .get(users.show); app.route('/api/session') .post(session.login) .delete(session.logout); // All undefined api routes should return a 404 app.route('/api/*') .get(function(req, res) { res.send(404); }); // All other routes to use Angular routing in app/scripts/app.js app.route('/partials/*') .get(index.partials); app.route('/*') .get( middleware.setUserCookie, index.index); 

Then the partial elements are found with some regex for simplicity and are passed without rendering, for example:

 var path = require('path'); exports.partials = function(req, res) { var stripped = req.url.split('.')[0]; var requestedView = path.join('./', stripped); res.render(requestedView, function(err, html) { if(err) { console.log("Error rendering partial '" + requestedView + "'\n", err); res.status(404); res.send(404); } else { res.send(html); } }); }; 

And the index is displayed:

 exports.index = function(req, res) { res.render('index'); }; 

Answer 2

In the end, I had quite a few problems, but I managed to get it to work by doing a few steps that can be broken down into steps that apply to those using HTML5Mode.

1) . After enabling HTML5Mode in Angular, re-write to your server so that it sends back your index.html containing Angular src js files. Please note: this rewriting should be at the end after your static files and regular server routes (for example, after REST API routes).

2) Make sure that the Angular routes do not match the routes of your server. Therefore, if you have an external state / user / account, then you do not have a route / user / server account, otherwise it will not be called, change your server route to something like / api / v 1 / server / route .

3) . For all anchor tags in your interface that are designed to trigger a direct call to the server without having to go through the Angular state / route, make sure you add 'target = _self ".