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>