We Keep Coding

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

Handle page refresh/f5 angular js and laravel

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

How to Handle Forms present in the Single HTML Page

My Doubt is as follows I have a static HTML Page(Login.html) with 3 forms in it namely
Login Form
Create Account Form
Forgot Password Form
When the user Types in my correct user email Id an password in the LOGIN Form, the form needs to direct it to a different HTML page namely dashboard.html. When the user Selects forgot Password form, the form will ask the user to enter his email ID and once the user clicks on Submit button the forgot Password Form should redirect it to Login Form in the Login.html file. Both the Forms are in the Single Html Page.
My Question is that How do I redirect from One form to another form in a Single HTML page using Angular JS and Also from one page to another page in Angular JS. I couldn't Find good tutorials on this Issue. So can somebody help me with this issue.

If you need to redirect between forms in a single-page html application, you will need to use routing. Your choices are ngRoute which is a part of AngularJS but a separate module, and ui-router from the AngularUI folks, which I would recommend.
I assume you are handling your login form submission using the ngSubmit directive on the form? If so, check the username/password by whatever means you need to in the scope function assigned to ngSubmit. If the credentials are valid, use the router or the $location service to redirect the user to the dashboard. The link to the forgot password page is a simple link with an ngHref or ui-href, depending on the router you are using.
Your HTML pages will be displayed in the section of the page set aside for views (again, check which router you are using). The HTML pages should be partial pages, not full HTML pages, since they are going to be inserted in the main page of your single page application.
Hope that helps.

How to retain $scope value once we navigate from one page to another in angularjs

I have two controllers in my file. Whenever I navigate from one page to another page, all the scope values are empty. Here is how I declare my controllers:
var app = angular.module('name',[]);
app.controller('Ctrl1',function($scope){});
app.controller('Ctrl2',function($scope){});
The above code works fine in one html, but when I navigate to another html, I can't access the $scope values which are in the controller.
Any help would be appreciated.

Changing the page wholesale forces the Angular app to completely reload, and this is why you are losing your scope. Obviously, this is less than desirable. What really needs to happen is this:
Your base page loads (index.html) and your app lives on this page. It does not contain any content.
Your app calls your default route and loads that html partial page in the main ng-view. This route should contain a controller reference that should operate on that view.
When you need to load new information on the screen, you load another partial into the ng-view via your route, along with the associated controller.
There are plenty of examples out there to choose from that show how to do this. The stuff from "Year of Moo" comes to mind. Pick one and go with it.