Creating Amazing Apps with Angular and Ionic

A presentation made for New Media Manitoba that briefly covers AngularJS, and dives into how to use and build amazing apps using Ionic

Transcript

1. ANGULAR AND IONIC CREATING AMAZING APPS WITH ANGULAR AND IONIC Dan Slack / @javaslack
2. ABOUT ME Software Developer for the past 10 years. Enterprise data with web stuff mixed in. Consultant, father, board gamer...
3. AGENDA Angular JS Overview Components Demo of Angular JS App Ionic Overview Ionic Components Mobilification of Angular Demo App using Ionic
4.  CAVEATS... AngularJS is amazing, fun, useful... but....
5. ABOUT ANGULARJS NOTE: I will only be covering the basics of AngularJS. Open Source Framework (In Development for 5 years) Maintained by Google Employees Is a MVW Framework (Model-View-'Whatever')
6. MAJOR PARTS OF ANGULARJS There are several parts that make up an AngularJS app Directives Controllers Routing Services
7. DIRECTIVES Directives are essentially "Web Components". See for Code http://codepen.io/dslack/pen/hIKDc
8. DIRECTIVES Two-way data binding is a huge part of AngularJS, and can be demonstrated with some fancy directives See for Code http://codepen.io/dslack/pen/ujilz
9. FILTERS Notice from the other slide... ... <strong>{{searchText | uppercase}}</strong> ... Filters allow us to change the look of our text without actually changing the model itself.
10. CONTROLLERS AND $SCOPE The main way to get data from and to the View is to use Controllers. Every controller created has a $scope object that lets us do some powerful things Retrieve and Store data Add helper functions Watch when data changes Use events
11. CONTROLLERS AND $SCOPE See for Code http://codepen.io/dslack/pen/zgCsq
12. ROUTING AND VIEWS Often, we'll want to have navigation in our app. All content from that new location would be rendered into a single "view" element. <div ng-app="AngularDemo"> <h1>This is a Demo!</h1> <div ng-view=""></div> </div> angular.module('AngularDemo', ['ngRoute']).config(function($routeProvider){ $routeProvider .when('/', { templateUrl: 'partial/main.html', controller: 'MainController' }) .when('/page1',{ templateUrl: 'partial/page1.html', controller: 'Page1Controller' }) .otherwise({ redirectTo: '/' }) });
13. ROUTING AND VIEWS See for Code http://codepen.io/dslack/pen/Degxf
14. SERVICES As part of good design practice, we should try and put all extractable code into services. AJAX calls, helpers, etc should be services angular.module('AngularDemo', []) .factory('EchoService', function($http){ return { get: function(){ return $http.get('https://public.opencpu.org/ocpu/library/MASS/data/housing/js .then(function(response){ return response.data; }); } }; }) .controller('MainController', function(EchoService){ EchoService.get().then(function(data){ $scope.results = data; }); });
15. SERVICES See for Code http://codepen.io/dslack/pen/HsiDa
16. CUSTOM DIRECTIVES Won't touch on this much as this is an advanced topic. DOM Manipulation (jquery-type stuff) Reusable component Cleaner code <my-custom-directive content="someVariableFromScope"></my-custom-directive> .directive('myCustomDirective', { return { restrict: 'E', scope:{ content: "=" }, templateUrl: 'myDirective.html' } })
17. DEMO TIME!
18. IONIC FRAMEWORK Ionic is a HTML5 mobile framework, designed using AngularJS and PhoneGap. It gives us native-looking CSS and widgets.
19. ABOUT IONIC Developed by Drifty (makers of Codiqa and Jetstrap) Launched last year Native-like mobile apps using AngularJS Phonegap support is baked into the toolset
20. INITIALIZING Ionic has a dependency on NodeJS to initialize your app $ npm install -g cordova ionic $ ionic start IonicWorkout tabs
21. CSS FRAMEWORK A robust CSS framework comes baked in Headers and Footers Buttons Lists Cards
22. HEADERS AND FOOTERS See for Code http://codepen.io/dslack/pen/nyJzf
23. BUTTONS See for Code http://codepen.io/dslack/pen/tcshG
24. LISTS See for Code http://codepen.io/dslack/pen/IhyCB
25. CARDS See for Code http://codepen.io/dslack/pen/xAezK
26. MORE!! Go to to see the rest of the CSS components http://ionicframework.com/docs/components
27. EXTENSIONS Tons of widgets available to create native-like apps Header/Footers Modal Windows Action Sheets Tabs Side Menus and more...
28. HEADER/FOOTERS Really just intelligent versions of the CSS ones See for Code http://codepen.io/dslack/pen/pihzK
29. MODAL WINDOWS See for Code http://codepen.io/dslack/pen/lDAkt
30. ACTION SHEETS See for Code http://codepen.io/dslack/pen/dHisj
31. TABS See for Code http://codepen.io/dslack/pen/IbeLc
32. SIDE MENUS See for Code http://codepen.io/dslack/pen/EAgGd
33. AND MUCH, MUCH MORE Lots of extensions, and other mobile-friendly features Go to http://ionicframework.com/docs/api/
34. DIFFERENCES FROM BASE ANGULARJS Ionic uses the UI-Router project Lets us define multiple views where content can be loaded into Also is stateful and allows for 'parent' routes (for common templating) This difference was the biggest hurdle I had to get over
35. EXAMPLE OF UI-ROUTER angular.module('ionicApp', ['ionic']) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('tabs', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html" }) .state('tabs.home', { url: "/home", views: { 'home-tab': { templateUrl: "templates/home.html", controller: 'HomeTabCtrl' } } }) })
36. DEMO TIME!
37. LAST DETAILS ABOUT IONIC Lots of new Components added (Static Side Menu, Keyboard, etc) Other projects coming Ionic: Ionicons - Icon set ngCordova - AngularJS style extensions for Phonegap/Cordova Ionic Box - Ready-to-go dev. environment to build Ionic Apps onto Android. Creator - a GUI-based Ionic designer (soon to be in Beta)
38. THANKS FOR LISTENING! QUESTIONS?