I am developing Web Application using MEAN(Mongo, Express, Angular, Node) JS stack.
I would like to use PhoneGap to compile my clients for Android/iphone native app. At the same time I want to keep same client-side Views & AngularJS code to remain usable for desktop browsers. I am using bootstrapper for Responsive design and it works fine for me on mobile browsers.
I saw, Phonegap require us to include some of it's own Javascript files, and I will be required to have few more .js files in footer of index.html.
If I pressume, I should not be using server side .jade engine for index.html file, and all my .html should remain in client side.
will index.html created for phoneGap will cause problem, if I use it for desktop browser? Should I have different index.html for browser and phoneGap input. Can grunt help me in customizing index.html files.
What are the other things which I should take care of for my needs?
My advice for you is to separate the projects, Phonegap or Cordova Apps doesn't have a running server, they serve the html files through the file:// protocol.
If I pressume, I should not be using server side .jade engine for
index.html file, and all my .html should remain in client side.
You presumed correctly, no .jade templates should be used, your views should be plain html files or, if you want, load them as scripts so you don't have to load them on page request increasing app performance.
will index.html created for phoneGap will cause problem, if I use it
for desktop browser? Should I have different index.html for browser
and phoneGap input. Can grunt help me in customizing index.html files.
Yes it will, if you try to use an index,html from phonegap on a desktop browser you will get a lot of javascript alerts. Since phonegap.js is expecting to get some events that are fired by cordova when running on the device. And this gets worse if you have Cordova plugins.
Related
I have been working on a HTML/JavaScript program which requires to be downloaded on to you local computer. I am wanting the program to load .mp3 files form the users music folder and display it. How can I do this locally without PHP.
For security reasons,
All the popular browsers does not let you load files from the local computer by default, unless the user select the file (or drag and drop it) on the browser (html5 example here).
Also, the browsers do not let you see a folder's content so that you know the files inside it.
In order to have full access to the file system with javascript, you need something else.
Web App as a computer app
For now, the best way to build a computer application using Web technologies (HTML, Javascript, CSS), is either NW.js or Electron
NW.js
From their github
NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.
You can start by building your code as a NW.js app (Getting started doc on their github)
Electron
Form their page
If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.
Node.js
You can use Node.js 's API for file system access (fs doc)
I'm developing an cordova app for Android which has a lot of logic (js) and design (html/css) same as my web application. I want to share these assets among web app and android app. Now I had compiled all these js and css in apk, but when some code is changed, I have to prepare an update and put in the play store. If it would be possible to load code and css from server after app started, it would reduce need for upgrading. Is there any way?
I'm considering loading shared resources via ajax and dynamically creating stylesheets and scripts in DOM, but maybe there is better approach, isn't it?
You could download the files from server every time, but i think that is not what you want because it would not be availibe offline at all and if the app it big and the connection bad it will take much time to download.
a better way is to download the files if they change. you can do that with FileTransfer.download() yourself or use a ready solution like the cordova-standalone-hydration
BUT your app will not be accepted by for example Apple because they deny an app with code they can not check
I found a plugin where you can update all your files in the WWW folder on startup or later.
Link: https://www.npmjs.com/package/cordova-plugin-dynamic-update
I have been developing an app that uses angularjs and spring mvc. The app runs perfectly in eclipse when I do Run As...Run on Server and view in my web browser at localhost : 8080 / appname.
But now I have used the eclipse maven pugin to build a war file and deploy the war to a remote server. When I type in the domain name on the remote server, I just get the text from the main index page, without any of the javascript, or css. Since the links are all javascript, and the index page relies on client-side includes, all I can access in the browser from the remote server is a small amount of unformatted text with no links.
Is there an extra step to creating an executable war with angularjs that I am not aware of? The methods I used to create the war and install it on the server have worked many times with spring-only apps running on the same server, and developed in the same eclipse installation on the same devbox.
How can I start to diagnose this problem? I am new to angularjs.
how do you render angular files? Do you use JSP + Angular?
If you are using just static files to serve angular html then your static file serving is working.This means that something wrong is going with your javascript and css files mapping (wrong urls)
otherwise if you render jsp + angular then maybe your static content serving is not working properly
Does your browser say that mappings are wrong?(check it out in browsers console)
How did you map paths to your css and javascript?
I'm working on a servlet/web services website, deployed in Tomcat 7.
The website is a single page application. Html/Css/JavaScript files are served as static content by the server, and then all the ajax calls are managed by Java webservices.
I'm using Eclipse for coding in Java, and WebStorm for HTML, CSS and JavaScript.
My problem is that changes made with WebStorm are not immediately reflected on the server, making it difficult to debug (changes made with Eclipse are immediately updated in the deployed site, however). WebStorm works on exactly the same files and folders as Eclipse, not on a copy.
Is it possible to configure the projects so that changes made with WebStorm are reflected in the server, without having to touch Eclipse?
Best,
Eloy
refresh your project in eclipse, or edit your static files with eclipse.
this is because the tomcat in eclipse publish the project in a temp folder to deploy it in tomcat.
you can also try to: open the tomcat server in the eclipse view "servers" by double clicking on it, and select the option "Serve modules without publishing"
Window-Preferenc-Workspac, check Refresh using native hooks or polling.
But you still need to wait 2-3seconds,and need to refresh your browser.
I am looking for a tool that can help me refresh broswer after code change.
WaveMaker is a powerful ajax based UI builder, but its JSON-RPC API standard is incompatible with our web service, which only has a RESTful API. As a result, we would like to design an UI without using any service using WaveMaker, and only extract part of its source code that runs on browser side (discarding all services)
Unfortunately, we can neither view or test the extracted code (all .html files show an empty page), a javascript reference in index.html is pointing to runtimeLoader.js, which we cannot find anywhere. So, is it possible to deploy the browser side code on a web container (not an application container like Tomcat) without runtimeLoader.js? If this is not possible, how do I change the source code so it can be tested without using WaveMaker?
If you don't mind having a java server in the mix, you could "import" REST calls to your API into the application. The XHR service (new in 6.5) targets JSON returning services. The 'Build-a-Service' does best with XML returning services. The browser would then call the WM java server, which in turn calls your REST services.
An easy way to get started with a WaveMaker client only app is to use the phonegap build option. This will build a zip file of a stand alone app. If you unzip that into say an apache served folder, you will render pages, etc. Note this build is targeted towards mobile devices via phonegap, so you will want to make adjustments if you are targeting desktop browsers.
Also, runtimeLoader.js can be found in the client runtime lib folder. e.g. /studio/lib/runtimeLoader.js of the installation.