Angular Route vs $Resource - json

So I have a few REST URLs that I would like to load and bind to html when requested. When user searches for first name and if first name is found html gets populated from json. This works fine (Initial URL).
Initial URL
var url = http://localhost:8080/userSearch/name/find?firstName='+enteredValue.firstName+'&lastName=&
$http.get(url).success(function(data){
$scope.dataItems= data;
Now using ng-click on first name I want to request address and location based on these URLs
//URLs
var url = http://localhost:8080/userSearch/addr/find?address=&address
var url = http://localhost:8080/userSearch/loca/find?location=&location
So I started looking into UI-Router and $Resource. My first thought is to use $Resource but seems as if others have had problems with ports.
Could I use Router as well to solve this problem or should I stick with Resource?

ui-router and $resource are completely different things. ui-router is used to provide navigation between different states in your app while $resource is used to make calling server side APIs more convenient. If you need to retrieve data from a RESTful backend then $resource is the way to go. I'm not sure what you're referring to about the ports but I've built web applications that service millions of users daily on top of $resource and not had any port problems.

Related

Viewer loadModel - route with JWT authentication

My current stack is React-Native that uses a WebView with forge(v7.15) in it. My API is a symfony API and it has a authenticated route that receives the filename and returns me a BinaryFileResponse based on the file.
Basically what I'm wanting to do is:
actual:
viewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('forgeViewer'));
viewer.loadModel('API_URL/route/filename');
expected:
viewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('forgeViewer'));
viewer.loadModel('API_URL/route/filename', jwtToken); //or something like that.
Atm, everything works fine.
But I want to change the route to be authenticated and I don't know how I can do that, and if I can do that.
I have my JWT token saved on client-side and I want to pass it on header/or anything that helps me to achieve that.
Is there a way to use the loadModel and send a JWT token to the URL that viewer will try to load?

How to serve static (or dynamic?) HTML files with RESTful API?

Hi I'm studying about RESTful API and making a website running on local to exercise.
I think RESTful is a quite good way. CRUD operations can be identified by HTTP methods and we can handle them with one url.
But most confusing things to me is that, How can we serve HTML files which are needed to request CRUD operations?
For example, If I'm implementing a forum, I need APIs to CRUD posts in forum like
[GET] /forum - see all posts in forum
[POST] /forum - create a new post
[GET] /forum/:id - see the post of id
[PUT] /forum/:id - modify the post of id
[DELETE] /forum/:id - delete the post of id
Think about how we use a forum, we need at least 3 type of HTML pages.
They are,
1. a page to see all posts in forum.
2. a page to see the specific post.
3. a page to type title and contents to create(or modify) a new post.
First and second type of HTML files can be served easily by GET requests above.
But in case of third type HTML files, I need to use extra parameters with above APIs or make a new API such like /forum/createpost to serve such HTML files.
I think, in the point of view of RESTful, I miss something and need to distinguish serving static (or dynamic) HTMLs and handling CRUD requests.
What is the bestpractices to handle this problem?
I also find some questions about this problem, but I couldn't find a clear answer.
I think you are mixing up two separate parts of the application. One is the REST API that provides the endpoints for CRUD operations. The HTML files that send the API requests are not part of the REST API. They are served by a web application that provides the front-end to the user, and makes calls to the REST API in the backend to fetch the information to display. To put it in another way, the web application making the calls is your Presentation layer. The REST API is your Business logic. Presumably, the REST API interacts with a database to write data to and read data from it. That is your Persistence or Storage layer.
You can use HTTP content type negotiation for that. POST/PUT requests (can) contain a Content-Type header declaring the type of content they're sending, and—more importantly—all requests contain an Accept header declaring the kinds of responses it accepts. If the client is accepting text/html responses, serve an HTML page; if they're accepting, say, application/json responses, serve a "RESTful" JSON response. This way your server can respond to different situations with the appropriate content and the same endpoint can serve as API and as HTML handler.
Alternatively, you can distinguish the request by using an extension: /posts.html serves a plain HTML file, while /posts gets served by a REST endpoint. That can easily be done in the web server configuration.
This might or might not be an anwser to your problem, however since you're working in Node + Express, routing might be a way to go (If I understood your question correctly). Below is an example of server implementation of accepted routes with parameters. Note, you can make parameters optional in some cases if needed.
app.get('/', function (req, res) {
res.send('Index')
})
app.get('/forum', function (req, res) {
res.send('Forum Index')
})
app.get('/forum/:id', function (req, res) {
// To access id you do 'req.params.id'
res.send('Forum Index')
})
app.put('/forum/:id', function (req, res) {
res.send('Modify Forum')
})
app.delete('/forum/:id', function (req, res) {
res.send('Delete Forum')
})
Reference : https://expressjs.com/en/guide/routing.html

MEAN.js $http.get() return index html content instead of json file

I'm doing a web app based on original MEAN.js framework. When I want to request local json test file using $http.get() method in my AngularJS file, it returned my index html content.Is it a routing problem? I didnot change the original mean.js routing code(https://github.com/meanjs/mean), just added a $http.get() method in home.client.controller.js file. Can anyone help me with this? Thanks!
That is most likely happening, because you didn't define an endpoint for that particular GET request in your app.
Everytime you make a request to your server (for example a GET request to /my-request) nodejs/express are configured in MEAN.js so that your server will try to find the endpoint for that request, if it does not find any, that request will be handled by this particular code block (specified in /modules/core/server/routes/core.server.routes.js):
// Define application route
app.route('/*').get(core.renderIndex);
Which will basically render the index view.
I'm not sure if you're using a custom module or not, eitherway, if you want that request to be handled in a different way in MEAN.js, you can specify your endpoint in your custom module routes file (or in core.server.controller.js) like so:
// Define application route
app.route('/my-request').get(core.sendMyJSON);
Be careful, because this route must be placed before the one I mentioned earlier, otherwise your request will still be handled the same way and the index view will be rendered and served again.
Then you will have to create the controller that should be called to handle that request:
exports.sendMyJSON = function (req, res) {
// logic to serve the JSON file
};
This way you should be able to get it done with a few adjustments.
Side note:
I'm not entirely sure but I think if you place your JSON file in the public directory of your app you should be able to directly access it without the need for the extra logic.

Can we access data from an api call which is made by another app in angular js

There is some static data in json format available on a web page through a rest api call made by owner of that page.
Now i want to retrieve that data in my angular app as my angular controller also exists on that page.
Is that possible?
The rest api call is already made by the owner so i don't want to make a network call again?
If data is open to all
If the JSON is accessible to anyone on the internet then you can call it in with a http request.
for example http://www.w3schools.com/angular/customers.php is a page of JSON data that anyone can access, all you have to do is make the correct http request in your app and the data will come into it.
To do a http request create a controller with code like the following
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function(response) {$scope.names = response.records;});
});
this will add all of the data to the $scope.names.
Note
Code taken from w3schools here

Backbone pushState is returning raw JSON data

I am attempting to implement pushstate for my Backbone/NodeJS application. If I go to the following route /testRoute/123 within the browser itself, from another view, the associated views to /testRoute/123 load.
However, if I manually enter /testRoute/123 in the address bar, the browser returns a raw JSON feed for the object with id '123'.
How do I force Backbone to load the views when manually entering a URL?
This is not something Backbone can do (hense why pushState is disabled by default). You have to setup your server to redirect those requests to the root so that your HTML loads and Backbone can handle the route.
This is stated in the Backbone documentation:
Note that using real URLs requires your web server to be able to correctly render those pages, so back-end changes are required as well. For example, if you have a route of /documents/100, your web server must be able to serve that page, if the browser visits that URL directly. For full search-engine crawlability, it's best to have the server generate the complete HTML for the page ... but if it's a web application, just rendering the same content you would have for the root URL, and filling in the rest with Backbone Views and JavaScript works fine.
In case #idbehold's answer wasn't specific enough, here's a more detailed response to the same question.
I highly recommend looking at those links at the bottom of the response as they were exactly what I was looking for when faced with the same bother...