EzDev.org

ionic

ionic - Build amazing native and progressive web apps with open web technologies. One app running on everything ?? Build Amazing Native Apps and Progressive Web Apps with Ionic Framework and Angular ionic lets developers build beautiful and interactive mobile apps using html5 and angularjs.


how to pick the ios emulator from cordova / ionic command line

in using the ionic emulate command line (i'm assuming it's the same as cordova phoengap) how do I pick the device - either ipad or iphone tall screen. It always defaults to the 3.5" screen.


Source: (StackOverflow)

how to restrict app to portrait mode only in ionic for all platform

I'm working on Ionic/Cordova, I added this to androidManifest.xml but this didn't work for me and app is still showing in both ways

android:screenOrientation="portrait"

how can I restrict my app to portrait mode only? I have checked on android and it doesn't work


Source: (StackOverflow)

How to place ionic tabs at the bottom of the screen?

I created a simple ionic-tabs that shows my icons at the top of the screen. I tried to wrap it in a ionic-footer-bar in order to have it placed at the bottom of the screen with no success. The tabs disappear when I do that. How should I accomplish the looks I want?

<ion-footer-bar>
    <ion-tabs class="tabs-icon-only tabs-stable">
    ...
    </ion-tabs>
</ion-footer-bar>

Source: (StackOverflow)

Clear History and Reload Page on Login/Logout Using Ionic Framework

I am new to mobile application development with Ionic. On login and logout I need to reload the page, in order to refresh the data, however, $state.go('mainPage') takes the user back to the view without reloading - the controller behind it is never invoked.

Is there a way to clear history and reload the state in Ionic?


Source: (StackOverflow)

Ionic directives VS Angular material directives with Ionic Framework

I want to use ionic with material design. I am stuck between using ionic directives with custom CSS and angular-material

I have read that using ionic directives we get lot of efficient features like

  • App data is remembered with UI-router, even after navigating to other view and coming back to the page

  • Ionic list items are rendered only up to display height and reused when scrolling down or up

and a lot of performance improvements.

But, if I use ionic directives they don't have the material design.

If I use angular-material I will not have these performance improvements, and extra features needed for a mobile application.

Angular-material directives are like

<md-list>
  <md-item ng-repeat="item in items">
    Hello, {{item}}!
  </md-item>
</md-list>

Ionic directives are like

<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, {{item}}!
  </ion-item>
</ion-list>

Looks like Ionic is funding angular-material project development, then why is angular-material not compatible to use with ionic?

How can I use angular-material components without losing the performance improvements and features of ionic?

OR

is there a better idea for using material design with ionic?


Source: (StackOverflow)

Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK - Android

I know there are lots of questions similiar to this one, but i couldn't find a solution for my problem in any of those. Besides, I'll provide details for my specific case.

I coded an Ionic project in Ubuntu 16.04 LTS, and now I have to build it for release. So I run the command:

cordova build --release android

And I'm shown the following error:

Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
Looked here: /home/user/Android/Sdk/tools/templates/gradle/wrapper
  • I don't have this templates/gradle/wrapper directory.
  • My Android Studio is 2.3, the latest version for now
  • Android SDK Platform-Tools 25.0.3
  • Android SDK Tools 25.3.1
  • All Android versions from 2.1 (Eclair) to 7.1.1 (Nougat)

After extensive research, I put all the Android Studio-related environment variables in the file /etc/environment. So now it looks like this:

PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/game:/home/<user>/Android/Sdk:/home/<user>/Android/Sdk/tools:/home/<user>/Android/Sdk/platform-tools"

ANDROID_HOME=/home/<user>/Android/Sdk
export ANDROID_HOME

JAVA_HOME=/usr/lib/jvm/java-8-oracle
export JAVA_HOME

GRADLE_HOME=/opt/android-studio/gradle/gradle-3.2
export GRADLE_HOME

Now, for the sake of testing the environment variables, I run the following commands:

source /etc/environment
echo $PATH
echo $ANDROID_HOME
echo $JAVA_HOME
echo $GRADLE_HOME

And all the path variables are correctly displayed.

So, it looks like the environment variables are like they should be according to the various similar questions and in tutorials i've searched. Does anyone know what am I doing wrong? Why do I still get the Gradle Wrapper error?


Source: (StackOverflow)

Run a controller function whenever a view is opened/shown

I'm building an app with angular+ionic that uses a classic three-button menu at the bottom with three ion-tabs in it. When a user clicks a tab, that template opens through ui-router.

I have states like this:

$stateProvider
  .state('other', {
    url: "/other",
    abstract: true,
    templateUrl: "templates/other/other.html"
})

In the template I do something like:

<ion-nav-view name="other" ng-init="doSomething()"></ion-nav-view>

I'm aware that I can write the doSomething() function in my controller and just call it manually there. That gives me the same problem though. I can't seem to figure out how to call the doSomething() function more than once, whenever somebody opens that view.

Right now, the doSomething() function gets called just fine, but only the first time that view/tab gets opened by the user. I'd like to call a function (to update geolocation) whenever a user opens that view or tab.

What would be a correct way to implement that?

Thanks for helping out !


Source: (StackOverflow)

What is entryComponents in angular ngModule?

I am working on an Ionic app ( 2.0.0-rc0 ) which depends on angular 2 . So the new introduction of ngModules is included. I am adding my app.module.ts. below.

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Users } from '../pages/users/users';

@NgModule({
  declarations: [
    MyApp,
    Users
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Users
  ]
})
export class AppModule {}

What does entryComponents do here? Components are already defined in declarations . So what's the need of repeating them ? What would happen if I dont include a component here?


Source: (StackOverflow)

How to use Ionic Framework for Web App Development?

Is it possible to use ionic frameowork for regular Web Applications rather than wrapping it in Cordova?


Source: (StackOverflow)

ionic build android error when download gradle

I'm very new to the ionic framework :)

>npm install -g cordova
>npm install -g ionic
>ionic start test blank
>cd test
>ionic platform add android

When I use '>ionic build android' start download gradle, but can't download and get an Error

What caused this error and how can I fix it?!

I download gradle and install in pc but Wants to download again. can add gradle to project offline?

C:\Users\LENOVO2014\test>ionic build android
running cordova build android
Running command: "C:\Program Files\nodejs\node.exe" C:\Users\LENOVO2014\myApp\ho
oks\after_prepare\010_add_platform_class.js C:\Users\LENOVO2014\myApp
add to body class: platform-android
Running command: C:\Users\LENOVO2014\myApp\platforms\android\cordova\build.bat
ANDROID_HOME=D:\program\Programing\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_31
Running: C:\Users\LENOVO2014\myApp\platforms\android\gradlew cdvBuildDebug -b C:
\Users\LENOVO2014\myApp\platforms\android\build.gradle -Dorg.gradle.daemon=true
Downloading http://services.gradle.org/distributions/gradle-2.2.1-all.zip
................................................................................
................................................................................
................................................................................
............................................
Exception in thread "main" java.lang.RuntimeException: java.net.SocketException:
 Connection reset
        at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAcc
essManager.java:78)
        at org.gradle.wrapper.Install.createDist(Install.java:47)
        at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:129)
        at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:48)
Caused by: java.net.SocketException: Connection reset
        at java.net.SocketInputStream.read(SocketInputStream.java:189)
        at java.net.SocketInputStream.read(SocketInputStream.java:121)
        at java.io.BufferedInputStream.read1(BufferedInputStream.java:284)
        at java.io.BufferedInputStream.read(BufferedInputStream.java:345)
        at sun.net.www.MeteredStream.read(MeteredStream.java:134)
        at java.io.FilterInputStream.read(FilterInputStream.java:133)
        at sun.net.www.protocol.http.HttpURLConnection$HttpInputStream.read(Http
URLConnection.java:3335)
        at sun.net.www.protocol.http.HttpURLConnection$HttpInputStream.read(Http
URLConnection.java:3328)
        at org.gradle.wrapper.Download.downloadInternal(Download.java:63)
        at org.gradle.wrapper.Download.download(Download.java:45)
        at org.gradle.wrapper.Install$1.call(Install.java:60)
        at org.gradle.wrapper.Install$1.call(Install.java:47)
        at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAcc
essManager.java:65)
        ... 3 more

C:\Users\LENOVO2014\myApp\platforms\android\cordova\node_modules\q\q.js:126
                    throw e;
                          ^
Error code 1 for command: cmd with args: /s /c "C:\Users\LENOVO2014\myApp\platfo
rms\android\gradlew cdvBuildDebug -b C:\Users\LENOVO2014\myApp\platforms\android
\build.gradle -Dorg.gradle.daemon=true"
ERROR building one of the platforms: Error: C:\Users\LENOVO2014\myApp\platforms\
android\cordova\build.bat: Command failed with exit code 1
You may not have the required environment or OS to build this project
Error: C:\Users\LENOVO2014\myApp\platforms\android\cordova\build.bat: Command fa
iled with exit code 1
    at ChildProcess.whenDone (C:\Users\LENOVO2014\AppData\Roaming\npm\node_modul
es\cordova\node_modules\cordova-lib\src\cordova\superspawn.js:131:23)
    at ChildProcess.emit (events.js:110:17)
    at maybeClose (child_process.js:1015:16)
    at Process.ChildProcess._handle.onexit (child_process.js:1087:5)

Source: (StackOverflow)

How to rename Ionic app from HelloCordova

The Ionic framework is pretty great stuff. I was able to successfully build an app with some Angular code I have been working on, but I can't find an answer to the simple question of how to rename the app that gets generated. The output app is always called HelloCordova and there doesn't seem to be any documentation on how to change the name of the app. If I start manually digging through the project directory replacing HelloCordova, I end up with an app that won't run. Surely, people have solved this before.


Source: (StackOverflow)

angular ng-if or ng-show responds slow (2second delay?)

I'm trying to show or hide a loading indicator on a button when a request is busy. I do that with angular by changing the $scope.loading variable when a request is loading or when it's done loading.

 $scope.login = function(){
     $scope.loading = true;
    apiFactory.getToken()
        .success(function(data){

        })
        .error(function(error){

        })
         .finally(function(){
               $timeout(function() {
                 $scope.loading = false;
               }, 0);
         });
 };

In the frontend:

<button ng-disabled="loading" class="button button-outline button-positive" type="submit">
Log in 
<span ng-if="loading" class="ion-refreshing"></span>
</button>

This works fine, but the loading icon (ion-refreshing) is shown for about 2 seconds, while the $scope variable is updated immediately. I tried $scope.$apply but that doesn't seem to be what's wrong here, the scope is updated just fine and immediately after the request. It's just the icon that isn't responding quickly enough.

Thanks for helping me understand this!


Source: (StackOverflow)

Authentication in Ionic/Cordova App

First off, I'm no pro.

In my quest to become a better developer I am trying to understand what is needed and how to accomplish creating a sign-up/login for an Ionic-Framework app.

Most of the single-page-applications (SPAs) handle authentication on a node server that is also serving up the HTML for the client. In my case the phone itself will be serving up the HTML so I am guessing I may be going up against some CORs issues.

I understand that the Ionic-Framework uses states and based angular-client-side-auth repo I should be authenticating whenever I am changing states in my app.

I have an initial app setup but now I am kind of confused where to go from here.

The tools I have at my disposal:

  • Node.JS Server -Thanks DigitalOcean (Should I be using this as a proxy to my DB?)
  • CouchDB server (Full stack here we come)

Questions of mine:

  1. What is the standard approach for authenticating when using hybrid apps?
  2. Should I be using Node.JS as a proxy to the database?
  3. Should I skip node.js and authenticate directly with the CouchDB server? (I've heard of this)
  4. Am I going about this all the wrong way?
  5. What are my potential road-blocks?
  6. How does CORS work with hybrid applications?
  7. Anything I'm missing?

Thanks for helping me become a better developer.


Source: (StackOverflow)

Failed to find 'ANDROID_HOME' environment variable

I am trying to build an ionic-android project and i have android sdk installed.

SDK manager installed packages

The name of my project is myApp.I have successfully added android platform to myApp. But when i tries to build the project

~/myApp$ sudo ionic build android

result is

Running command: /home/hari/myApp/hooks/after_prepare/010_add_platform_class.js /home/hari/myApp
  add to body class: platform-android
  ERROR building one of the platforms: Failed to find 'ANDROID_HOME'  environment variable. Try setting setting it manually.
  Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.
You may not have the required environment or OS to build this project
Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.

see the ANDROID_HOME and PATH variable

echo $ANDROID_HOME
/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/home/hari/Android/Sdk

echo $PATH
/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/home/hari/Android/Sdk/tools:/home/hari/Android/Sdk/platform-tools:/usr/local/bin:/opt/gradle/bin

I have seen almost the same kind of questions on stack overflow, but none works for me. Is there anything wrong with my android-sdk configuration? How can i build this project?


Source: (StackOverflow)

Xcode error when uploading to App Store: "No suitable application records were found"

I'm using Ionic to build an html app for iOS. I've registered an app on iTunes Connect.

All goes well in Xcode until I upload to the App Store. I get the following error:

iTunes Store operation failed.
No suitable application records were found. Verify your bundle identifier 'com.iconicframework.app315125' is correct.

iTunes Store operation failed


Source: (StackOverflow)