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
- Ionic framework CLI – https://github.com/driftyco/ionic-cli
- Ionic framework example – http://ionicframework.com/examples
- Ionic framework public list – http://codepen.io/ionic/public-list
- Ionic framwework premium icon font – http://ionicons.com
- JSON editor online – http://jsoneditoronline.org
- Bower – http://bower.io
- Ionic framework tutorial – https://www.youtube.com/watch?v=LBSuQdkQbXA&sns=em
>> 2.18 – Full Application – multiple view and routing - Ionic framework User Authentication Tutorial – https://www.youtube.com/watch?v=PE81fyfEJUA
- Angular JS – creating a CRUD App in minutes with Angular’s $resource – http://www.sitepoint.com/creating-crud-app-minutes-angulars-resource/
- User Authentication Tutorial (video) – http://devdactic.com/user-auth-angularjs-ionic/
Credits
Photo by Jules Amé: https://www.pexels.com/photo/person-using-black-dell-laptop-computer-4078343/