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
Related
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
I guess awake isn't the right word. Say I have a multi-page, large AngularJs application. Is the controller of a page that isn't active right now awake? For example, if I wanted to call a function of that controller with $rootScope.$broadcast, would it be listening for that signal or would it only recieve that signal when I go to the part of the page that requires that controller? Sorry if this makes not much sense.
Controllers have instances per usage, that means that angularJS will make an instance of some controller only if it is in use.
If you need to pass data from one controller to other, the common way is to use some service. As service are singletons which created on the first inject.
So, you can inject a service in one controller (page), invoke some method on it, which will change some data on it, then navigate to other page, in this page, inject the service, and use the data on it.
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
So, the situation I have gotten myself seems to be a little complicated but I'm hoping there is a simple solution to it.
I have two Javascript controller files, one called rootPageClient.js and another called findPollClient.js. There is also a file called ajax-functions.js which basically contains two functions to route the ajax calls to the right route. The routes and the get and post method functions are contained in the index.js file. The file structure is shown below
Root
Common
ajax-functions.js
Controllers
findPollClient.js
rootPageClient.js
routes
index.js
I have a specific piece of data in the rootPageClient.js file that I need passed through to the findPollClient.js file. All calls are routed through the ajax-functions.js file to the requested route in index.js.
I have figured out that I need to call the same route in the index.js file from both controller files in the order that I want to pass the files from and to. But, I'm not quite sure how to do this. Is there a simple way to do this?
Create a service and save the data inside the service. Have the service injected in both the controllers. Whenever you change some data in service in one of the controllers, it will retain when you look it up in other controller. This is because services and factories are singletons, so they are the right place to store application state and access it anywhere you want.
I want to pass a lot of data (json) when routing to a new controller in angular.
In controller A I call $location.path('/B'); which in turn will route to controller B.
I know I can pass parameter in the url itself, but I have a lot of data.
Can angular do something similar to 'POST' method and pass data in this way?
No need to bother with POST like behavior with angular.
You have several ways to do this :
use a service that will preserve data across page loads
pass real GET argument (when the page is specifically linked to this argument, for example an object ID used to display this object details)
store data in local storage / session storage
use controller 'resolve' functionnality to fetch new data before displaying page (not what you want to do though...)
Remember you're not actually changing the page, so you don't need to 'POST' data anywhere or do anything similar.
Instead you should create a service that makes that data available through dependency injection, then specify the dependency when you instantiate the controller that handles the new route.