Intro to mobile apps with the ionic framework & angular js

Tuesday, November 12, 2014
Author: Hector Iribarne @hectoriribarne
Introduction to Mobile Apps with the
Ionic Framework & AngularJS

@hectoriribarne
Main Topics
Ionic Basics
AngularJS and Cordova
Ionic Code Time!

@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
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 ignore
config.xml // Config file for Cordova
gulpfile.js // JavaScript build tool similar to Grunt
hooks/ // Cordova folder
ionic.project // Settings for ionic
package.json // Dependencies for node packages
plugins/ // Cordova plugings
scss/ // Sass folder
www/ // 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 ios
ionic build ios
ionic emulate ios
Android (device example)
ionic platform add android
ionic build android
adb devices
ionic 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 Links
Basics
http://learn.ionicframework.com/
http://learn.ionicframework.com/videos/
http://learn.ionicframework.com/talks/
http://learn.ionicframework.com/formulas/
Code
http://codepen.io/ionic/public-list/
http://stackoverflow.com/questions/tagged/ionic-framework
http://ionicframework.com/docs/api/
http://ionicframework.com/tutorials/customizing-ionic-with-sass/
Views
http://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

Intro to mobile apps with the ionic framework & angular js

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to Intro to mobile apps with the ionic framework & angular js (20)

More from Hector Iribarne (12)

Recently uploaded (20)

Intro to mobile apps with the ionic framework & angular js