I have a windows 8 hybrid app and now I want to migrate it to UWP. I am facing two issues and I have been searching on the internet for quite a few time. I want to know if UWP support ajax function. Also my anchor tag in href is not parsing. What might be the reason.
I want to know if UWP support ajax function
The answer is yes, you can use ajax in UWP Application. But there are a few things you need to notice when using ajax in UWP.
If you are using ajax to get data from a remote server, please make sure the Internet(Client) capability is enabled in package.appmanifest. If you also want to call ajax from local server, make sure the Private Networks(Client & Server) capability is enabled.
If you are using a Content Security Policy in your app. Make sure the server address of your ajax call is included after default-src or connect-src in <meta>. For details about CSP you can refer to this document.
Cross-Origin should also under your concern when migrating. For enable CORS you can refer to add CORS support to server.
my anchor tag in href is not parsing. What might be the reason.
For safty reason, UWP doesn't support inline javascript. So codes like <a ng-click="jsfunc();"></a> won't work. Please add eventListener in JS files.
Related
Ok so I have looked around and cannot find the exact answer I am looking for. When developing a Sails app (which I am new to) it appears that by default it creates its own frontend using EJS.
Is this correct?
If this is correct then why is there an npm for sails generate frontend
If I want to use an Angular frontend is sails-generate-frontend-angular the best route to go?
Thanks!
First you need to separate server templating (EJS) from angular.
Just because sails defaults to an EJS template engine does not mean that you can not still put angular is your asset library and create and angular app. EJS is (the default but not the only option) what sails uses as a programming language for building its templates on the server that then get delivered to the client. Angular templates are used once delivered to the client to display information and perform tasks specifically already in the client machine.
1.) See above
2.) Sails-generate-frontend helps to setup your asset pipeline. It creates grunt tasks to copy image files and setup your javascript libraries such as ANGULAR.js, jQuery ect for use in your front-end.
3.) It could be. It depends, what a lot of people do is setup 2 projects. They use Sails as their API and then setup a second project for their Angular app (especially if its a SPA).
If instead your just using angular is specific places in your app (think jQuery style), then you would use a something like generate-front-end to take the angular library from someplace (like bower_compenents) and place it in your assets when you lift your app. It also makes it avaiable so that it can be placed in your html to be included in your app.
I on the other hand, use sails templates (I use Jade instead of EJS) to create and modify my angular templates on the server before they reach the client. This is a slightly advanced practice and can get confusing if you don't understand the difference between generating html on the server vs client.
An alternate method of thinking about this would be creating your index page on the server. This page would include your css and scripts. It would possibly be the only page on your server and everything else would be angular templates rendered on the client asking for JSON calls. In this scenario you would be using SAILS (ejs, or jade or whatever) to render only a single page INDEX.js and that might be the only server template you have.
However, this being said. Sails ships with this stuff already. You don't need sails-generate-frontend. Its is already inside a standard sails app.
Background
I am attempting to develop an AngularJS app that is to be hosted as 'offline html' as part of the Resco MobileCRM software. This software provides offline access to CRM data via its own javascript libraries and this is working fine. I am also able to get a very simple angularjs application working, in terms of retrieving and displaying the data.
The AngularJS application is uploaded to the CRM using the Resco interface and then is download to each client machine via the resco software. The actual files end up in the users AppData folder on each client machine.
Problem
When I introduced routing to the angular app, either using ngRoute or ui-router, I am getting Access Denied errors. The resco software uses the underlying browser, which in my case is IE11. I have narrowed down the error to when angular is attempting to load the partials for the routes.
The offending code is below (angular.js v1.3.15 line 9805)
xhr.open(method, url, true);
From my research, it seems like IE believes I am attempting a CORS request, however I am just attempting to load a file from disk.
Various posts suggest I add the site to 'Trusted Sites', however I am not actually accessing another site. I also cannot host this on a web server as the whole purpose is to have this angular application accessible offline within the Resco MobileCRM application
I also get the same error if I navigate to the AppData folder and run the angularjs application directly from there (i.e. not in the resco application).
Other posts have suggested that I need to replace the XMLHttpRequest created by Angular with XDomainRequest but I am reluctant to change the angular library, especially if I don't understand why.
Would appreciate it if anyone could shed some light on why this is happening and how to fix it.
I have confirmed that this is not possible on any of the browsers. You cannot make xhr requests to files served locally from disk.
I got around this problem for directives by loading my 'partials' in to script tags and referring to the id of these script tags in the directives.
I did not try that with ui.router or ngRoute and instead opted to redesign my application in to a number of smaller application as they did not need to share any context
I want to implement a web-based API (using ASP.NET Web API 2) and consume it by the client Side library (Sencha Ext JS).
My application should include
A simple user registration form.
A login page for admin.
CRUD operations for users' submissions.
Notes:
I do not want to include any backend code (i.e C#) in the we application, I want to implement it using the HTML/Javascript only, that is Ext JS.
I want the Web API to be RESTful.
I want to protect admin pages.
I want to use the SQL Server to store users' submissions.
All of that requirements should be implemented using the ASP.net Web API 2 and Ext JS only.
So far, I did initial search and I got a lot of learning for either the ASP.net API 2 or the Ext JS. But I couldn't have a guide that help me to fulfill the above requirements or help me to have both technologies work together.
Pleas help me on either way.
Or generally, can you help me get started work in combining both: Asp.net Web API 2 and any client side that consumes it, such as Sencha Ext JS or any other client side. It is not necessarily to be Ext JS.
Thank you so much.
Thanks to StackOverflow.com
If it were me, I'd use the DirectAPI for asp.net https://github.com/elishnevsky/ext-direct-mvc
You create webapi controllers, just like you normally would. The only difference is the the controllers that need to be used by EXT should inherit from DirectController.
If you follow the directions on that page, you'll end up with a globally available proxy object that matches the name of the controller and the public methods hanging off of the controller become methods of that object.
That is, server side controller MyAwesomeController with method DoSomething() becomes MyAwesome.DoSomething.
If you attribute the method as [NamedArguements] you can create methods such as
DoSomething(int id, int foo)
and pass from javascript as DoSomething({id: 20, foo: 30});
Since it is still just a controller, you can attribute permissions and return json as you would in any other situation.
If you get stuck, use the debugger and spend the time to figure out what's really going on. This all works in 4.x and I've tried it in 5.x and it still works there as well. But I wouldn't jump into 5.x just yet as there are still several bugs that need to be worked out by the sencha team before it is ready for prime time.
ExtJs has a REST proxy for the data. So what you try to do should be possible. The proxy can be configured and be finetuned.
I used the JSON proxy. ExtJs has very powerful filter and sort capabilities, both server and client side. In my experience difficulties arose when filtering and sorting server side. There is only sparse documentation on how the parameters are passed and which configurations have what effects.
Since you also develop the REST api, you can adapt to those details. You just have to do some research.
Here is not the place to ask about guides. For Asp I cannot help you, I never touched it. If you use ExtJs, you are free to choose you backend. For ExtJs, the start is pretty straight forward :
get Sencha cmd and generate a skeleton app.
follow the tutorial
create one file per class definition.
the API docs are great. If you still lack something SO is great too.
what you have to find out by yourself is the exact way parameters are passed to the backend and how to format the response.
I'm working on an AngularJS app that will have a hosted version and one that can be downloaded. The downloaded version should be accessible with 'file' protocol.
I've encountered several issues when trying to accomplish this. And have overcome quite a bit.
One issue that I am struggling with is enabling html5Mode on the hosted version, while disabling it on the downloaded file version.
Is it possible to set html5Mode based on what location protocol is being used?
I'm fairly sure that HTML5's pushState does not work when using the file:// protocol. For example, it can be used fairly trivially as a phishing vector to try to point to something innocuous (or the other extreme: harmful).
Doesn't it make more sense to package the application into a "runner" of some sort? Even a Chrome application would be easier to handle app updates.
Is it possible to get ng-include directive to work with a CDN?
In this case:
<div ng-include='http://cdn.somewebsite.com/templates/home.tpl.html'></div>
The cdn sub-domain of somewebsite.com is mapped through DNS/CName to a content delivery network.
However when loading the main site somewebsite.com, it does not render the template. I guess internally it is treating this as a cross-domain call.
Is there any work arounds to get Angular templates be hosted on third party CDN's and work with the local domain?
Yes, you are right - the problem is with cross-domain call.
Official docs say:
By default, the template URL is restricted to the same domain and protocol as the application document. This is done by calling $sce.getTrustedResourceUrl on it. To load templates from other domains or protocols you may either whitelist them or wrap them as trusted values. Refer to Angular's Strict Contextual Escaping.
and
Please note: The browser's Same Origin Policy and Cross-Origin Resource Sharing (CORS) policy apply in addition to this and may further restrict whether the template is successfully loaded. This means that without the right CORS policy, loading templates from a different domain won't work on all browsers.
Example:
angular.module('myApp', []).config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
// Allow same origin resource loads.
'self',
// Allow loading from outer templates domain.
'http://cdn.somewebsite.com/templates/**'
]);
});
Helpful links:
ngInclude
$sce
So your problem may be solved by appropriate angular settings, but not for all browsers.
Perhaps you can alter this code a bit. I have my client's intranet in a datatbase and that's connected to a remote API server. I use an angular app to pull the HTML, but it is part of a JSON object, so obviously that's pretty specicific to my own needs.
I happen to have full control over the CORS attributes of my server, so I can do this. If you try it google or some other site... you're stuck with an iframe. (I have not idea what that's allowed by JS is so strict!)
So, here's what I do to get my remote HTML data.
1:
In my controller I add this:
<div ng-bind-html="content"></div>
then in the code, I add this
$http.get(url)
.then(function (data) {
$scope.content = $sce.trustAsHtml(data.data.PageData);
});
That's it. Just don't forget that the site in the URL has to be allowing you to get the data via your remote system.
NOW: Just for fun, I used to use IFRAMEs to bring data from other sites before CORS was even invented. It was a big hack. Before AJAX, I'd make a tiny form on one page with all the form values empty. On another page, I'd have an iframe for it and just fill those input boxes with javascript and post them back with javascript, keeping the main page without a reload.
If you need more control of your data, you could simply have a hidden iframe, rip the HTML you want from it, put it in a variable and drop it whereever you want on your page.
There's always some half-a$$ed way to get things done. :)