Ionic

Origin is not allowed by Access-Control-Allow-Origin Error in Ionic

If you got this issue in Ionic:

Origin http://localhost:8100 is not allowed by Access-Control-Allow-Origin.

It is because you are running node.js and ionic serve project on localhost and trying to access two different ports which causes a cross origin access error.

To fix this simply edit your ionic.project file to map out the linking like this:

{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
      "path": "/signUp",
      "proxyUrl": "http://localhost:3000/signUp"
    },
     {
      "path": "/checkSession",
      "proxyUrl": "http://localhost:3000/checkSession"
    },
     {
      "path": "/login",
      "proxyUrl": "http://localhost:3000/login"
    },
     {
      "path": "/logout",
      "proxyUrl": "http://localhost:3000/logout"
    }
  ]
}

Now in your Ionic project you can call localhost:8100/login for example and it will call localhost:3000/login which the port node.js server is running on.

Web App Only Solution

If you are only making a web app for the browser and not running as a native app, then you can just move the angular portion of the code into the server part.

Copy the /www folder from your frontend into the server /public folder. You can then access your UI from http://localhost:3000.

I hope this makes sense to you.

Style Ion-Radio checkbox in Ionic with CSS

Recently I had the trouble of changing the default radio checkbox in ionic. Here is the CSS of how to do this:

.list .item-radio .item-content {
  background-color: black;
  color: white;
}
.list .item-radio .radio-icon {
  background-color: black;
  color: white;
}
.item-radio input:checked + .radio-content .item-content {
    /* style the item content when its checked */
    background: black; 
}

How To Vertically Align Div Element

There are many ways to do this (allegedly), but here’s how I’ve vertically aligned an element inside a div:

In CSS:

.center { 
    height: 200px;
    position: relative;
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

In HTML:

<div class="center">
  <p>This should be centered</p>
</div>

How to use ng-disabled with multiple expression

You may have ran into this issue when trying to bind a submit button with multiple disable conditions. The easiest way to do this is to embed the variable checking in the html as follows:

Both variable must be false for the button to be disabled:

<button class="button" ng-disabled="(!data.var1 && !data.var2) ? false : true">
</button>

Either variable can be false for the button to be disabled:

<button class="button" ng-disabled="(!data.var1 || !data.var2) ? false : true">
</button>

How to Localize Your Ionic Project

How to localize, translate and support multiple languages in your Ionic / AngularJS project:

1. Install Angular Translate: 

npm install angular-translate
npm install angular-translate-loader-static-files

2. In your index.html make sure you include the js files: 

<!-- translations -->
<script src="js/angular-translate.js"></script>
<script src="js/angular-translate-static-files.js"></script>

If you cannot find these js files in your project folder then you can find them on the project github pages.

3. In your app.js add the translation loading 

angular.module('starter', ['ionic', 'starter.controllers', 'pascalprecht.translate'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
      return StatusBar.hide();
    }
  });
})

.config(['$translateProvider', function ($translateProvider) {
  $translateProvider.useSanitizeValueStrategy('sanitize');

  $translateProvider.useStaticFilesLoader({
      prefix: 'locale/locale-',
      suffix: '.json'
  });

  $translateProvider.preferredLanguage('en');
}])

4. Create a locale json file

Create a file named locale-en.json and a locale folder
the file should be in your www/locale/locale-en.json
Do not include any //comments in the JSON file

{
  "HelloWorld": "Hello World!",
  "Name": "My Name"
}

5. Add localization in your html file 

<label>{{ 'HelloWorld' | translate }}</label>

6. Translating within your javascript

Make sure you import $translate within your controller before using it.

 $translate('HelloWorld').then( function (translation){
    console.log(translation);
  });

Or if you need to translate multiple terms:

 $translate(['HelloWorld', 'Goodbye']).then( function (translations){
    console.log(translations.HelloWorld);
    console.log(translations.Goodbye);
  });

For more information visit https://angular-translate.github.io/docs/#/guide.

How To Open Chrome Device Debugger?

Last night I was trying to open the chrome debugger for an ionic app running on my ios device but could not remember the URL. This was a very simple thing but was nearly impossible to discover on the internet for some reason…

To do this: Open Chrome Browser and type chrome://inspect/ in the url field.

I don’t know why Chrome and Google make this so hard to discover.