Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ITB2015 - Crash Course in Ionic + AngularJS

704 views

Published on

Ionic is a great tool for building hybrid mobile apps and AngularJS is a great JavaScript framework that plays very nicely with Ionic. In this talk we'll go over the basics of getting started with AngularJS+Ionic. We'll look at some real code from each of the 2 libraries and see what all is involved in building a hybrid mobile application. We will finish our journey with a real-life Ionic app presentation powered by RESTFul services.

Published in: Technology
  • Be the first to comment

ITB2015 - Crash Course in Ionic + AngularJS

  1. 1. Crash Course in AngularJS + Ionic
  2. 2. 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.
  3. 3. 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!
  4. 4. 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...
  5. 5. 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.
  6. 6. 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.
  7. 7. 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...
  8. 8. 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.)
  9. 9. How do I get started? ● <script src=”angular.js”></script> ● <html ng-app> ● {{variable name / expression}} ● [DEMO 1]
  10. 10. 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.
  11. 11. 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.
  12. 12. 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]
  13. 13. 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
  14. 14. 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]
  15. 15. 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]
  16. 16. 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]
  17. 17. Custom Directives ● Basically custom tags written in AngularJS. – <my-custom-widget /> ● Works just like regular HTML tags. ● Similar to Polymer.
  18. 18. AngularJS ● That (in an extreme nutshell) is AngularJS. ● Can be used by itself for SPA web apps. ● Not mobile-specific. ● Now, on to Ionic...
  19. 19. 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.
  20. 20. Ionic ● Performance “obsessed”. – Minimal DOM manipulation – Removed 300ms tap delay – Etc ● Lots of other neat features. ● We'll barely scratch the surface today.
  21. 21. 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.
  22. 22. 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]
  23. 23. <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]
  24. 24. 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.
  25. 25. 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?)
  26. 26. Questions? Comments? ● Ways to reach me: – Southofshasta.com – nolan@southofshasta.com – Twitter @southofshasta Thanks!

×