DZ Developer

After listings the audio books , now we need to playing some sound . since we are dealing with html5 hybride application , no way better way  than using HTML5 Audio  api ! The idea is just creating two functions inside our controller : play() , and pause() But we declare a global variable called audio var audio = new Audio (); NB : the URL  for streaming these audio books is http://www.litteratureaudio.net  + Book. preview(data.json) // play function $scope.play = function(preview){       var url =  "http://www.litteratureaudio.net"  + preview   audio = new Audio(url)   audio.play() } // pause function $scope.pause = function(){ audio.pause() } Now we have our two functions, they still have to detect when the user click on play with angularjs ng-click , we will also pass the parameter preview to listen to the good book ng-click="play({{book.Book.preview}})"

Afrer getting json data with http service, now we'r gone display it ! Before anything, we need to know what's a $scope variable ?  Scope  is an object that refers to the application model . It is an execution context for  expressions . Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch  expressions  and propagate events.( AngularJS Doc) basically each scope is a reference to a model in a controller  , except for the case of rootScope   because it is present in all controllers . NB : to use scope / rootScope we must inject it into the controller  $http.get("data.json")     .then(function(response) {         $scope.books = response.data;         console.log(response.data)     }); We are storing in $scope.books variable to be able to be able to use it in the vi...

Today We 're gonna start to write some code , first is make a main controller to our ionic application , of course by controller i mean angularjs controller . we start by add ng-controller to our body tag , but this is just a reference to controller we need also to create this controller (MainController) .  The idea is just use http call to get the data.json AngularJS comes with built in $ http service  to make (GET,UPDATE,POST,DELETE) in our case we are are doing get call app.controller('MainController',function ($scope,$http) {   // body...   $http.get("data.json")     .then(function(response) {         console.log(response)     }); }) we are just login data in the console. NB : the http call could make some time before it returns the  data in , our case we are working localy, but in real life we have to work with web services and  probably internet connection like mine lo...

To Build this app first we need to get Audio books data, since we don't have a web service for this we just calling data.json file data.json The json array contains all informations about book such as title , category and author , w're gone to make it simple  we need just create ionic application first with command line ionic start books blank This Creating ionic application in  books  folder , blank stands for template we are using empty template. cd  books Changing directory to books folder ionic serve This is starting and listening to http server in 8100 port ,we are gone to keep this command when working on the project we also need to place data.json in root of the project,to use it later NB : Don't forget to install ionic before you begin( nodejs is required ) npm install -g cordova ionic here our ionic application structure  all the html  files are in the www folder

Let's build a mobile application with Ionic Framework @ChihebNabil Composants UI : http://ionicframework.com/docs/components Slide NB : Ensure that NodeJS is correctly installed on your machine Slides Cordova / Ionic / AngularJS ? Native : The inconvenients Is there an alternative? Ionic CLI Overview of UI components (http://ionicframework.com/docs/components) Mini Project Cordova / Ionic / AngularJS ? Apache Cordova (6.x) : open source framework developed by the Apache Foundation. It allows to create applications for different platforms (Android, IOS ...) in HTML, CSS and JavaScript. Ionic (1.3): it is a framework based on AngularJS facilitate the development of hybrid mobile applications AngularJS (1.5.5) : AngularJS is a JavaScript framework Open Source Powered by Google Native : Les inconvénients Mastering each platform is required expensive development entirely separate Source Code Y at-il une alternative? HTML5 Applications Dir...