Technologies to create a hybrid application in Cordova - angularjs

This is not a programming question. If it is not appropriate to post it here, just advise me some place worth to share this.
What would be best to know in order to startup a project in Cordova. What i need to know is that in order to create a working web and android app what should i use?
So far
I use Cordova.
Ionic for GUI.
PHP and MySQL for back end
Angular JS for client side and controller for the app.
JSON
Do I have to use AJAX as well? if so, where would it fit?

"Do I have to use AJAX as well? if so, where would it fit?"
Yes, you should build a Single Page Application inside Cordova using any framework that you desire. Ionic/Angular is a valid choice here, other options include JQuery/Bootstrap, React JS, Framework7, OnsenUI and pretty much any combination of JS single page application framework and mobile focussed web front end framework that you like and can make work together.
For going beyond what the web view can do you'll use off the shelf plugins, or write your own which will need Java / Objective-C / C# or Swift skills depending on which platforms you're using.
As you want to be building a single page application you will need to make AJAX calls to get resources from servers, call APIs and the like. Do this using the mechanism built into your chosen framework, e.g. $http service with Angular, $.ajax for JQuery etc.

With angular you can use AngularJS $http
Link to Angular documentation: https://docs.angularjs.org/api/ng/service/$http

Related

Alternative to Single-spa

We have huge enterprise application written in angularjs.
Now we have to migrate to angular, so we have ruled out an option of hybrid approach angular suggests using "ngUpgrade".
So now we are creating a new application in angular, which means we have 2 applications "angularjs(old)" and angular(new).
So to switch between these two applications can be done without refresh using angular-spa.
I was trying to find if there is another framework, where navigating between two apps happens without refreshing(without refreshing entire page by navigating to new html).
Possible solution:
Use a new Angular application as a wrapper, then just use iframe to show the application you want depends on the context - old or new. The issue you might face is changing the iframe, but I guess you can use postMessage to communicate between the apps.
A bit more sophisticated:
Use Angular Elements to create your hybrid app.
I really recommend you to watch Erin talks from the last Angular connect about how Google made the migration from js to Angular.
I've recently tried the micro-frontend architecture described here:
https://www.martinfowler.com/articles/micro-frontends.html
Each app on different code repository, runtime build and quite easy to implement. Take a look :)

Creating first angularjs SPA with VS2015

I am new to AngularJS and need some advice on how to structure a SPA with Web API for an external search application
Di I have to use
•MVC / razor views (leave all routing and rendering to Angular)? or just use 1 VS2015 app [use angularjs SPA template for VS2015 or just an empty web application with angular file and a webapi project under same solution?
any examples would be helpful to understand
For angular structure I am reading Google best practice and John Papa
Well, I think what you ran into now. I can suggest two of the ways you can choose.
If you want to keep your backend and frontend together you can go for angularjs SPA template for VS2015. It would come with the build pipelines, bundles and everything you'd need. Now you can choose to render your single page of angular to be rendered with a MVC razor view (if you want to have any mechanisms where you'd want to include your dependencies through the razor view) or just go with a blank html and web api controllers on the back. But you'd end up using one environment for all and I think that's best if you're building the full project.
Now, for the other way around, you can start with an web api project. You can instantiate your angular project with it or somewhere else. You can use yeoman or any scaffolding tool you like and use your own JS toolings you'd like to use. You can do the same in the VS project too but this approach is better if you want to keep the frontend and backend flavor separate.
And I'd suggest using typescript too.

AngularJS with JSP

I am new to AngularJS.I have two questions.
Is it possible to use JSP pages instead of HTML in AngularJS.
Is it possible to create a web application using AngularJS without webservices (for fetching data from DB) and use HTTP servlet for that purpose
Is it possible to use JSP pages instead of HTML in AngularJS.
Even if you use JSP the final output will be HTML so you can use JSP in AngularJS but JSP files are mainly used to render the frontend with data that you can do using HTML only in AngularJS.
Is it possible to create a web application using AngularJS without web services (for fetching data from DB) and use HTTP servlet for that purpose
Whether you use plain Servlet or any framework that creates REST APIs, it will be HTTP calls only.
(This is a newbie question which applies equally to all front-end MVVM frameworks. I'll answer it for the general good.)
AngularJS is a front-end framework which runs in the browser. It relies on a server delivering the content (HTML templates, CSS and JS sources) to the browser.
What you use as a server, is entirely up to you. It depends on whether you need server-side dynamic content.
If none is required in that area, you can use a static HTTP server like LightHTTP, or plain old apache, or nginx, or anything else to deliver the AngularJS site to the browser.
But in most you will have some server interaction (i.e. storing / querying stuff in a database, or communication / synchronization with other users, etc). The common approach for that is to deliver HTML/CSS/JS statically and add a bunch of REST interfaces. Flask and Tornado are popular server choices for that, or stuff like spray.IO / akka.http for higher traffic volumes.
In specific cases, you may want to work with pre-rendered HTML templates (usually because you want to dynamically exclude parts of pages for security/user role reasons). Then you need a server-side framework with template rendering. Django, JSP, ASP, pick your favourite.
It seems like you are asking how to use AngularJs in a JavaEE application. And yes it is possible. Only your index.jsp will be in jsp, and all you other views will be in html.
You can then use http requests to fetch data through your servlets.
it can be useful. here are scenarios:
you want to save ram, cpu for mobile phones or machines that doesn't have lots of power. you can partially render page in jsp and keep only minimal in angular.
your team is traditionally jsp heavy and you want to use them and gradually transfer to angular. eg... for i18n rendering jsp seems far better. note that i18n may not add lots of values in angular and you may not want to throw up existing code in jsp.
I have been noticing strong views in stackoverflow and they seem to dismiss everything that doesn't fit in their utopian all new cutting edge. all the angular projects I worked had heavy dose of legacy pages using jsp and it doesn't make sense to rewrite everything from scratch or lay off whole team and start hiring from scratch. and thus, yes, jsp makes sense with angular.

Grails - Ionic - AngularJS - Is it a good idea to work in this Env.?

I want to create an application using Ionic and AngularJS and Grails?
Also, I want to use Grails Spring Security Core plugin for login or registrations procedure.
Although, Stack Overflow is not the correct site to ask this type of questions which simply needs suggestions and other's opinions.
Well, we are here to help. You can try other StackExchange sites like https://softwareengineering.stackexchange.com/.
Grails + Ionic + AngularJS is a perfect combination of frameworks to build a fully functional and elegant mobile application for all platform. We've build various mobile applications using these three technologies and they work awesome.
Since Grails fully support the concept of rest API for JSON and AJAX based calls, it is absolutely possible to use it along with AngularJS. AngularJS doesn't care about the server-side technology you are using as long as your server side code can communicate over JSON data.
Ionic is just a beautiful front-end SDK which works on the top of AngularJS and provides various utilities to develop a hybrid user-friendly mobile APP.
So you can easily use these 3 technologies and get your mobile app ready in a few weeks.
Ionic doesn't care about what you use as a server stack. As long as you create a service which has well defined interfaces (REST?), you should be fine.
I for example use PHP (yeah, I know, shocking, right?) Slim framework + Postgres database as my backend.

I need to implement Asp.net Web API 2 and consume it by Sencha Ext JS

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.

Resources