ITB2015 - Crash Course in Ionic + AngularJS

Crash Course in AngularJS + Ionic

About Me ● Consultant (southofshasta.com) – 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.

Today's Agenda ● Intro to MVC ● Intro to AngularJS – Some basic features, concepts and code samples. ● Intro to Ionic – More features, code samples, etc. ● Look at some sample apps running in simulator. ● Other resources. ● Questions. ● Lunch!

Prerequisites ● Good understanding of “modern” JavaScript. – Scopes, anonymous functions, classes, objects. ● Previous MVC experience is helpful but not req'd. ● You'll also get exposed to: – Node.js, PhoneGap/Cordova, mobile SDKs (Android, Xcode, etc). ● And 1 more thing you need to know...

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.

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 via some internal machinery. ● The whole site is downloaded at once, then accessed via the browser cache. ● Only new data is retrieved from the server.

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...

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.)

How do I get started? ● <script src=”angular.js”></script> ● <html ng-app> ● {{variable name / expression}} ● [DEMO 1]

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 the app (some business logic maybe too). ● The “restaurant” analogy.

What is MVC? Model - data - localStorage - bus. Logic - etc Controller - route user from point a to point b - route user back to point a if Model said something was missing View - HTML - CSS - jQuery - Bootstrap - etc.

The “Model” ● Where your data lives. ● Can be a local JS variable. ● Can come from localStorage. ● REST API. ● Some other json/ajax request. ● The app doesn't care. ● Restaurant: the kitchen. [DEMO 2]

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

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. [DEMO 3]

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 4]

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 5]

Custom Directives ● Basically custom tags written in AngularJS. – <my-custom-widget /> ● Works just like regular HTML tags. ● Similar to Polymer.

AngularJS ● That (in an extreme nutshell) is AngularJS. ● Can be used by itself for SPA web apps. ● Not mobile-specific. ● Now, on to Ionic...

Ionic ● Is (essentially) mobile-specific. ● Sits on top of PhoneGap and Angular. ● Built on Angular's “Directives” and “Services”. ● Also uses PhoneGap's “magic”. ● To give a Bootstrap-esque set of functionality for hybrid mobile apps.

Ionic ● Performance “obsessed”. – Minimal DOM manipulation – Removed 300ms tap delay – Etc ● Lots of other neat features. ● We'll barely scratch the surface today.

Ionic – Getting Started ● Need Node.js, Ionic packages, Cordova packages. ● If building apps locally, need Android and iPhone 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.

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]

<ion-*> tags ● <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]

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.

Other Resources ● AngularJS.org ● Book “Pro AngularJS” ● Book “PhoneGap Mobile Application Development Cookbook” – Matt Gifford ● IonicFramework.com ● Ionic Creator IDE ● Ionic View – easy “private QA” app ● “Powering AngularJS With RESTful services” – today at 5:30! ● Dev-Objective “A RESTful day at the SPA with Taffy and AngularJS”, Matt Graf, CFObjective 2015. ● Ray Camden's Ionic preso from CF.O last year (title?)

Questions? Comments? ● Ways to reach me: – Southofshasta.com – nolan@southofshasta.com – Twitter @southofshasta Thanks!

ITB2015 - Crash Course in Ionic + AngularJS

More Related Content

What's hot

Viewers also liked

Similar to ITB2015 - Crash Course in Ionic + AngularJS

More from Ortus Solutions, Corp

Recently uploaded

ITB2015 - Crash Course in Ionic + AngularJS