New to Angular - and I have a feeling this question more than likely already exists however I can't seem to find - so a duplicate question was not intended.
But.
I have a post button in my app, if the user is not logged in, on clicking post they are redirected the login page. After they login they are returned to the homepage however the fields they completed before they click Post are cleared. .
Can someone please point me to what Angular documentation I need to read to solve this issue.
Thanks.
I think you could set an object on $rootScope to contain the data so that it will not be lost between controllers and just map the fields from the view to the properties of the object you used in the $rootScope.
Please note that I'm not sure this is optimal or if it fits to any best practice.
I was assuming that by redirecting to a different page you mean that you are going to a different route which is handled by angular as part of the same SPA.
Related
The problem:
I have a express backend/angularjs frontend web app hosting all of my teams documentation for our users. We frequently need to post links to a specific question (all linked as ids) to our users in Slack. ex. helpapp.com/productTheyNeedHelpWith#QuestionLinkedTo the problem is that when the link is clicked from slack, not when copy/pasted, Slack launches a new browser window/tab to helpapp.com/productTheyNeedHelpWith%23QuestionLinkedTo.
This breaks ngRoute as it no longer recognizes /productTheyNeedHelpWith as the path to load the correct page for and the user gets sent to our home page instead.
Thoughts on possible solutions:
I'd like to solve this issue either in the ngRouting itself by somehow updating the path by replacing %23 with # before $routeProvider does it's magic, or by somehow capturing the full url in app.js and updating it or redirect to an updated version before we've rendered a page view at all.
currently I've set a workaround by using a ng-init event to check the url and, if %23 is found, update it and replace it with the correct extension but this causes an odd double load that leads to a poor user experience.
Final Thoughts:
As I'm not sure of the best way to go about this, and because our code is proprietary, I'm avoiding posting to much 'example code' that may not be relevant but am happy to provide any parts of it that you, wonderful stackoverflowers, may request. Thank you in advance for your assistance.
When developing a web application with angular js, a part of time that developers spend is the time for implementing routing.
When using ui-router in a application, there are two "phases" to consider with regards to routing:
user navigates inside application: when click is made on some button, user is transfered to another state by using $state.go("somestate"). Parameters can be send etc. And url is changed accordingly.
user navigates directly via url.
Lets say application has such route:
/mythings/{thingid}/mysubthings/{mysubthingid}
If user navigates to that url directly by pasting it into browser window, application needs to handle it. My question is what's the best practice to do it?
What I'm thinging is: if looking at url example above what needs to be done when user enters that url in browser:
get {thingid} from url (from $stateParams), then get {mysubthingid} also from $stateParams (probably by using resolve (ui-router feature) when defining state), then inject what was resolved to controller and then make a query to api and get data about "subthing" and present view in ui with that data. So that should work with both "types of navigations": when user clicks and is transfered to state, or when user enter url directly into browser. Is this the right path to go?
And I suppose that any url you go to when you click something in application, you should be able to take that url and just paste it into browser and see the same results without being redirected to anywhere else. If application cannot handle every url in such way, maybe application' architecture needs to be reconsidered?
Thanks
In UI-Router, the main component of the routing is the state. The URL is essentially just an address that points to a specific state of the app. I don't think it's necessarily productive to think of the two ways of navigating as separate; they're just two sides of the same coin. There should be no URL that isn't handled by a state. Any URL that doesn't match a state should be caught by the otherwise definition on the $stateProvider and probably redirect to your home page or a 404 page.
In your example, the thing/:thingId/subthing/:subthingId url should map to a predefined state just like any other state. Let's say that state is main.subthing. The process for loading the data, initiating the controller and rendering the UI should be exactly the same whether you get there by calling $state.go('main.subthing', {thing: 123, subthing: 456}) or ui-sref='main.subthing({thing: 123, subthing: 456})' or you paste myapp.com/thing/123/subthing/456 into the browser. They'll all end up at exactly the same place with exactly the same data by calling the exact same logic (most likely loading thing 123 and subthing 456 in resolves and injecting those into a controller).
You're right that if a url can't be handled by the application, that's a sign that something is wrong. Like I said, bad urls should be handled by defining otherwise when setting up states. But pasting a URL into a browser shouldn't require any extra work if your states are defined correctly. URL handling is baked into UI-Router by default.
I partially agree with you. The point where I disagree is when the URL is obtained by a user who is not supposed to access it. Quite often some websites implement authorization code to check if the user who is currently accessing the page is authorized to do so.
Also I think the route could be a bit different. Something like:
{thingid}/{mysubthingid}
This, I think is a cleaner URL and the parameters could be handled in the same way as the one in your example.
I suggest this in order to make it a bit difficult to unauthorized users.
Anyway, it definitely depends on the kind of application you are implementing. If the app's requirement is to be able to access the page by pasting the URL in the browser then I guess your approach is much better.
I tried to google the following question, but nothing came up (which is super weird I need to).
What is an Agular app lifetime in a browser?
Or to rephrase when a user opens an Angular website, the app instances in the browser and stays live until the user leaves the website or closes the browser or?
On the separate note is it better to use a service for holding global variables (e.g. logged user name) or $rootScope?
Thanks!
What is an Agular app lifetime in a browser?
The angular app persists while that particular tab/site is open. If you navigate away from it and then back to it, for all intents and purposes, that's a fresh instance of the application. You could mimic a persistent session but that would entail a custom implementation on your part.
Here is a post on preserving data on a refresh of the application that you might be interested in - AngualrJS: sustaining data on html refresh
On the separate note is it better to use a service for holding global variables (e.g. logged user name) or $rootScope?
This is well documented and you can find myriad sources both here on SO as well as the internet, but it's better to use an angular service to share data among various controllers. It's not recommended that you pollute the $rootScope if you can avoid it.
Here is the same question asked on SO with solutions:
angular set a variable accessible to any scope
How to use variables from a controller in another controller in AngularJS
If you use angular's routing or another way to load views that doesn't reload a page, then an angular application will stay active until you leave the page (closing or refreshing).
Every time you load a page through angular its controller's data is in its initial state so any modification to a controller's data will get lost when you change page (unless you persist it somewhere, that is)
Regarding your second question, the best way should be to get a user's data after every page change (to check if the user is still logged in. Saving a user's data client side without checking if it's still valid might be a security issue). But in any case, a service is a better way to store data than using rootScope
I have an angularJS single page application. It is an admin dashboard. However I do not want anyone to access the dashboard unless he is logged in.
Problem that I am facing is when I create a login template, it is usually part of the admin dashboard, since it is a single page application. However I want the login page to look completely different from the single page application index default view. Same for registration page.
What are ways to make a page different completely from the skeleton of the single page application with angular ?
I am sorry if the question is broad but I am new to angular. I do not care about any code written I just would like to understand a good technique for a sort of thing.
Feel free to send me any articles or documentations that explains similar technique
If I am understanding your question correctly, what you need to do is the following.
Use ui-router to control the navigation (or routing) in your application. Note that ui-router will become native in AngularJS 2, right now you will need to use NPM or Bower to include it in your project.
Then use the events it provides to determine if the user needs to logon before accessing the given route. If logon is required you can redirect to the logon page, the redirect back upon successful authentication.
So currently, I am exploring the world of AngularJS and have encountered a problem.
I am building a very primitive blog application supported by Firebase, and I want to use Angular validation to check whether a slug is already in use. However, something is going wrong here. This is the directive that I wrote to check whether a slug is already in use (without Firebase):
http://jsfiddle.net/Lk6fY/1/
As you can see, this works like a charm. Now, I can insert the Firebase call here, instead of the primitive check, but this forms two problems:
On every keyup, a request would be send to Firebase. If this is an application for one user, this would not really be a problem, but imagine 5000 people at the same time trying to post a blog entry (which of course wouldn't happen, but I want to learn the right approach).
Nevertheless, I did try it, and it didn't really work as expected. I think it has to do with the response time to the Firebase servers, because:
foo-bar would be valid, until the user pressed the submit button, whereas foo-ba would be invalid, but after pressing the submit button the user could simply continue.
So therefore my question: how can this be solved in an efficient an appropriate manner?
Ideally, I would like the directive to connect to Firebase after either the title or slug fields are not anymore in focus. How would this be possible?