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.
Related
I have an ASP.Net Core MVC/Angular JS application I'm developing.
Everything works while I am developing and running through VS 2015 and IIS Express.
But when I publish the files to my local IIS and try to run through there it is not working. The home page works fine and this is actually the final Angular otherwise route:
$routeProvider.otherwise({
templateUrl: "/app/views/home.html"
});
I finally tracked down what is happening but I don't know why?
In my NavBar in my ASP.Net Core MVC _Layout.cshtml my <a> elements look like this:
Employees
Non Employees
This is working fine in Dev through VS 2015 and IIS Express.
The URLs look like this:
http://localhost:2352/#!/employee_list
and everything renders as it should.
But after publishing and running through full IIS (locally that is), the same <a> links give a URL like this:
http://lerd/#/!/employee_list
Notice the '/' between '#' and '!'.
so instead of '/#!/employee_list' I get '/#/!/employee_list.
What in the world is causing this? Has anyone else experienced this?
I just noticed if you manually type the right URL in the browser and hit enter it sticks that extra slash in there. So it's not really the application. It's the browser and maybe IIS.
Well it seems that you need '#' on prod and '#!' in Dev.
So I did this in my layout file setting up the NavBar:
<environment names="Development">
<li>Employees</li>
<li>Non Employees</li>
</environment>
<environment names="Staging,Production">
<li>Employees</li>
<li>Non Employees</li>
</environment>
I'm building a simple Angular app for a demo for a client. They don't know much about web server technology so I was trying to set it up as a stand along app that will run in there browser. I wanted to use ngRoutes to break my code up into templates but I can't seem to get it to work with any stand alone server (like live-server or nodemon).
Anyhow can I do this without a server or is it not possible. From what I can tell it won't work with anything I try.
Here is my route code.
angular.module("myApp", ['ngRoute','ui.bootstrap','ui-leaflet'])
.config(function($routeProvider,$locationProvider){
$routeProvider
.when('/search',{
controller: 'searchCtrl',
templateUrl: '/views/search.html'
})
.when('/list',{
controller: 'listCtrl',
templateUrl: '/views/list.html'
})
.otherwise({
redirectTo: '/search'
});
$locationProvider.html5Mode(true);
});
OK, Let me clarify something Nodemon itself is NOT a server at all, nodemon is a plugin which Monitor's for any changes in your node.js application and automatically restart the server. you will need to install the server on their local machine I suppose they are running the application locally and if you want to run the server by itself all you have to do is to add it to startup. and It will run automatically.
I'm using SPA technique using AngularJS in ASP.NET MVC framework,AngularJS routing between pages are working fine when it's run from VS2013,but after hosting the application in to IIS8.5 routing not working.
When i run the app using IIS express the url was http://localhost:12345/#/home
After publishing http://localhost/myapp/#/home
Here is my app.js,
$routeProvider.when("/home", {
controller: "homeController",
templateUrl: "/app/views/home.html"
});
In index.html
<li> Home</li>
When i publish my app in windows azure, app is working fine. Because the url was myapp.azurewebsite.net. myapp.azurewebsite.net/#/home
How can i host similarly in local IIS.
You almost find find the answer -- that is all about absolute file path.
Quick fix:
Change templateUrl: "/app/views/home.html" to templateUrl: "app/views/home.html" (remove the heading slash)
Answer:
If you specify the templateUrl as /app/views/home.html, which starts with /, you tell the browser to get it from root.
If your webapp is stored in http://localhost/myapp/, your browser will visit http://localhost/app/views/home.html to get the template.
That also explains why your app works fine when it is places in root directory, but not working in sub directories, like http://localhost/myapp/#/home .
Do not worry about the side effect of relative path. All the resources are calculated relative to index.html.
I have an MVC app that uses AngularJS. I am in the process of organizing the folder structure to be feature based rather than type based.
An example folder structure is now
App (Folder within main project, at same level as Views)
Assets
CSS
JS
Pages
Home
home.js
home.tests.js
home.html
About (etc)
Now the problem is that when ui-router tries to load home.html the web server throws a 400 error. If I go to the file manually in the browser it works. What is the problem here? Why can I not serve files up from this directory. Note that I actually right click the 400 message in the console and choose open in new tab. So I know the file I am looking at is the URL being requested from AngularJS
Here is my ui-router setup
.state('home', {
url: '/home',
templateUrl: '/app/pages/home/home.html',
controller: 'mainPageController'
})
Note:
I serve up a .js file from the same directory which seems to work fine!
I had the exact same problem and it was caused by another developer trying to fix an IE caching bug.
I found the solution here by Ben Cull: https://stackoverflow.com/a/30014936/710268.
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
//disable IE ajax request caching
$httpProvider.defaults.headers.get["If-Modified-Since"] = "Fri, 01 Jan 2010 00:00:00 GMT";
My problem was that the "If-Modified-Since" header was set to '0' and for some reason that was causing html template files to not load.
By default the router is going to start at the top level of your MVC project (i.e. where your Views and App folder sit) and not the folder where your JavaScript is served from.
So in Angular your templateUrl needs to be App/Pages/Home/home.html.
So in your angular router configuration have the property:
templateUrl: 'App/Pages/Home/home.html'
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