Sunday, May 5, 2019

Ionic with Angular Mobile application

1. Ionic with Angular Mobile application


helpful link : https://www.youtube.com/watch?v=NJ9C7iY9350

SourceCode - https://drive.google.com/drive/folders/1TwFJLYbOwp9hmSDVObOOOZJQwniexYf-?usp=sharing

Step1: check node, npm installed and if both are there then install ionic

node –v

npm –v

npm install –g ionic





cd C:\Users\pamr\Desktop\Java\AngularJS_NodeJS_MongoDB\Ionic_Angular

ionic start ionic4-angular-news tabs --type=angular   (takes arround 20-30min)

                  Possible other options are with template:

                  - ionic start ionic4-angular-news blank
                  - ionic start ionic4-angular-news tabs
                  - ionic start ionic4-angular-news sidemenu

                 --type=angular  -> because currently ionic is supported with angular in future it may support with ReactJS and ViewJS









cd ionic4-angular-news

code .   (to open project in Visual studio)

ionic serve








Now what we will do is we will create 2 pages (News, News-single)


Once user click on News -> it will navigate to News-single.


ionic g page news 

               (you can run dry run to see what folders are creating 1st eg: ionic g page news --dry-run)


ionic g page news-single




Now what we will do is:

We will integrate our news page with Tabs module.

1> in tabs module import and add NewsPageModule
2> in tabs routing - add news path router.









Now to display the News content in our News page, we will use some existing API..

got to -> https://newsapi.org -> Register and generate the key

"6db1971303464863bd830b29e97cfeb5"





ionic g service news





























Create SDK file from our created Ionic application.


1> Download SDK standalone tool



npm i -g cordova

ionic cordova platform add android



ionic cordova build android --release