Tuesday, November 12, 2014Author: Hector Iribarne @hectoriribarne

Introduction to Mobile Apps with the Ionic Framework & AngularJS

@hectoriribarne

Main Topics

Ionic Basics

AngularJS and Cordova

Ionic Code Time!

@hectoriribarne

Ionic Basics

@hectoriribarne

What Ionic?

@hectoriribarne

Tell me more about Ionic

Ionic is an AngularJS-based framework

Ionic lets you create mobile apps using JavaScript

Ionic provides a CLI to create, build, test and deploy your apps

@hectoriribarne

Ionic - Building Blocks

@hectoriribarne

AngularJS &

Cordova

@hectoriribarne

Detour: Let’s talk about AngularJS

@hectoriribarne

HTML5 tags

<audio>

<video>

<article>

<section> <details>

<progress>

<meter>

@hectoriribarne

HTML5 tags - Wouldn’t it be nice to have you own tags?

<myCustomTag>

<AdamTag>

<BocaJSTag>

<HectorTag>

@hectoriribarne

Angular JS - Directives

A directive is simply a function that we run on the DOM element to give it more functionality

Directives give us the power to create our own HTML elements

Angular uses directives everywhere. ng-tags are Angular provided directives

@hectoriribarne

Angular JS - Scopes

AngularJS uses scopes to communicate between components

Scopes are the glue between our code and what the browser renders

When we assign a variable on a $scope, Angular makes the variable accessible to our view automatically

@hectoriribarne

Angular JS - Dependency Injection

Dependency injection (DI) is a term for how code gets referenced to its dependencies.

DI refers the process of us telling Angular what dependencies we need to use and Angular resolving dependencies when we need them.

The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.

@hectoriribarne

Apache Cordova

Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript.

Before Adobe purchased PhoneGap

PhoneGap

After Adobe purchased PhoneGap

Apache Cordova

Adobe PhoneGap

@hectoriribarne

Ionic Code Time!

@hectoriribarne

Install Ionic

Install npm (Node Packet Manager): https://github.com/npm/npm or http://nodejs.org/

@hectoriribarne

Setup Ionic on Windows

npm install -g ionic

npm install -g cordova

Setup Ionic on Mac/Linux

sudo npm install -g ionic

sudo npm install -g cordova

@hectoriribarne

Run Ionic

@hectoriribarne

Create an App with a blank template

@hectoriribarne

Directory Structure

@hectoriribarne

Directory Structure Details

.bower, bower.json // Ionic scripts dependencies. Loads ionic codes & makes it easier to update Ionic w/o changing your proj).gitignore // Files git should ignoreconfig.xml // Config file for Cordovagulpfile.js // JavaScript build tool similar to Grunthooks/ // Cordova folderionic.project // Settings for ionicpackage.json // Dependencies for node packagesplugins/ // Cordova plugingsscss/ // Sass folderwww/ // root of application (Most important folder)

@hectoriribarne

Launch Ionic: ionic serve

@hectoriribarne

Ionic - Build Apps (from your project directory)

iOS (iPhone emulator example) ionic platform add iosionic build iosionic emulate ios

Android (device example)ionic platform add androidionic build androidadb devicesionic run android --device

@hectoriribarne

Ionic Demo Time!

@hectoriribarne

References

http://www.ng-newsletter.com/posts/how-to-learn-angular.html

http://thejackalofjavascript.com/ionic-angularjs-and-phonegap-build/

@hectoriribarne

AngularJS Links

https://github.com/angular/angular.js/wiki/Understanding-Directives

https://github.com/angular/angular.js/wiki/Understanding-Scopes

https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection

https://github.com/angular/angular.js/wiki/Best-Practices

@hectoriribarne

Ionic LinksBasicshttp://learn.ionicframework.com/http://learn.ionicframework.com/videos/http://learn.ionicframework.com/talks/http://learn.ionicframework.com/formulas/

Codehttp://codepen.io/ionic/public-list/http://stackoverflow.com/questions/tagged/ionic-frameworkhttp://ionicframework.com/docs/api/http://ionicframework.com/tutorials/customizing-ionic-with-sass/

Viewshttp://ionicframework.com/docs/api/directive/ionNavView/ http://ionicframework.com/docs/api/directive/ionView/ http://ionicframework.com/docs/api/directive/ionNavBar/

IRC: http://irc.freenode.net #ionic #angularjs #cordova

Questions?

@hectoriribarne

Last but not least

@hectoriribarne

Follow us on Twitter

https://twitter.com/BrowardDrupal