Load JSON file that is dependent on the page name - angularjs

I have several pages that contain tables, I want to make a table directive so that code is reusable and easy to manage and place into other tables.
I need a way to get a JSON file using angular's $http service that is specific to that page. I have been able to use that service for retrieving an absolute JSON location, but i dont know how to go about retrieving one that is dynamic to the page the table directive is located in.
Example: The page is called goals, the JSON file accessed would be /app_data/goals.json and it is then populated into a table that is a directive in an Angular app.
If the page was called location, the JSON file accessed would be app_data/location.json.
What method should I be looking at in Angular?

Try looking the get method for the $http service.
A basic usage:
$http.get("path_to_your_json_file").then(onComplete, onError);

Related

How to add routes in angularjs dynamically from database values?

I have a method in my web api controller which will return me an array of objects.
The objects contain the route name, template url, controller name.
In my main module of the application, I want to make the $http call to the web api and read and loop through the collection and add them to $routeprovider.when().
Any suggestion will be highly appreciated.

Using ng-animate-ref with asynchronous data

I have an angular app that uses $resource to load data into the views. I used ngAnimate's ng-animate-ref to transition an image from one view to another. This worked fine when the data was hardcoded into the controller, but when I use $resource or $http, the data takes a little longer to load and therefore there is no identifier in the ng-animate-ref directive to help link the two images together. I figure I need to do either one of two things:
Don't let the new view render until the content has loaded
or
Ensure the data from the previous load is cached and available instantly
Is this possible to do? I can provide a plunker if it's necessary.

How to prevent loading the same data over and over in angularJS

I have an object that contains some data that I need to load when my application starts. Once its loaded I need to be able to reuse in multiple places on my application.
What is the best way to do this?
Right now I have a factory that I inject into my controller and I pull the data, the problem is that I'm doing the data pull multiple times.
What would be the best way to pull the data only when I load the application?
I would only need to access the data on my templates and pull the correct Key Value from the object where I need.
You need to use an angularjs service instead of a factory. Services in angularjs are singleton where factories are not.
You should be able to just change how your factory is registered to make it a service instead.
var yourModule = angular.module('yourModule', []);
yourModule.service(
instead of
yourModule.factory(
more info here: https://docs.angularjs.org/guide/services

Share data between controllers AngularJS

In our case, we have a search function in our application which shows the search results after entering a search term. The search results are products in our case. When we click on one of these products we are send to the page with information regarding this product. Now our problem, when we want to go back to the search page we want a method to return to the exact same page as before we left the search page. And not an entirely new search page.
We have divided our HTML in 3 views, which we load with the UIRouter.
We need to share data between the header, content and footer. When we show our search results, we want to show the amount of results in the header for example.
In short; we need to share our data between controllers / views. What will be the best solution?
We have thought about:
Adding a mainController to the body and using this as a medium to communicate data between controllers..
Store all data in a factory and access this factory direct from all controllers. But will all views be updated directly on data change? (2 way binding?)
However, we didn't get it working yet. What would be the best way to manage this?
As mertins mentioned in his comment, a service would do fine for this purpose.
Inject that service to all relevant controllers and indeed, thanks to 2-way binding all relevant data will be updated properly.
Don't use a controller, that's not what they are meant for!
If you need a code example for the service injection comment and I'll update this answer.

How to load information in AngularJs Constructor

Scenario:
When user requests the page, some information is fetched from Database and needs to be populated in AngularJs Model (properties) on Page Load.
My AngularJS reside in a separate JS file and the fetched information(in JSON format) can only be rendered in view.
How can I load the fetched JSON information in AngualarJs properties. The values needs to be updated as soon as page is rendered, so I was considering Constructor; but don't know any way to accomplish it.
I create a method, say '$scope.loadConstructor()' and called it in my AngularJs code.

Resources