make Angular app return pure JSON instead of Angular source - json

Is is it possible to return JSON (www.myapp.com/json) without any Angular additions on Angular page, like backend endpoint would return?
E.g this <pre>{{jsonToDisplay | json}}</pre> doesn't work, because when you look browser source you can see also Angular generated code.

You can add a json pipeline to transform data directly in the html as yo are doing, rememeber to import CommonModule 1.
If it does't work, you could implement a custom pipeline.

Related

get dynamically loaded html using alamofire + swift

I am trying to request a website's html code and use it in an app in Xcode (Swift 3.0) and the pod Alamofire. In the html code online, the data contents that I want to scrape are in a div class that returns data from an Events calendar, in the form of a javascript web plugin. Since the website is not static, when I request the html and print the resulting response as a string, the data I want is not contained in the string. A message appears that says:
<noscript>Your browser must support JavaScript to view this content.
Please enable JavaScript in your browser settings then try again.
Events calendar powered by Trumba
</noscript>
My code using Alamofire looks like:
func downloadCalendar(){
Alamofire.request(urlString).responseString { (AlamofireResponse) in
print(AlamofireResponse.result.value!)
}
}
The urlString is a variable for the actual webpage's url.
Is there a way to get all of the html that appears in the html online into Xcode using Alamofire? If it's not possible with Alamofire is there another way to do this using Swift?
I've tried to accomplish a similar thing, unfortunately to no avail...
It seams AlamoFire grabs the first response it gets....
There is a workaround - use UIWebView:
static let webView = UIWebView()
self.webView.loadRequest(URLRequest.init(url: URL.init(string:"http://example.com")!)
DispatchQueue.main.asyncAfter(deadline: .now()+10.0) {[unowned self] in
if let html = self.webView.stringByEvaluatingJavaScript(from: "document.documentElement.outerHTML")
{print(html)}
}
Where 10.0 is the approx number of seconds required for javascript to finish loading the webpage data.
However since: it's not thread safe, you must use a singleton webView,
import UIKit and can't do it in the background - it's far from the perfect solution...
It might be easier to setup a proxy webserver in between to do the parsing for you.
Cheers!

Angular Translate | Static Loader | Hide until message.json ajax is complete

I am using angular-translate and its extension angular-translate-loader-static-files to i18 my angular app. Both the required JS files are included in the index.html.
Everything works as expected except that the screen shows the raw message code for a second before we can see the translated messages. I think that happens because the enUS.json (the message translation json) is fetched using an ajax call and until its completed, raw message codes get displayed.
Is there any way of fixing this?
Your issue is not specific to angular-translate.
Either use
https://docs.angularjs.org/api/ng/directive/ngCloak
or
https://docs.angularjs.org/api/ng/directive/ngBind

How to use AngularJS ng-include?

I want to use AngularJS to separate my jquery mobile HTML. But it seems ng-include can't include external HTML as the parent content, parent CSS and js are not applied to it. Below is an example. Would you like to let me know how to fix it?
Below is the example.
http://plnkr.co/edit/I91t9mjGJ58ZS4H2bymL?p=preview
It's obvious you cannot directly access external file from other site due to CORS policy.
If you do want to get the template from other site with different domain name, make sure that domain provides the API for you to $http.get the html template string, and then you can inject it into your Angular controller, where your view may access from.
The basic process may be as follow:
Check the API for the third party domain, where you can get the template string.
Use $http.get (or $resource, depends on your choice) to get the template.
Wrap the $http service and your parsing login into a new Angular service. (e.g. angular.module('yourApp', []).factory();
Inject this service into the Angular controller which you bind in your directives.
In your view file, use ng-include in that controller to access the template.

ASP.Net MVC page refresh using json values instead of html

I have a page that has a "prev" and "next" day button, and rather than reload the entire page, I simply do an ajax call to a controller that returns the entire partial view, which I replace the div with.
$("#divId").html(ajaxResponse);
Pretty simple.
However, I'm finding that this partial view is vastly more data than I need (html doesn't change at all, just the data) and it's causing slowness on mobile browsers.
My question is, is there a tool out there that will let me return a JSON representation of the model data and refresh all the values on the page automatically?
For example, say I have:
#Html.InputFor(x => x.FirstName)
and the JSON returns
{ FirstName: 'Henry', LastName: 'McLeery' }
Is there a library available that can automate the process of doing:
$("#FirstName").val(ajaxResponse.FirstName);
$("#LastName").val(ajaxResponse.LastName);
etc...
?
Take a look at Angular.js. Angular is a JavaScript framework which uses the mvc pattern.
After binding UI elements to your model the displayed data changes automatically when updating your model. Angular offers a nice api to consume ajax requests with json data.
Look at this:
Get and update json using angular.js

Why do I get a query string in my HTML path while using Angular?

I've got an AngularJS project, and I'm using $routeProvider and $locationProvider with ngView to swap out parts of the DOM as necessary. I'm running Angular 1.0.6.
However, when I define a link in my document like View 2, it gets turned into ?q=home/#!/view2 when I click on it.
Why does the query string get added? How can I prevent that?