I build an AngularJS application that I expected to work as a hybrid application for mobile devices. As such the application would run locally from the file system.
When the $routeProvider gets the html file I get the following message.
This is a CORS violation obviously but the file is local and trying to access another local file. It's not like a web site is trying to access a clients local files. This is the client.
I can't spin up a web server to serve up the local files because this will be packaged up and deployed as a local application.
I know people build hybrid mobile applications all the time. What I can't figure out is how they do this with AngularJS and why AngularJS doesn't either offer a solution or prescribe how to get around CORS.
I'm open to all suggestions. Thanks all.
XMLHttpRequest cannot load file:///D:/SubversionRits/SourceCode/Verso%20-%20Mashup%20Proposal/MarshupSource/MashupCoreUI/core/apps/mashup/welcome/welcome.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. VM36 angular.js:8380
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///D:/SubversionRits/SourceCode/Verso%20-%20Mashup%20Proposal/MarshupSource/MashupCoreUI/core/apps/mashup/welcome/welcome.html'.
Here is my route config
mashupApp.config(function ($routeProvider, $httpProvider) {
// I've tried all these with no effect.
//$httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
//$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//$routeProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
//$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//$httpProvider.defaults.useXDomain = true;
//delete $httpProvider.defaults.headers.common['X-Requested-With'];
$routeProvider
.when('/about', {
templateUrl: 'apps/mashup/about/about.html',
controller: 'aboutController',
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load({
name: 'mashupApp',
files: ['apps/mashup/about/aboutController.js', 'apps/mashup/~appServices/dataService.js']
});
}]
, sessionLoad: function ($route, sessionLoad) { return sessionLoad.loadCompleted(); }
}
})
.when('/', {
templateUrl: 'apps/mashup/welcome/welcome.html',
sessionLoad: function ($route, sessionLoad) { return sessionLoad.loadCompleted(); }
}
})
;
});
I don't know the details, but I'm pretty sure HabitRPG's Android app uses Angular.
https://github.com/HabitRPG/habitrpg-mobile
Ok, I figured it out.
Running a web app from a file doesn't work because of CORS but when you are packaged up in Phonegap or Cordova inside the Intel XDK everything works.
I took my application and created a blank Intel XDK project and copied my web files to it without changing anything.
It all worked!
Thanks for those who offered ideas and suggestions. I really appreciate it.
I see how this can work now.
If you want to create a hybrid mobile app with AngularJS, you should definitely checkout the Ionic Framework.
From the Ionic website:
A match made in heaven. Ionic utilizes AngularJS in order to create a framework most suited to develop rich and robust applications. Ionic not only looks nice, but its core architecture is for serious app development, and AngularJS ties in perfectly.
You can't access the files directly due to browser security settings, but you can store data etc in localstorage and use that when the app is offline.
Someone has put together an example here http://amitavroy.com/justread/content/articles/html5-local-storage-angular-js
Related
I am facing some weird type of behavior with spring boot + angular js while doing routing. Although routing is working but otherwise redirect to is not working.
For example:
if the url is http://localhost/admin/home#/analysis(working)
if the url is http://localhost/admin/home#/ (working)
but if the url is http://localhost/admin/home (not working)
I have configured otherwise but its not doing any benefit
Below is my code:
.config(['$routeProvider','$httpProvider',function ($routeProvider, $httpProvider) {
$routeProvider.when('/analysis', {
templateUrl : '../resources/views/includes/dashboard.html',
controller : "RegistrationController"
}).when('/', {
templateUrl : '../resources/views/includes/profile.html',
controller : "RegistrationController"
})
.otherwise({
redirectTo: '/'
});
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}]);
I have placed in html
I would suggest you to take a look at $locationProvider.html5Mode(true).
It tells angularJS to use HTML5 strategy if available. Basically # is required for those browsers who do not support HTML5.
Also, you will be required to configure <base> tag of html.
Even when you will implement these concepts, you will stumble across another issue which I faced as well. If you navigate via href in the application, it would work , but if you copy the url and paste it directly in the browser, you'll get error as it would directly hit the server and will try to find necessary URL mapping on the server.
For more details, you can look at this this question which I asked for this issue
I hope it'll help.
Your problem is more related to SEO-related AngularJS implementation, basically, the solution to this is using the rewrite functionality of Apache or Nginx.
For more information, you can start here.
I am querying an "http" API with my app, so every time I access my application on heroku (which is https enabled by default), CORS complains about cross-origin domain requests.
Asking the owner of the API to make it "https" is not an option, so I was wondering if it was possible to force my application to always use http? This is a node.js built application. (More specifically, it is a yeoman-generated angular js app). In Rails, I've seen several posts on Stack OverFlow saying this can be easily done with something like config.force_ssl = false, so I was wondering whether something similar could work for a node.js application (either something in the code or on Heroku specifically).
As a fix, I wrote an AngularJS Factory that routes all https requests to http:
.factory('DisableSSL', function($location, $window){
return {
activate: function() {
if ($location.protocol() !== 'http') {
$window.location.href = $location.absUrl().replace('https', 'http');
}
}
};
})
This factory is included in all of my other controllers and the activate function is called.
Note that this doesn't work if you're using a browser extension like HTTPSEverywhere.
This is in relation to my question about changing node.js configuration in a cordova/ionic application - How to configure node.js routes in a cordova app
I didn't get a satisfactory answer to that. I also had a chat with couple of cordova/ionic guys on their blog, but they mentioned node.js cannot be configured by using express in this case and also did not have any clue to how it can be done.
So, my question is is it at all possible to do something like changing default port or url rewriting in node.js server when working with cordova/ionic applications?
Would love to know what you guys think.
Elaborating more -
Let's say I have a couple of routes like so -
http://localhost:6001/#/home/index
http://localhost:6001/#/content/index
As I didn't want the hash in URL, I added this in my app's config section -
$locationProvider.html5Mode(true);
Which works fine and URLs don't show '#' but on refreshing in browser, now I get this error -
Cannot GET /home/index
This is why I need URL rewriting to be done on server, which I can't seem to figure out.
These are my routes in app.js -
.state('home', {
abstract: true,
url: "/home",
templateUrl: "app/home/home.html"
})
.state('home.index',{
url: "/index",
views: {
"index" : {
templateUrl: "app/home/index.html"
}
}
})
$urlRouterProvider.otherwise('/home/index');
As we discussed in chat, the Cordova_CLI project uses a fixed server for rapid deployment through cordova serve (or ionic serve). This node server does not use express or other plugins to handle routing, it uses a script from the [cordova-lib][1] project.
The script provided for this development server does not take into account URL rewrites, so html5Mode would not work properly without modification of this script. It could be a fork as simple as replacing the do404 function logic to instead set filePath to /index.html.
another option would be running a separate web server (node+express or any other) and including the ionic/cordova scripts in the project.
Ideally, the production app would be running against a public server, and the Cordova_CLI server should only be an issue in dev environments.
I am working on creating a website with Angularjs and WebAPI as backend support with Visual studio.
I have defined the url to webapi in app.config.js as an app constant:
var serviceBase = 'http://localhost/Webapiservice/';
app.constant('ngAppSettings', {
apiServiceBaseUri: serviceBase,
clientId: 'ngTestApp'
});
Now for QA environments (http://QAServer/Webapiservice/), the webapi resides at a different URL, the same goes for our production environment (http://ProdServer/Webapiservice/).
I can manually update the js file to the appropriate location. But is there a way to automate this process so webAPI is pointing to the correct URL?
Is it possible to do this with grunt? Again I have never used grunt before.
ngConstant does a great job, along with grunt: https://github.com/werk85/grunt-ng-constant. This way you can specify your environments as JSON files and on compile/run time, grunt generates a enviornment.js file with a module (I call mine always ENV), which can be injected in every part of your application.
I would do something like this:
angular
.module('app', [])
.value('$path', {
rest : "http://localhost/Webapiservice"
})
you will call something like this:
app.constant('ngAppSettings', {
apiServiceBaseUri: $path.rest,
clientId: 'ngTestApp'
});
I'm using angular to develop an application. I'm developing off my local file system, on Windows. However, when I enable angular-route.js, whenever I hit index.html with my browser, it instead goes to index.html#/C:/.
My route definition is:
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'});
}
I think this causes the site to break, because /C:/ doesn't match any angular routes. What's going wrong? How do I fix this?
For routing & ajax (& more) to work properly, run a local development server; avoid use of file:// for development, since browsers have different rules for it.
Tools like yeoman + generator-angular will automatically set up a gruntfile with a server task, which will run a node-connect server to locally serve your files.
You can do this with
python: (3)python -m http.server 8001 (replace http.server with SimpleHttpServer in 2)
node.js + connect
ruby + rack
From the angularjs tutorial (number 5 under "working with the code") - "You need an http server running on your system, but if you don't already have one already installed, you can use node to run scripts\web-server.js, a simple bundled http server."
Response from comments: For phonegap, use the phonegap tools. It does exactly what I said, it runs a local server.
This will work.
angular.module('MainModule', []).config(function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix("!");
$locationProvider.html5Mode(false);
$routeProvider.when('/', {template: './js/templates/home.html', controller:HelloWorldCtrl});
$routeProvider.when('/other', {template: './js/templates/other.html'});
});
In index HTML you need to specify templates:
<script type="text/ng-template" src="./js/templates/home.html"></script>
<script type="text/ng-template" src="./js/templates/other.html"></script>