cross platformcodespace.com.ng/src/myapps/powers5.pdf · mobile app development using ionic on...
TRANSCRIPT
![Page 1: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/1.jpg)
Cross Platform
Mobile App Development
Using Ionic on Angular
By Engr.Chid (08064747096)
CodeSpace Technology LTD
www.codespace.com.ng
Facebook.com/codespaceng
Facebook.com/engr.chidi.5
![Page 2: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/2.jpg)
![Page 3: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/3.jpg)
![Page 4: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/4.jpg)
![Page 5: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/5.jpg)
Node & npmTo build Ionic Framework apps,Go to Node’s Website to download Nodethe LTS version to ensure best compatibility.
Install Ionic CLINow that Node.js and npm are installed, install the Ionic CLI globally with npm:
npm install -g ionic
![Page 6: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/6.jpg)
Choose an app templateCreate an Ionic app using one of the pre-made app templates.The three most common starters are the blank starter,
tabs starter, and sidemenu starter.To create your App:open a new terminal window and run:
ionic start myApp tabs
![Page 7: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/7.jpg)
Testing in a browserNow, you can cd into the folder that was created. Invoke Ionic Serve, thus
cd myAppionic serve
To stop the Server, press Control + C.
![Page 8: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/8.jpg)
![Page 10: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/10.jpg)
![Page 11: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/11.jpg)
![Page 12: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/12.jpg)
![Page 13: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/13.jpg)
![Page 14: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/14.jpg)
Page.texport class Tab1Page { todo = {}
logForm() {
console.log(this.todo)
}
Page.html
![Page 15: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/15.jpg)
![Page 16: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/16.jpg)
<ion-input type=“email” ></ion-input><ion-icon name="cart"> </ion-icon><ion-item> <ion-icon name="pin" slot="start"> </ion-icon> <ion-label>ion-item in a card</ion-label><ion-button fill="outline" slot="end">View</ion-button>
</ion-item>
![Page 17: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/17.jpg)
![Page 18: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/18.jpg)
<ion-item> <ion-label position="floating">Floating Label</ion-label> <ion-input></ion-input> </ion-item>
<ion-item><ion-label>Gender</ion-label><ion-select value=“male" okText="Okay" cancelText="Dismiss"><ion-select-option value=“male">Male</ion-select-option>
<ion-select-option value=“female">Female</ion-select-option></ion-select></ion-item>
<ion-button expand="full" fill="outline“ shape="round“> end</ion-button><ion-button><ion-icon slot="start" name="star"></ion-icon> Left Icon</ion-button>
![Page 19: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/19.jpg)
To deploy your app like a traditional native app, to a physical device or a emulator/simulator, use the ionic Cordova run or emulate commands:
npm i -g native-runIonic cordova run
ionic cordova emulate
![Page 20: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/20.jpg)
open up your app project directly in Xcode or Android Studio. To do this for iOS, open platforms/ios/YOURPROJECT.xcodeproj.
For Android, you'll need to open Android Studio and then import the platforms/android folder as an existing gradle project
![Page 21: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/21.jpg)
![Page 22: Cross Platformcodespace.com.ng/src/myapps/powers5.pdf · Mobile App Development Using Ionic on Angular By Engr.Chid (08064747096) CodeSpace Technology LTD ... Node & npm To build](https://reader035.vdocuments.mx/reader035/viewer/2022071007/5fc420f2e29a2125065bb40e/html5/thumbnails/22.jpg)