Stay Tuned!

Subscribe to our newsletter to get our newest articles instantly!

Programming

Dev-Notes: Exploring Ionic Framework and Angular JS

Installation

Download and install node.js – version 4.2.2 LTS
Download and install git-scm.com

Bash commands

Installing cordova ionic: npm install -g cordova ionic

cd ~/Desktop
ionic start practiceMobileApp
cd practiceMobileApp
npm install angular-mocks         (this will add folder called node_modules/angular_mocks in the application)
ionic serve

cd ~/Desktop
ionic start flickerApp http://codepen.io/ionic/pen/CrInw
cd flickerApp
ionic serve

cd ~/Desktop
ionic start blankApp blank
cd blankApp
ionic serve

ionic serve –
l

To start the current app:

cd ~/Desktop/practiceMobileApp
ionic serve -f Chrome

cd ~/Desktop/practiceMobileApp
ionic serve –lab

Challenges

  • Error: Unexpected request: POST

Add additional .when on POST

.run(function($httpBackend){
// $httpBackend.whenGET(/templates\/\w+.*/).passThrough();
$httpBackend.whenGET(/.*/).passThrough();
$httpBackend.whenPOST(/.*/).passThrough();

})
  • Error: Unexpected token u

It seems it’s only happening when viewing on Chrome (ionic serve -f Chrome – see ionic.project)

When test with Edge (“defaultBrowser”: “”), it works no problem

  • Error: Unexpected request: GET http://practiceMobileLaravelApp-dev.localhost:8080/public/routineactivity/08608709-9cc0-11e5-b3a2-00ffc9587cbc
    No more request expected

Turn out it’s something to do with ngMock in

.run(function($httpBackend){
 $httpBackend.whenGET(/templates\/\w+.*/).passThrough();
 // $httpBackend.whenGET(/.*/).passThrough();
})

change to

.run(function($httpBackend){
// $httpBackend.whenGET(/templates\/\w+.*/).passThrough();
$httpBackend.whenGET(/.*/).passThrough();
})
  • Populate Drop Down List selected value from JSON external data

The original approach:

In the html form:

<select name="attempt3" ng-model="routineActivity.attempt3" ng-change="changeValue()">
 <option ng-repeat="v in [0,1]" value="{{v}}" ng-selected="v==routineActivityData.attempt3">{{v}}</option> 
 </select>

The other approach which I believe it’s better way:

<select name="attempt3" ng-model="routineActivity.attempt3" ng-change="changeValue()" ng-options="option.value as 
 option.value for option in options" ng-init="routineActivity.attempt3=routineActivityData.attempt3"> 
 </select>
  • $state.go isn’t refresh the view

Possibly the ionic-view issue, so by adding cach-view=false in <ion-view view-title=”Activities” cache-view=”false”>

Resource: https://forum.ionicframework.com/t/state-go-isnt-refreshing-my-view/19845/3


Resources

Credits

Photo by Jules Amé: https://www.pexels.com/photo/person-using-black-dell-laptop-computer-4078343/

Avatar

Valdy

About Author

Valdy founded Dewacorp.com, a helpdesk and IT Services provider that has taken care of over 39,000 customer service requests in the past 15 years - that's nearly 2,600 per year. He also created the growing Dewalist.com - a classified website that has close to 55,000 page views and 6,000 user visits per month with 52,000 yearly published ads and 39,000 active registered users. He blogs for the ever-growing Dewapost.com, a tech blog that gets around 20,000 impressions per month with 700 clicks and 10 average pages first impressions on Google Search. You can reach him on the Contact Us page, social media links below or Dewachat.com.

You may also like

Programming

SQL: Performance Tuning Query

Queries — Basic setup DBCC DROPCLEANBUFFERSDBCC FREEPROCCACHE SET STATISTICS IO ONSET STATISTICS TIME ON /* SELECT * FROM dbo.Categories*/ Sources
Programming

Notes: Road to Yii Framework

Apache2 Configuration on MAC Snow Leopard: /etc/apache2/httpd.conf “It worksP page is located under: /Library/WebServer/Documents/index.html.en To restart apache2 after changing: sudo apachectl