Downloaded 13 times
Uploaded byShang Yi Lim
Gdg ionic 2
This document provides instructions for building a to-do list app with Ionic 2. It begins by explaining how to install Ionic and other necessary tools. It then outlines the basic template and components needed for a to-do list, including an empty state, add button, create form, and native storage. The document concludes by explaining how to display todo items, add options, emulate on devices, and includes additional resources.
More Related Content
![[not edited] Demo on mobile app development using ionic framework](https://cdn.slidesharecdn.com/ss_thumbnails/demoonmobileappdevelopmentusingionicframework-180409002227-thumbnail.jpg?width=640&height=640&fit=bounds)
Gdg ionic 2
- 1. Before we start… Savetime by installing these first Npm (http://tinyurl.com/nodejs-en- download) Then open command line/bash Today’s source code: http://tinyurl.com/gdg-ionic2 Code editor: https://code.visualstudio.com $ npm install -g ionic $ git fetch --all Getting Started With Ionic 2
- 2. Getting Started With Ionic2 Build Beautiful Cross Platform App with Ionic 2
- 3. Lim Shang Yi •Full stack Developer @ • Angular 1/Angular 2 • Ionic
- 4. What is Ionic •Cross platform mobile development framework • Angular 2 powered • Write once, deploy on different devices • Runs on browser and devices • Debug on browser
- 5. Why Ionic Powered by Angular2 TypeScriptPerformance Open Source Native Look & Feel Cordova for Hardware
- 6.
- 7. Ionic CLI • Installionic 2.1.0 $ npm install -g ionic • Create a new application $ ionic start –-v2 myApp • Start the application $ ionic serve
- 8.
- 9. Recipe for today:To-do list! • Create a to-do list • Add new to-dos • Delete a to-do
- 10.
- 11. Todo list emptystate • Add an message to inform users how to get started. • Add a floating action button (FAB) to compose a new to-do • Clicking the compose button will bring you to the create todo page
- 12. Create To-do Page •Add text boxes for details of to-do • Add button to save the data • Add some color to the to do • Data saved to native storage
- 13. Storing into NativeStorage • We will need to store the data into a persistent storage • NativeStorage, SecureStorage, SQLite • Requires cordova • Cordova plugins can be run in the browser with $ ionic plugin add cordova-plugin-nativestorage $ ionic run browser
- 14. Display todo actionlist • Show actions associated to the to-do card
- 15. Display options • Displayoptions to add, or remote to-do items
- 16. Emulating on device •Emulate on android • Deploying to device $ ionic emulate android $ ionic run android
- 17. Resources • Angular 2docs https://angular.io/docs/ts/latest/ • Ionic 2 docs http://ionicframework.com/docs/v2