Framework7 and IONIC video #2 T-shirt order

Framework7

Framework7 Github

IONIC video #2 T-shirt order on Laulima ITS381/resource/video
Passing data from one page to another page. Ionic use radial button list, spacer, order button will keep space between items.
Page1: Order Enter
Angularjs template tags with object model:  {{object.property of the object}} How controller knows {{data.size}} {{data.color}} {{data.note}} etc,

+ add options -> Angular directives
fill “ng-model”  -> fill “data.size”  -> go to CODE section at right bottom.

function($scope, stateParams) { //This is basically page controller
//$scope where all the data resides.
$scope.sizes [{“id”:”xsmall”, “label”:”X-Small”}{“id”:”small”, “label”:”Small”}{“id”:”midium”, “label”:”Medium”}{“id”:”large”, “label”:”Large”}] // here creating drop-down menu selection.
}

+add option
fill “ng-options” -> fill “size.id as size.labels for size in sizes” -> go to CODE section at right bottom.

+ add options -> Angular directives
fill “ng-model”  -> fill “data.graphic”
fill “ng-value”  -> fill “Blue”  -> go to CODE section at right bottom.
Do all for the radial button.

Size {{data.size}} Type {{data.graphic}} Note {{data.note}} Rush shipping {{data.rushshipping}}
Rush shipping toggle true/false

In CODE section, define/assign all default values
$scope.data = {‘size’: $scope.sizes[0].id, ‘graphic’:’blue’, ‘note’:”}

Page2: Order confirm
Create a new page “order confirm” and drag paragraph icon, orderdata
The key is function($scope, $stateParam){$scope.orderdata=’size’: ‘$stateParams.size’, ‘graphic’:$stateParam.graphic, ‘note’:$stateParam.note,’rushshippng’:$stateParam.rushshipping} which assign $stateParam to the array of varialbes in page2 which is orderdata.

{{orderdata.size}} can display the value.(object.property)

Mobile App: New Trend in Design 2018

mobile app design trends 2018

  • from static to dynamic
  • full screen experience – frameless
  • gestures – swipe, scrolling, and new gestures for UI
  • design approach – minimalism, material design, cards,
  • change in navigation – hidden nav, no hamburger nemu,
  • scrolling – modular scrolling for content heavy applications
  • user-appropriate design – failure mapping
  • fresh and bright design