Develop Reference

How to pass a file through different components in angular

I'm required to handle a photo upload in this I'm survey app building, the problem is, the post request is sent in the next screen.
So I need a way to pass the file through the screens since I can't store it in local storage.
Needs to be passed this next screen ==>
So when I post the survey, I can store the data in the database and after that, upload the image and relate it to the survey.

Here is how you can do it:
Create a service that both components would use.
Create a property in that service that would store the files.
Update that property from the first component with actual files.
Fetch the files from the service in second component.

I did not really understand where you are building the function.
But you can build the function in the service and pass it a parameter
This is how you can call it in any component

How to connect Laravel 5.4 backend with Angular 5 Frontend

I am working on a project where I need to develop frontend in angular 5 and backend business logic in laravel 5.4 with mySql Database. I am a newbie to this technology and dont know how to develop data flow connection between these two framworks.
It will be helpful if you tell me the easiest and most generic way to solve this out.

As with any other technology, you'll need to work with an API.
In your Laravel project:
Your Laravel project should have models, controllers and a file for the route paths for each method in your controllers, right? If you don't know where the routes are, there's a dedicated folder called "routes" at the root of your project.
Inside this folder, you'll have two important files: api.php and web.php. These two work exactly the same way, but the api.php will automatically add '/api' to the beginning of your route.
A route looks like a link, such as: "yourdomain.com/api/person/name/jondoe". Every route has to be accessed through an HTTP method, usually GET, POST, PUT or DELETE.
Example: let's say you need your user to see a list of people. You'll probably have a Person model and a PersonController containing some function called displayAllPeople(), and this function will select the people from your database. In your api.php file you'll add something like:
Route::get('/people', 'PersonController#displayAllPeople');
You can test that in your browser. Try to access http://yourdomain.com/api/people. You should see a JSON output of your function's return data. In this example, a list of people. Now all we have to do is make your Angular project call this API route.
Source: https://laravel.com/docs/5.7/controllers
In your Angular project:
Remember that Person model you created on your backend? Angular will access that model too, so you'll have to create a Person.ts model here. While that's not required to work, it's a good practice to create this model with the same attributes as the backend model.
Now you'll need a service. The service is a file that will access that Laravel route for you. If you're using Angular CLI, just run the command:
ng generate service person
That will create a person.service.ts file for you. Inside this file, you'll write all the functions to select people, update, save, delete people, and so on. Your function will look something like this:
findAll(): Observable<Person[]> {
return this.http.get<Person[]>('yourdomain.com/api/people');
}
Whenever you call the findAll() function, you'll access the Laravel route, which will return the People from your database. You can do that with any operation you want. Just make sure you follow the HTTP standards.
That also works if you want to send some data from your frontend to the backend, like if you want to save some new Person in your database. You'll need a POST call sending your new Person model which will be received by your Laravel's Controller function, and then persist it in the database.
Source: https://angular.io/tutorial/toh-pt4

Reload all the app after upload in AngularJS

I'm doing a quite large app that needs to save a Javascript object and save it to client's disk and viceversa: retrieve JSON object and parse it.
I've managed to save and upload the file, but here's the problem: When the file is successfully uploaded (checked from the console and inspector), Angular does not display anything at the ng-repeats, ng-model...
I assume the problem is that Angular does not know that the object has changed. I am wondering, since I seem not to find it anywhere: how can I re-render all of my Angular app?

What we did in one of our Angular projects, is some kind of 'cacheId'.
So imagine simple POST service generating random integer number.
Imagine another GET service returning that number.
Now in your Angular templates, wherever you specify template rul name, add 'cacheId' as param.
Instead oF that:
templateUrl: 'some-folder/some-template.tpl.html'
Do that:
templateUrl: 'some-folder/some-template.tpl.html?cachedId=' + someService.cacheId
What advantage?
You can click resetCache() url and generate different cacheId
client will get different cacheId in next request
browser will treat html template url as new url and will reload template
by reloading template you will get new data in
Something like that might work.

How to pass data to one module to another module in angularJS

In my project I have two ng-app's one is for login page and another for home page.
Once login is successful for the user, in ajax success callback I got the some response related to that user and in that callback I am used the window.location="home.html".
As of now I used session storage feature to pass the data to home page.

The best way to do it is by creating a service. The service can be injected into your controllers and other services as necessary.

Create a service and use getter and setters.When you get a response in your first module set the object using setter and get the data using getter in another module.
The best way to communicate between two controllers or say two modules is using services.

According To angularjs examples only one module stands for one project though outof the box you can you can use more than one
but To Achieve this .This Is how i Normally model myproject
**MyProjectModule** (only **one** module)
---> loginController.js (initial page)
(If LOGIN IS Authorised Then Redirect To Desktop->desktopController.js)
---> desktopController.js
---> customerController.js
---> salesController.js

Store status between forms in AngularJS?

I am going to try to be as specific as I can. This is what I am trying to accomplish:
I want to be able to show a User, which kind of shoes fit its needs. The user will be shown 4 forms, one at a time.
My idea is to show a form, and once the user clicks 'Next', save that status and show the next form. After all forms have been filled, use those choices to fetch the API and return results to the User.
Here are my questions:
Where should I store the status of his choices? Cookie? Session?
How would I organize Angular in order to have all these forms that are shown one after the other? Any resources that I could use as an inspiration?
BTW, I am using Rails as a backend.
I have based my question on this tutorial: http://code.realcrowd.com/the-wonderful-wizard-of-angularjs/
I see that he uses saveState() on submit, but I am not sure where that function is defined.

Since the app is a angular SPA, you can use a angular service to store the state of the selection made by user. This state would persist until user explicitly refreshes the browser (F5).
Create a service like
angular.factory('shoeSelectionState',function() {
var states=[{selection:{}},{selection:{}},{selection:{}},{selection:{}}];
return states;
});
In your controller inject this service,
angular.controller('MyController', function(shoeSelectionState) {
$scope.states=shoeSelectionState;
});
and bind the states array to each form elements, something like
<input type='text' ng-model='states[0].selection.size' name='size'>
If you want to persist the data on page refresh try using sessionStorage instead of localStorage as it gets automatically cleared when user closes the tab. The service mentioned above can do the persistence of the content to storage.

You could use localStorage as #sumain-bogati suggested, but you could just as easily do this without any page reloads. What you will need is a container with a controller that will store the user's choices (i.e. the model) and then use ngShow or ngRoute to display each page. Here is some example code:
Plnkr example of three pages and a model
Instead of calling the fourth page, you would call a function which would initiate an $http call to your backend API to submit the model values.