Handle page refresh/f5 angular js and laravel - javascript

I am building an application with angular js( new to angular js ) and laravel. All laravel routes except home page route serves only json data needed for that page. Home page loads all the necessary stuff that angular js has to work with. The problem is that if user decides to refresh the page when he/she is on a url other than home page, the page displays only json data, since there is no css,script and html loaded. My question is what is the best and professional way of handling page refresh/f5 with angular? Should i prevent the page refresh at all, if yes how? Hope my question is clear enough...

According to your post and comment here are 3 proposed solutions/suggestion.
Stay on one url and manage the json only,dont change your url it direct to your laravel route request if refreshed by user.
Using angularjs default hashtag(#) method is better, to understand angular and laravel.
Send a variable with your angularjs request to route to identify that it comes from angular and check in your route. If from angular return json otherwise you can redirect to home page.
I hope it will help

Related

How to do the correct display of the template with ajax requests

Sorry for the mistakes, I'm Russian, I used a translator.
For practical purposes, I’m doing the admin panel supposedly for the site, it has a page of posts, users and their comments, tabbed navigation through ajax. I am writing on the Slim framework on the server. Route example:
$app->get('/panel/users', 'App\Controllers\UsersController:users');
$app->get('/panel/user/{id}', App\Controllers\UsersController:single_user');
$app->get('/panel/users/delete', 'App\Controllers\UsersController:delete_user_ajax');
$app->get('/panel/users/delete/{id}', 'App\Controllers\UsersController:delete_user');
$app->get('/panel/comments/{id}', 'App\Controllers\CommentsController:getCommentsUser');
And in the controller there are already requests to the database and the template is being rendered. And when you click on the corresponding menu, data is loaded via ajax.
If I open a tab with the path to the domain / panel / users, I will get data about users without the main template, just data without html and css. What I thought of is in the controller to check the request for isXhr () and if false, then give the main admin page. But the point is not even that, I would like to know more experienced ones how to do it differently, what you can read, see what you understand, or how to do it through .htaccess? or give data differently, not through a controller? Here is the site where the link is made through api history
what exactly do I want to achieve, and in general understand how it is all more correct! Thanks in advance for your help.

Include javascript file for each Component Angular2

When I add a javascript file in my index.html and I use some function it work just for the first time but when I refresh my page it not wokring so I need some way to include for each component a file javascript to avoid this problem
I think you're talking about routing. For Angular2 routes to work you need to make sure that the back-end server redirects all requests to your index page otherwise Angular will not be loaded, and will not be able to show the correct content/component for the current route
More on this here: Angular 2 rc4 can not go to page by typing the url to the address bar

Differences between MVC routing and SPA routing ?

I know how a MVC application handles routing,
(/foo/bar get) request hits the server
route /foo/bar with get method is found or not found, if found route handles the request by calling a method which serves a view page with corresponding data filled up.
client gets a html document with many links to other pages.
Another link is another procedure just like this one.
However, I have been learning react+meteor pack, which is a SPA (single page application) without ssr(server-side rendering). The most critical part that gets me confused is routing.Let's say I have 3 different routes for my SPA. (/), (/route2), (/route3)
(/route2) request hits the server. What does the server serve ? The whole application code with (/route2) active or what ?
Let s say we are on (/) route and clicked (/route2) route. So what s happening now ? Does react empty the #mainDıv and put related component instead, from where, the bundle.js which already contains all of the views' html as components ?
Is there a way to send only requested page's html and js, and after showing the content, getting other pages' html and js in the background, without client even feels. So that when another route is hit, only data will be on the wire.
Finally , only sending the related page's html - css - js when requested,I don t don't know if such a technique exists, seems to lack the SPA experience, but I am not sure If it would lack SPA expereince. It would be great to explain how to approach this issue.
With a SPA you typically (read: virtually always) configure your server to serve the same bootstrap HTML/Javascript regardless of which URL has been requested. A request for /route2 will get the same HTML response as a request for / or any other URL (unless you have specific exceptions for specific reasons). The SPA always starts with the same bootstrap code and examines the current browser's URL, then dynamically loads content as needed. How exactly that content is loaded and when it is loaded depends on the specific framework/code/circumstances/configuration, but yes, ultimately the contents of the DOM are dynamically being replaced by Javascript.

AngularJS SPA Login Page

I have an Angularjs single page application and now I would like to add a login page to it. Here is my SPA template plunker: http://plnkr.co/edit/WgUDJQNL0YCKWUfXMFsr?p=preview. I need a login page and not a modal(examples are available for login page as modal). User has to view the information page(which is in above plunker) only after logging in. Have gone through various videos and tutorials on this but couldn't find a solution. As am new to angularjs, would be grateful if anyone can provide the code for this.
Thanx in advance!!
Remove the body content from index and put it in a separate file(home.html). Just add a ui-view in the body. In run block route to login page by default. On login success route to your home page using $state.go('home'). Name the tab routes as home.tab1 and home.tab2 for Nested routes.

Get Initial Data for a Page in angular

I have created a backend using Django REST and for handling API's at frontend I am using Angular (I have just started using angular).
I have one initial page let say User Profile Page So If user is authenticated I wants to show His profile on that initial page. All Authentication related thing is handled in API's So I am just getting response and redirection to profile page or login page is handled via Django.
I can get user related data in django and render that to HTMl page but in that case Angular functions cannot serve this django data.
So what will be the best way that whenever this profile page url is loaded an API call will be made that will fetch user data and angular can show that data in template and will be able to use it further ?
EDIT
let say you open this url -> /user-profile/ which refer to below View
class HomeView(TokenRequiredMixin, TemplateView):
"""
"""
template_name = 'portal/index.html'
mixin_failed_url = reverse_lazy('login-view')
It basically render to profile apge , here in this view I can fetch the user data and show them on HTML but angular will not be serve in this case.
One way to do this call any angular function using ng-init and load user data that will server the angular issue but its not the best way to do I guess.

Categories