Steps for packaging an AngularJS and WebAPI 2 web application as a Cordova bundle

I am currently working on a portal using VS.Net 2013, Asp.Net WebAPI-2, and AngularJS 1.4. I want to convert this portal into a Cordova package in order to improve the application start time. While my portal is responsive and fits well on mobile devices, slow network speeds lead to longer page loading times due to image size.

I am seeking guidance on the following:

  1. Is there a recommended approach to maintain a common code base for both the webpage and Cordova App since the portal is already responsive?

  2. My Angular services for accessing the WebAPI are structured as follows:

    function checkUserAccess(fnSuccess, fnError) {
return $resource( * * "/api/authorization/user/checkaccess" * * , {}, {
  "checkAccess": {
    method: "POST",
    isArray: false
  }
})
.checkAccess({}, {}, fnSuccess, fnError);

    }

When converting to a Cordova application, I understand that I will need to provide the full URI including my domain name. Is there a simpler way to add a domain name prefix just for Cordova builds without hardcoding all service calls?

angularjscordovaasp.net-web-apivisual-studio-cordova

Answer №1

Yes, I actually have experience with multiple apps built on the same technology stack you mentioned

In terms of using a single code base: When developing with Cordova, all your code resides within a www/ folder in the form of js, html, and css files. Cordova then takes this code and generates mobile app packages elsewhere. If your code is identical for all platforms, you can simply deploy this www/ package to a website without the need for maintaining separate code bases or extra work.

The only possible challenge I foresee is the Cordova import script may encounter issues. However, as long as your code does not rely heavily on Cordova calls, you should be fine. It's also possible to use conditional statements like if(Cordova) to handle such scenarios.

Regarding API URI: You will need to establish a hardcoded endpoint somewhere for your Cordova app to communicate with. Some approaches include:

1) Storing your serviceBase information in a config.json file or hard-coding it in your app.run 2) Creating a single service for getEndpoints located at a fixed address (related to point #1), which provides the URLs of all other endpoints

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered during ag-grid version upgrade: unable to locate compatible row model for rowModelType 'virtual'

Recently, I updated my ag-grid version from v7.0.2 to v11.0.0, and after the upgrade, all tables with infinite scrolling functionality stopped working abruptly. The browser console displayed the following error message: ag-Grid: count not find matching ...

javascriptangularjsag-grid

What measures can be taken to avoid the entire page from reloading?

Within my page, there exist two containers. The first container is designated for displaying a list of items, while the second container showcases actions corresponding to each item. A feature allows me to add a new item dynamically to the first container ...

jqueryajaxangularjs

Debugging and ensuring the functionality of Cordova (Phonegap) HTTPS connections

There is an HTTPS site with an API that needs to be accessed. I need to work from Cordova (AngularJS) with its HTTPS API. Additionally, I want to debug the AngularJS app in a web browser (Chrome) because it's much quicker compared to rebuilding and ...

javascriptangularjsajaxcordovagoogle-chrome

Looking for suggestions on AngularJS and Rails integration!

I'm currently in the process of creating a website using rails, but I want to integrate AngularJS for several reasons: Efficient sorting between 2 different types of data (such as selecting various restaurants from a list and then different food cate ...

javascriptruby-on-railsangularjs

PHP Error - Noticed a non-existent constant 'x' being used in the code, assumed it to be 'x

How to Retrieve Data from a Table, Pass it to the Controller in JSON Format, and Display it in a View Using AngularJS I am looking to extract data from a controller's json-encoded variable and showcase it on a view page through angularjs <div cla ...

phpjsonangularjslaravel

How to Use AngularJS $http Mock Respond to Simulate a Response with a `location` Header?

One interesting scenario I have encountered involves an API that returns a status code of 202 with no data. However, the response includes a header called "Location" which points to a specific URL. After browsing through the $httpBackend respond(...) docu ...

angularjsunit-testingmockinghttpbackend

I am looking to dynamically generate HTML elements using AngularJS based on data from a JSON file

Although there are existing answers to this question, I have a specific approach that I need help with. I've already made progress but could use some guidance. This is my Controller : angular.module('dynamicForm.home-ctrl',[]) .con ...

javascriptjqueryhtmlangularjsjson

Best practices for handling loops in Angular's $http service to ensure smooth rollback functionality

Seeking guidance on best practices for Angular $http POST requests. Currently, I am gathering an array of data to later post to my Spring Data REST database. To achieve this, I need to iterate through the $http POST request in order to allow all the data ...

angularjstransactionsrollbackspring-transactionshttp-request

Interplay between Angular controllers and directives

I've been working on a code snippet that allows users to leave comments on a list of items. To achieve this, I created a directive and set it up to listen for keydown events in order to prompt the user to submit a comment by a specific keycode, 13. H ...

angularjscommunicationangularjs-directivekeydownangularjs-controller

Troubleshooting Problem with Angular, Laravel, and UI-Router

Currently, I am in the process of developing a Single Page Application (SPA) using AngularJS, Laravel, and UI-Router. In my Laravel routes.php file, there exists a single route '/' that loads index.php - this is where all my dependencies are incl ...

angularjslaravelroutesangular-ui-router

Strategies for optimizing polling of mySQL database using $http.get

** ANGULAR 1.X ** Hey there! I'm currently seeking assistance in making this $http.get function asynchronous. Currently, my workaround involves using a setInterval on the displayData scope. However, this solution is not efficient as it consumes a lot ...

phpmysqlangularjsangularjs-http

How to utilize variables in Angular module functions?

My experience with Angular is fairly new, and I recently encountered a debugging issue in my application that unfolded like this: Imagine I am adding a new directive to an existing module defined in another .js file. When I tried using the syntax below: ...

javascriptangularjs

Synchronize Protractor with an Angular application embedded within an iframe on a non-Angular web platform

I'm having trouble accessing elements using methods like by.binding(). The project structure looks like this: There is a non-angular website | --> Inside an iframe | --> There is an angular app Here's a part of the code I'm ...

javascriptangularjsprotractor

Encountered a Gulp error: unable to spawn process due to E

gulpfile.js 'use strict'; var gulp = require('gulp'); gulp.paths = { src: 'src', dist: 'dist', tmp: '.tmp', e2e: 'e2e' }; require('require-dir')('./gulp'); gulp.ta ...

angularjsnode.jsnpmgulpyo

Are there discrepancies in isolated scopes among browsers, particularly older versions of Chrome, when using AngularJS 1.2rc2?

While testing an application on an outdated version of Chrome (5.0.3), I encountered a strange issue. Essentially, I have a controller set on a directive like this: <div ng-controller="MyController" class="my-directive-with-isolated-scope"> <!-- ...

google-chromeangularjs

Is AngularJS Authentication Service Capable of Supporting Promises?

I have recently set up an authentication service that I inject into my Login controller. When I use it to perform a login, the process involves calling the service like this: $scope.login = function() { var loginResult = authentication.login($scope.m ...

angularjsangularjs-service

Exploring the object structure received from AngularFire

Here is the Firebase query that I am running: var ref = new Firebase('https://<myfirebase>.firebaseio.com/companies/endo/status'); data = $firebaseObject(ref); console.dir(data); The object that I receive looks like this: d ...

javascriptangularjsfirebaseangularfire

Guide to implementing a personalized filter in AngularJS 1.6

I am struggling with injecting a custom filter, status, into my component. Below is the code for my component: function ClaimsListController(dpClaimsListService) { var ctrl = this; ctrl.claims = null; ctrl.searchCriterion = null; ctrl.l ...

javascriptangularjs

Can you explain the concept of fallback color in CSS?

Can you explain to me what a fallback color means? I searched online and found out that it is used to display a color when the specified format is not supported by browsers, like Internet Explorer. Is there anything else I should know about fallback colors ...

cssangularjshtml

Angular's Restangular initiates a blank promise at the beginning

One of the services I created can fetch data from the server and cache it, or retrieve data directly from the cache. The code snippet below illustrates this functionality. While using .then statements in the client side for cached data, I've noticed ...

angularjsrestangular