Preliminary Software design and Development a Welcome to our Coding Day session one

Preliminary Software design and Development Aim ◦ Build a mobile web app ◦ Understand how create a SPA (single page application) using JQuery Mobile ◦ Use HTML5 LocalStorage ◦ Use Angular to implement CRUD ◦ Upload our finished Mobile App to Drop-Box to view Need ◦ JQuery Mobile - APP Template ◦ Coding Day file Drop Box account

Angular was created by Misko Hevery and it's maintained by Google. Its current stable version is Angular is a structural framework that binds your HTML (View) to your MODEL (data) for dynamic web apps. Angular supercharges HTML, with custom elements called directives, to create dynamic views in web-applications. Geared towards SPA (single page apps) and CRUD (create, read, update, delete), think database frontends

Angular was built with the CRUD application in mind. Luckily CRUD applications represent the majority of web applications.

MVVM basically includes 3 things: 1. Model Model is nothing but data. 2. ViewView represents this data. Its our HTML 3. View ModelController mediates between the two. Specific data fro specific view

DirectivesThey apply special behaviour to attributes or elements in the HTML. Eg ControllerThis is where you create your ‘business logic’ behind views ScopeScope is the glue between application ‘controller ‘ and the ‘view’. Two-way data-binding is best described as a full-circle of synchronised data: Update the Model and it updates the View, update the View and it updates the Model.

HOME VIEW EDIT/DELETE REPORTS SPA SINGLE PAGE APPLICATION Index.html PAGES

TO CREATE THE PAGE Line 38: data-role=”page”: This tells jquery mobile to display this div as a PAGE id-“home” : The id define the LINK to this page eg home Lines 38 to 74 define the HOME Page

SIDE NAVIGATION PANEL Line 40 MENU in List view home Add href="#homeNav"

PAGE HEADER Line 53: MAIN CONTENT Line 58: FOOTER Line 71: PAGE CLOSING DIV TAG Line 74:

Have we included all the framework libraries we need? JAVASCRIPT JQUERY JQUERY MOBILE CSS STYLE SHEETS Custom theme – created with Theme roller Slider CSS ANGULAR OTHER JAVASCRIPT LIBRARIES ngStorage (local Storage) Slider (Slider) YOUR OWN CONTROL logic

Add the Angular directive: “ng-app=app” to the HTML tag This ng-app directive auto-bootstraps your AngularJS app. Line 8: How to make your web app work on Mobile devices Add this html tag to your page in between the: tags Line 12: Index.html page

Add directive called ‘reviewController’ This directive defines a “Controller” to be bound with the “view” which is your home page Line 39: Add Image Add this image to the main body of your page. How to make your image work on Mobile devices Line 35: HOME page

Connect the VIEW to our CONTROLLER Line 101: Add Directive ng-controller="reviewController" to the main page div tag TASK: Answer the questions about the Form Fields ADD page Add ADD BUTTON ( directive ng-click)

app.js var app = angular.module('app',['ngStorage','ui-rangeSlider']); app.controller('reviewController', function($scope,$localStorage) { }); This is where we put our logic to define our views This is where we put our logic to define our views

app.js $scope.storage = $localStorage.$default({ myReviews: [{ name: "Blade Runner“, genre: "Science Fiction", review: "Realistic furture sci fi", dor: "23/6/2015", rating: "9" }] SCOPE VIEW CONTROLLER --SET THE DEFAULT DATASOURCE--

app.js --PAGE: ADD REVIEW function-- $scope.addMyReview = function () { var AddReview = { name: $scope.name, } $localStorage.myReviews.push(AddReview); } Save the Form Variables to an Object called AddReview PUSH the AddReview object to Localstorage

MOBILE PAGE: VIEW Connect the VIEW to our CONTROLLER Line 152: Add Directive ng-controller="reviewController" to the main page div tag

MOBILE PAGE: VIEW Search: <ul ng-repeat="r in storage.myReviews | filter:query“ <img src="images/{{r.mediaType}}.jpg" {{r.name}} Media Type: {{r.mediaType}} Review: {{r.review}} Date of review: {{r.dor | date:"dd MMM yyyy " }} Rating: {{r.rating}} / 10

MOBILE PAGE: VIEW EDIT/DELETE Connect the VIEW to our CONTROLLER Line 201: Add Directive ng-controller="reviewController" to the main page div tag

app.js --PAGE: EDIT & DELETE functions - $scope.displayEdit = function (index) { $scope.index = index; $scope.name = $scope.storage.myReviews[index].name; $scope.mediaType = $scope.storage.myReviews[index].mediaType “” “” } $scope.saveEditReview = function (index) { $scope.storage.myReviews[index].name = $scope.name; $scope.storage.myReviews[index].mediaType = $scope.mediaType; “” “” }

app.js --PAGE: EDIT & DELETE functions - $scope.deleteReview = function (index) { $scope.index = index; }; $scope.deleteReviewYes = function (index) { $scope.storage.myReviews.splice(index, 1); }; // end deleteProductYes

MOBILE PAGE: REPORTS Show report {{report}}

data = $scope.storage.myReviews; var movies = 0; var books = 0; for(var i = 0; i < data.length; i++) { if(data[i].mediaType == "Movie"){ movies = movies + 1 } if(data[i].mediaType == "Book"){ books = books + 1 } --PAGE: REPORTS functions -

Create your own Reports 5 top rating books Number of Science Fiction books reviewed All movies and Books reviewed in 2014