crash course in angularjs + ionic (deep dive)
TRANSCRIPT
![Page 1: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/1.jpg)
Crash Course inAngularJS + Ionic
(Deep dive)
Nolan Erck
(with assistance from Scott Steinbeck)
![Page 2: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/2.jpg)
About Me
● Chief Consultant / Owner, South of Shasta Consulting
– Software Development, Training, Design.● Using ColdFusion since 1999 (4.x)
● Other stuff: C++, Java, jQuery, PHP, .NET, HTML5,Android, you get the idea...
● Manager of SacInteractive User Group.
● Reformed Video Game Developer (Grim Fandango,SimPark, StarWars Rogue Squadron, etc).
● Music Junkie.
![Page 3: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/3.jpg)
![Page 4: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/4.jpg)
![Page 5: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/5.jpg)
![Page 6: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/6.jpg)
Today's Agenda
● Intro to MVC● Intro to AngularJS
– Some basic features, concepts and code samples.
● [break time]● Intro to Ionic
– More features, code samples, simulator, etc.
● Other resources.● Questions.
![Page 7: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/7.jpg)
Prerequisites
● Good understanding of “modern” JavaScript.– Scopes, anonymous functions, classes, objects.
● Previous MVC experience is helpful but notreq'd.
● You'll also get exposed to:– Node.js, PhoneGap/Cordova, mobile SDKs
(Android, Xcode, etc).
● And 1 more thing you need to know...
![Page 8: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/8.jpg)
Prerequisites
● Know that...– Object Oriented Programming is hard.
– This “hybrid mobile” stuff is different than what youmay be used to.
– And some of it is confusing at first.
● And that's NORMAL.
![Page 9: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/9.jpg)
We're using Angular 1.x
● AngularJS 1.x is released.● AngularJS 2.x is technically still in beta.
– Moving target
– Really different than 1.x
– Bigger learning curve● Transpiling (boo, hiss)● TypeScript
– Lots of smart people at this conference to ask about2.x features.
![Page 10: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/10.jpg)
How do I get started?
● Easy!● https://angularjs.org/● Click “download”.
– (npm and bower options available too)
● Angular.js is all you need to start.– (Additional JS files for fancier features. We'll get to
that later.)
![Page 11: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/11.jpg)
How do I get started?
● <script src=”angular.js”></script>
● <html ng-app>
● {{variable name / expression}}
● [DEMO – Hello World]
![Page 12: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/12.jpg)
What is MVC?
● Model View Controller● Design Pattern● Splits your app up into 3 logical sections.
– Model – where your data and related logic goes.
– View – the parts of your app you “view” (HTML,CSS).
– Controller – determines what happens next in theapp (some business logic maybe too).
● The “restaurant” analogy.
![Page 13: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/13.jpg)
The “Model”
● Short for “data model” (kind of)● Where your data lives● Can be a local JS variable, localStorage, REST
API, some other ajax request, etc.● The app doesn't care● Restaurant: the kitchen
[DEMO - Model]
![Page 14: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/14.jpg)
The “View”
● The part of the app you “view”.– HTML, CSS, JavaScript
<html>
<body>this part here is the “view”
</body>
</html>● Restaurant: the menu and plates of food
![Page 15: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/15.jpg)
The “Controller”● Controls what happens next.
– Send info to the model.
– Update the View with an error/success message.
– Move the User to a new section of the app.
– Etc.
● Restaurant: the waiter.● AngularJS: $scope● $scope is the waiter
[DEMO - Controller]
![Page 16: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/16.jpg)
MVC – All Together
Model
- data
- localStorage
- bus. Logic
- etc
Controller
- route userfrom point ato point b
- route userback to pointa if Modelsaidsomethingwas missing
View
- HTML
- CSS
- jQuery
- Bootstrap
- etc.
![Page 17: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/17.jpg)
What is AngularJS?
● MVC framework for JavaScript SPAs.● Very few moving parts to get started.
– Include 1 JS file, add “ng-app” to your HTML, done!
● Some nice features.– Dependency Injection
– Routes
– 2-way Data Binding
– Various other things...
![Page 18: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/18.jpg)
Single Page Application (SPA)
● Instead of contact.html, about.html, products.html● You have these guys:
– Sitename.com/#/contact
– Sitename.com/#/products
● The whole site is routed through index.html viasome internal machinery.
● Entire site is downloaded at once, then accessedvia the browser cache.
● Only new data is retrieved from the server.
![Page 19: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/19.jpg)
Looping
● In Controller / Model– Standard JavaScript
for( i = 0; i < 5; i++ ) { … }
– angular.forEach()var values = { name: 'Martin Gore', instrument: 'guitar' };
var log = [];
angular.forEach(values, function(value, key) {
this.push(key + ': ' + value);
} );
![Page 20: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/20.jpg)
Looping
● In View– ng-repeat
● <div data-ng-repeat="i in [1,2,3,4,5]">● <div data-ng-repeat="item in aryGroceries">
[DEMO - Looping]
![Page 21: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/21.jpg)
Filters
● Select a subset of items from an array.● When you don't want to loop over all the
elements in a given array.● Like a built-in if() statement.
– For sorting data on the fly.
● [DEMO - Filters]
![Page 22: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/22.jpg)
Routes
● URLs in an Angular app look like so:– /index.html#/home
● Everything is loaded via index.html● Each #section as it's own “view” that's
dynamically injected as the app is running.
[DEMO - Routes]
![Page 23: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/23.jpg)
Getting data via AJAX
● $http.get() method– Performs HTTP GET to retrieve data in JSON form.
– Could be a local file, REST, anything that returnsJSON.
[DEMO - JSONdata]
![Page 24: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/24.jpg)
Custom Directives
● Basically custom tags written in AngularJS.– <my-custom-widget />
● Works just like regular HTML tags.● Similar to Polymer.● Like extended tags in HTML5, or custom tags in
ColdFusion.● Can be custom “tags”, “classes” or “attributes”.
[Demo - Directives]
![Page 25: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/25.jpg)
Services
● AKA modules, utility libraries, etc● Wired together using Dependency Injection● “$name” for built-in core Angular services
– $http, $resource, etc
● “name” for user-developed services– MusicianService, etc
![Page 26: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/26.jpg)
...and that's AngularJS
● That (in an extreme nutshell) is AngularJS.– (There are LOTS more features we didn't cover.)
● Can be used by itself for SPA web apps.● Not mobile-specific.
● Break time, then on to Ionic...
![Page 27: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/27.jpg)
Ionic
● Hybrid mobile app platform● iOS and Android in 1 codebase● JavaScript, HTML, CSS● No Swift, Objective-C, Java (Android)
![Page 28: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/28.jpg)
Ionic
● Uses PhoneGap (aka Cordova)– HTML, CSS, JavaScript gets compiled
– Combined with a WebView control
– Code → WebView (chrome-less browser)
– Packaged into an app ● iPhone binary, Android APK file.
– The device is “running an app, that happens to be aweb browser”.
![Page 29: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/29.jpg)
Ionic
● Is (essentially) mobile-specific.● Sits on top of PhoneGap and Angular.● Built on Angular's “Directives” and “Services”.● Also uses PhoneGap's “magic”.● Gives a Bootstrap-esque set of functionality for
hybrid mobile apps.
![Page 30: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/30.jpg)
Ionic
● Performance “obsessed”.– Minimal DOM manipulation
– Removed 300ms tap delay
– Etc
● Lots of other neat features.● We'll barely scratch the surface today.
![Page 31: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/31.jpg)
Ionic – Getting Started
● Need Node.js, Ionic packages, Cordovapackages.
● If building apps locally, need Android andiPhone SDKs (or use PhoneGapBuild).
● Initial installation can be a bit of a pain.– Especially if you don't run bleeding edge OS, dev
tools, etc.
![Page 32: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/32.jpg)
Ionic – Getting Started
● To start:– ionic start my-app [blank]
– Generates all files needed to start an app.
– “blank” is the template name. Several to pick from,we're starting with a bare-bones app.
[DEMO 1]
– ionic start my-app tabs
– [DEMO 2]
– ionic start my-app sidemenu
– [DEMO 3]
![Page 33: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/33.jpg)
Project Structure
Bower, Gulp, etc – build things (optional)
/www – main code folder
/scss– Optional SASS things
/plugins– Cordova / PhoneGap
Plugins
![Page 34: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/34.jpg)
Let's Make An App!
● Warning:– Live coding about to happen!
– Dependency on the wifi about to happen!
– Please stop streaming cat videos on YouTube forthe next few minutes.
– Thanks. :)
[DEMO ionic start DevObjective2016 tabs]
![Page 35: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/35.jpg)
Project Structure – www folder
/css
– empty by default
/img
– Auto-resized by ionic build
/js
– My code for the app
/lib
– JS libraries, angular, ionic
– Ionic CSS, SVG fonts, etc
/templates
– My views for the app
![Page 36: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/36.jpg)
Project Structure
● <ion-*> tags● Technically Angular directives and services
under the hood.● The stuff that looks like Angular is Angular.● The <ion-*> tags are the Ionic part.● All the AngularJS you already know works the
exact same way!
[DEMO 4]
[DEMO 5]
![Page 37: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/37.jpg)
Project Structure● Lots of CSS classes
● Very Bootstrap-esque
– Add class or classes to HTML tags for most of the basefunctionality.
![Page 38: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/38.jpg)
Code Samples● Header and Subheader
<div class="bar bar-header">
<h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
<h2 class="title">Sub Header</h2>
</div>
![Page 39: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/39.jpg)
Code Samples● Buttons
<button class="button"> Default </button>
<button class="button button-light"> Cancel </button>
<button class="button button-positive"> Save </button>
![Page 40: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/40.jpg)
Code Samples
● Lists<div class="list">
<div class="item item-divider"> Guitar Players </div>
<a class="item" href="#"> Steve Vai </a>
<a class="item" href="#"> Eric Johnson </a>
<a class="item" href="#"> Stanley Jordan </a>
</div>
![Page 41: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/41.jpg)
Code Samples
● Cards <ion-content>
<div class="card">
<div class="item item-text-wrap">
Card content goes here.
</div>
</div>
</ion-content>
[DEMO - cards]
![Page 42: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/42.jpg)
Code Samples – Form Controls
![Page 43: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/43.jpg)
Code Samples – Form Controls
![Page 44: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/44.jpg)
Form Controls - Checkboxes
<ion-list>
<ion-checkbox ng-model="power.flux">Flux Capacitor
</ion-checkbox> <ion-checkbox ng-model="power.gigawatt">
1.21 Gigawatts</ion-checkbox>
<ion-checkbox ng-model="power.delorean">
Delorean</ion-checkbox></ion-list>
![Page 45: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/45.jpg)
Range Control
![Page 46: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/46.jpg)
Grid LayoutBased on FlexBox
Add a column and Ionic will figure out the“layout math” for you.
![Page 47: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/47.jpg)
And lots more!
● Utility classes– Colors, icons, padding
– Platform-specific classes● Style iPhone differently than Android, etc
● User created add-ons● Plugins
![Page 48: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/48.jpg)
Testing Your App
● ionic serve– Runs in the browser
● ionic serve -- lab– Examples of iOS and Android layouts
● Code is sync'd– No reloading the browser needed
● ionic emulate iOS– Starts up the iOS simulator
![Page 49: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/49.jpg)
Testing Your App
● Ionic View– http://view.ionic.io/
– Easy private Beta testing
– No iPhone Developer License needed
– No “registering devices with Apple” needed
– Install Ionic View app, add the serial #, done.
[DEMO – Ionic View upload, install]
![Page 50: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/50.jpg)
Publishing Your App
● Same as any other mobile app– Google Play Store (Android)
● Make your APK and submit it
– Apple App Store● Jump thru all of Apple's hoops● Subject yourself to their pain
● Build.phonegap.com– Helps with build process
– Still have to deal with Apple's submission process.No way around that.
![Page 51: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/51.jpg)
What's the catch?
● Same as any PhoneGap/Cordova project.● Need to install the SDKs for each platform.
– Takes time, hassles, etc.
– Android isn't super intuitive
– iOS requires Xcode, latest OSX, etc.
![Page 52: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/52.jpg)
Other Resources
● AngularJS.org
● Book “Pro AngularJS”
● Book “PhoneGap Mobile Application DevelopmentCookbook” – Matt Gifford
● IonicFramework.com
● Ionic Creator IDE
● Ionic View – easy “private QA” app
● Ray Camden's Ionic preso from CF.Objective last year.
![Page 53: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/53.jpg)
Questions? Comments?
● Ways to reach me:
– Southofshasta.com
– Twitter @southofshasta
Free music trivia instead of swag giveaways.
You're welcome.
(Thanks again to Scott Steinbeck for assistance!)
Thanks!
![Page 54: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/54.jpg)
Crash Course inAngularJS + Ionic
(Deep dive)
Nolan Erck
(with assistance from Scott Steinbeck)
![Page 55: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/55.jpg)
About Me
● Chief Consultant / Owner, South of Shasta Consulting
– Software Development, Training, Design.● Using ColdFusion since 1999 (4.x)
● Other stuff: C++, Java, jQuery, PHP, .NET, HTML5,Android, you get the idea...
● Manager of SacInteractive User Group.
● Reformed Video Game Developer (Grim Fandango,SimPark, StarWars Rogue Squadron, etc).
● Music Junkie.
![Page 56: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/56.jpg)
![Page 57: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/57.jpg)
![Page 58: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/58.jpg)
![Page 59: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/59.jpg)
Today's Agenda
● Intro to MVC● Intro to AngularJS
– Some basic features, concepts and code samples.
● [break time]● Intro to Ionic
– More features, code samples, simulator, etc.
● Other resources.● Questions.
![Page 60: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/60.jpg)
Prerequisites
● Good understanding of “modern” JavaScript.– Scopes, anonymous functions, classes, objects.
● Previous MVC experience is helpful but notreq'd.
● You'll also get exposed to:– Node.js, PhoneGap/Cordova, mobile SDKs
(Android, Xcode, etc).
● And 1 more thing you need to know...
![Page 61: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/61.jpg)
Prerequisites
● Know that...– Object Oriented Programming is hard.– This “hybrid mobile” stuff is different than what you
may be used to.– And some of it is confusing at first.
● And that's NORMAL.
![Page 62: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/62.jpg)
We're using Angular 1.x
● AngularJS 1.x is released.● AngularJS 2.x is technically still in beta.
– Moving target– Really different than 1.x
– Bigger learning curve● Transpiling (boo, hiss)● TypeScript
– Lots of smart people at this conference to ask about2.x features.
![Page 63: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/63.jpg)
How do I get started?
● Easy!● https://angularjs.org/● Click “download”.
– (npm and bower options available too)
● Angular.js is all you need to start.– (Additional JS files for fancier features. We'll get to
that later.)
![Page 64: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/64.jpg)
How do I get started?
● <script src=”angular.js”></script>
● <html ng-app>
● {{variable name / expression}}
● [DEMO – Hello World]
![Page 65: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/65.jpg)
What is MVC?
● Model View Controller● Design Pattern● Splits your app up into 3 logical sections.
– Model – where your data and related logic goes.
– View – the parts of your app you “view” (HTML,CSS).
– Controller – determines what happens next in theapp (some business logic maybe too).
● The “restaurant” analogy.
![Page 66: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/66.jpg)
The “Model”
● Short for “data model” (kind of)● Where your data lives● Can be a local JS variable, localStorage, REST
API, some other ajax request, etc.● The app doesn't care● Restaurant: the kitchen
[DEMO - Model]
![Page 67: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/67.jpg)
The “View”
● The part of the app you “view”.– HTML, CSS, JavaScript
<html>
<body>this part here is the “view”
</body>
</html>● Restaurant: the menu and plates of food
![Page 68: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/68.jpg)
The “Controller”● Controls what happens next.
– Send info to the model.
– Update the View with an error/success message.– Move the User to a new section of the app.– Etc.
● Restaurant: the waiter.● AngularJS: $scope● $scope is the waiter
[DEMO - Controller]
![Page 69: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/69.jpg)
MVC – All Together
Model
- data
- localStorage
- bus. Logic
- etc
Controller
- route userfrom point ato point b
- route userback to pointa if Modelsaidsomethingwas missing
View
- HTML
- CSS
- jQuery
- Bootstrap
- etc.
![Page 70: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/70.jpg)
What is AngularJS?
● MVC framework for JavaScript SPAs.● Very few moving parts to get started.
– Include 1 JS file, add “ng-app” to your HTML, done!
● Some nice features.– Dependency Injection
– Routes– 2-way Data Binding– Various other things...
![Page 71: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/71.jpg)
Single Page Application (SPA)
● Instead of contact.html, about.html, products.html● You have these guys:
– Sitename.com/#/contact– Sitename.com/#/products
● The whole site is routed through index.html viasome internal machinery.
● Entire site is downloaded at once, then accessedvia the browser cache.
● Only new data is retrieved from the server.
![Page 72: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/72.jpg)
Looping
● In Controller / Model– Standard JavaScript
for( i = 0; i < 5; i++ ) { … }
– angular.forEach()var values = { name: 'Martin Gore', instrument: 'guitar' };
var log = [];
angular.forEach(values, function(value, key) {
this.push(key + ': ' + value);
} );
![Page 73: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/73.jpg)
Looping
● In View– ng-repeat
● <div data-ng-repeat="i in [1,2,3,4,5]">● <div data-ng-repeat="item in aryGroceries">
[DEMO - Looping]
![Page 74: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/74.jpg)
Filters
● Select a subset of items from an array.● When you don't want to loop over all the
elements in a given array.● Like a built-in if() statement.
– For sorting data on the fly.
● [DEMO - Filters]
![Page 75: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/75.jpg)
Routes
● URLs in an Angular app look like so:– /index.html#/home
● Everything is loaded via index.html● Each #section as it's own “view” that's
dynamically injected as the app is running.
[DEMO - Routes]
![Page 76: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/76.jpg)
Getting data via AJAX
● $http.get() method– Performs HTTP GET to retrieve data in JSON form.– Could be a local file, REST, anything that returns
JSON.
[DEMO - JSONdata]
![Page 77: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/77.jpg)
Custom Directives
● Basically custom tags written in AngularJS.– <my-custom-widget />
● Works just like regular HTML tags.● Similar to Polymer.● Like extended tags in HTML5, or custom tags in
ColdFusion.● Can be custom “tags”, “classes” or “attributes”.
[Demo - Directives]
![Page 78: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/78.jpg)
Services
● AKA modules, utility libraries, etc● Wired together using Dependency Injection● “$name” for built-in core Angular services
– $http, $resource, etc
● “name” for user-developed services– MusicianService, etc
![Page 79: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/79.jpg)
...and that's AngularJS
● That (in an extreme nutshell) is AngularJS.– (There are LOTS more features we didn't cover.)
● Can be used by itself for SPA web apps.● Not mobile-specific.
● Break time, then on to Ionic...
![Page 80: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/80.jpg)
Ionic
● Hybrid mobile app platform● iOS and Android in 1 codebase● JavaScript, HTML, CSS● No Swift, Objective-C, Java (Android)
![Page 81: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/81.jpg)
Ionic
● Uses PhoneGap (aka Cordova)– HTML, CSS, JavaScript gets compiled– Combined with a WebView control
– Code → WebView (chrome-less browser)– Packaged into an app
● iPhone binary, Android APK file.
– The device is “running an app, that happens to be aweb browser”.
![Page 82: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/82.jpg)
Ionic
● Is (essentially) mobile-specific.● Sits on top of PhoneGap and Angular.● Built on Angular's “Directives” and “Services”.● Also uses PhoneGap's “magic”.● Gives a Bootstrap-esque set of functionality for
hybrid mobile apps.
![Page 83: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/83.jpg)
Ionic
● Performance “obsessed”.– Minimal DOM manipulation– Removed 300ms tap delay
– Etc
● Lots of other neat features.● We'll barely scratch the surface today.
![Page 84: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/84.jpg)
Ionic – Getting Started
● Need Node.js, Ionic packages, Cordovapackages.
● If building apps locally, need Android andiPhone SDKs (or use PhoneGapBuild).
● Initial installation can be a bit of a pain.– Especially if you don't run bleeding edge OS, dev
tools, etc.
![Page 85: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/85.jpg)
Ionic – Getting Started
● To start:– ionic start my-app [blank]– Generates all files needed to start an app.
– “blank” is the template name. Several to pick from,we're starting with a bare-bones app.
[DEMO 1]
– ionic start my-app tabs– [DEMO 2]– ionic start my-app sidemenu
– [DEMO 3]
![Page 86: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/86.jpg)
Project Structure
Bower, Gulp, etc – build things (optional)
/www – main code folder
/scss– Optional SASS things
/plugins– Cordova / PhoneGap
Plugins
![Page 87: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/87.jpg)
Let's Make An App!
● Warning:– Live coding about to happen!– Dependency on the wifi about to happen!
– Please stop streaming cat videos on YouTube forthe next few minutes.
– Thanks. :)
[DEMO ionic start DevObjective2016 tabs]
![Page 88: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/88.jpg)
Project Structure – www folder
/css
– empty by default
/img
– Auto-resized by ionic build
/js
– My code for the app
/lib
– JS libraries, angular, ionic
– Ionic CSS, SVG fonts, etc
/templates
– My views for the app
![Page 89: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/89.jpg)
Project Structure
● <ion-*> tags● Technically Angular directives and services
under the hood.● The stuff that looks like Angular is Angular.● The <ion-*> tags are the Ionic part.● All the AngularJS you already know works the
exact same way!
[DEMO 4]
[DEMO 5]
![Page 90: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/90.jpg)
Project Structure● Lots of CSS classes
● Very Bootstrap-esque
– Add class or classes to HTML tags for most of the basefunctionality.
![Page 91: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/91.jpg)
Code Samples● Header and Subheader
<div class="bar bar-header">
<h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
<h2 class="title">Sub Header</h2>
</div>
![Page 92: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/92.jpg)
Code Samples● Buttons
<button class="button"> Default </button>
<button class="button button-light"> Cancel </button>
<button class="button button-positive"> Save </button>
![Page 93: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/93.jpg)
Code Samples
● Lists<div class="list">
<div class="item item-divider"> Guitar Players </div>
<a class="item" href="#"> Steve Vai </a>
<a class="item" href="#"> Eric Johnson </a>
<a class="item" href="#"> Stanley Jordan </a>
</div>
![Page 94: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/94.jpg)
Code Samples
● Cards <ion-content>
<div class="card">
<div class="item item-text-wrap">
Card content goes here.
</div>
</div>
</ion-content>
[DEMO - cards]
![Page 95: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/95.jpg)
Code Samples – Form Controls
![Page 96: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/96.jpg)
Code Samples – Form Controls
![Page 97: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/97.jpg)
Form Controls - Checkboxes
<ion-list>
<ion-checkbox ng-model="power.flux">Flux Capacitor
</ion-checkbox> <ion-checkbox ng-model="power.gigawatt">
1.21 Gigawatts</ion-checkbox>
<ion-checkbox ng-model="power.delorean">
Delorean</ion-checkbox></ion-list>
![Page 98: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/98.jpg)
Range Control
![Page 99: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/99.jpg)
Grid LayoutBased on FlexBox
Add a column and Ionic will figure out the“layout math” for you.
![Page 100: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/100.jpg)
And lots more!
● Utility classes– Colors, icons, padding– Platform-specific classes
● Style iPhone differently than Android, etc
● User created add-ons● Plugins
![Page 101: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/101.jpg)
Testing Your App
● ionic serve– Runs in the browser
● ionic serve -- lab– Examples of iOS and Android layouts
● Code is sync'd– No reloading the browser needed
● ionic emulate iOS– Starts up the iOS simulator
![Page 102: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/102.jpg)
Testing Your App
● Ionic View– http://view.ionic.io/– Easy private Beta testing
– No iPhone Developer License needed– No “registering devices with Apple” needed– Install Ionic View app, add the serial #, done.
[DEMO – Ionic View upload, install]
![Page 103: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/103.jpg)
Publishing Your App
● Same as any other mobile app– Google Play Store (Android)
● Make your APK and submit it
– Apple App Store● Jump thru all of Apple's hoops● Subject yourself to their pain
● Build.phonegap.com– Helps with build process
– Still have to deal with Apple's submission process.No way around that.
![Page 104: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/104.jpg)
What's the catch?
● Same as any PhoneGap/Cordova project.● Need to install the SDKs for each platform.
– Takes time, hassles, etc.– Android isn't super intuitive
– iOS requires Xcode, latest OSX, etc.
![Page 105: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/105.jpg)
Other Resources
● AngularJS.org
● Book “Pro AngularJS”
● Book “PhoneGap Mobile Application DevelopmentCookbook” – Matt Gifford
● IonicFramework.com
● Ionic Creator IDE
● Ionic View – easy “private QA” app
● Ray Camden's Ionic preso from CF.Objective last year.
![Page 106: Crash Course in AngularJS + Ionic (Deep dive)](https://reader034.vdocuments.site/reader034/viewer/2022052418/58f27c1b1a28ab70068b457f/html5/thumbnails/106.jpg)
Questions? Comments?
● Ways to reach me:
– Southofshasta.com
– Twitter @southofshasta
Free music trivia instead of swag giveaways.
You're welcome.
(Thanks again to Scott Steinbeck for assistance!)
Thanks!