Angular js and phonegap unite
54
AngularJS and PhoneGap Unite!
description
Presented live on Nov 7-8, 2013 at FITC's Web Unleashed event in Boston. with Lukas Ruebbelke Native mobile development can be painful! So unless you are a masochist, there is a better way to develop mobile applications. This entire presentation will be dedicated to building a pain-free application using AngularJS and the awesome new features of PhoneGap 3.0. In less than an hour? Yep! Is it going to hurt? Nope!
Transcript of Angular js and phonegap unite
AngularJS andPhoneGap Unite!
Who am I?
Lukas RuebbelkeBlogs at http://onehungrymind.com/
Tweets at @simpulton
Contributed to AngularJS
Co-Author of AngularJS in Action
What is the goal?
Mobiledevelopment feels
like this.
It should feel likethis.
Get feedbackfaster
Being honest
I AM LAZY!
We all want to spend more time
BEING AWESOME!
Do you have anapplication?
Is it responsive?
You are here...
And here we are!
Part Zero:Foundation
History of AngularJSDeveloped in 2009 by Misko Hevery.
Publicly released as version 0.9.0 in October 2010
Currently at version 1.0.8 stable or 1.2.0rc3 unstable
The AngularJS Elevator PitchAn intuitive framework that makes it easy to organize your code.
Testable code makes it easier to sleep at night.
Two-way data binding saves you hundreds of lines of code.
Templates that are HTML means you already know how to write them.
Data structures that are just JavaScript make integration really easy.
99 Problems but scope ain’t one of them!
Hello AngularJS From Scratch// script.jsangular.module('MyApp', []) .controller('MainCtrl', function($scope) { $scope.world = 'Phoenix!; });
// index.html<html ng-app="MyApp">
<body ng-controller="MainCtrl"> <h1>Hello {{world}}</h1></body>
The Big AngularJS Picture
Model View WhateverChoose “whatever” pattern helps you be more productive
Controller and $scope$scope is the glue between the Controller and the View
The Controller is responsible for constructing the model on $scope andproviding commands for the View to act upon
$scope provides context
View and TemplatesThe View is AngularJS compiled DOM
The View is the product of $compile merging the HTML template with $scope
DOM is no longer the single source of truth.
Models and ServicesServices carry out common tasks specific to the web application
Services are consumed via Dependency Injection
Services are application singletons
Services are instantiated lazily
The 80/20 Rule
Part One:AngularJS
Stop! Demo Time!
Part Two: Firebase
Stop! Demo Time!
Part Three:PhoneGap
PhoneGap 3.0Whoa!
$ sudo npm install -g phonegap
$ phonegap create hello com.example.hello HelloWorld
$ cd hello
$ phonegap run ios
Step OneInstall the SDKs for the platforms
you are targeting
Step TwoInstall the CLI$ sudo npm install -g phonegap
Step ThreeCreate your project
$ phonegap create leaderboard com.example.leaderboard Leaderboard
$ cd leaderboard
Step FourRun your project
$ phonegap run ios
$ phonegap run android
Stop! Demo Time!
Resources
AngularJShttp://angularjs.org/
Year of Moo http://www.yearofmoo.com/
One Hungry Mind http://onehungrymind.com/
Egghead.io http://egghead.io/
Firebasehttps://www.firebase.com/
http://angularfire.com/
PhoneGaphttp://phonegap.com/
Andrew Trice http://www.tricedesigns.com/
Christophe Coenraets http://coenraets.org/blog/
Holly Schinsky http://devgirl.org/
Thanks!
