Hello everyone, welcome to my blog, in this new post I will be talking about IONIC.
Ionic initially started in 2015 with angular.js at that time it became very popular because you could create frontend applications in the browser, you only had to download a version of node.js to install ionic and it automatically carried out the installation process.
for the year 2017, ionic used angular 4.0 & typescript with its version 3, where it was a little more intuitive and made use of new features, such as the RXJS, Http requests, Observables, NgModel, in short, it had many features that we know today of angular.
I will tell you a bit of the history of Angular over the years, as it has been my favorite framework for creating progressive applications or hybrid mobile applications.
To install ionic you must download the following:
- NODE.JS: https://nodejs.org/en/download/
Linux user: sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash
sudo apt-get install nodejs
- JAVA JDK:
sudo apt update
sudo apt install default-jre
You may need the Java Development Kit (JDK) in addition to the JRE in order to compile and run some specific Java-based software. To install the JDK, execute the following command, which will also install the JRE:
sudo apt install default-jdk
All S.O USERS: https://www.oracle.com/java/technologies/javase-downloads.html
- ANDROID STUDIO OR SDK TOOLS
For all Users: https://developer.android.com/studio
- VISUAL STUDIO CODE
All Users: https://code.visualstudio.com/download
After installing all the tools, now we will proceed to install ionic with the following command:
sudo npm install -g @ ionic / cli
now to create an ionic application you must write the following code:
ionic start "application_name" blank
ionic start "application_name" tabs
ionic start "application_name" menu
you select the language of your preference, and Ionic automatically creates the application for you.
To run your ionic application, there are two 3 options.
The first is with the
ionic serve command
The second is with the same command but so that you can view the application externally with the command:
ionic serve --external
and the third is installing the browser platform with the following command:
ionic cordova build browser
And this is the result!
as such an ionic project has, at its root, installed the package.json which is all the configuration of your project and the dependencies, in addition to that file, you can choose with which command to start your project, which dependencies to add and remove from your project etc.
the .gitignore that helps us a lot when we are deploying our application to avoid having to re-upload the Node_modules, which is where all the dependencies of the project are located.
In addition, in the SRC of the project we find the initial configuration, such as the routes, the components, the app.module, which is where we add all the imports or dependencies that we use in our project.
are the pages to create a page in ionic just add the command:
ionic g page "application_name"to create components:
ionic g component "component_name"
to install a platform in Android and IOS:
ionic cordova platform add android
ionic cordova platform add ios
are the assets, which is where all the part of icons, fonts, images, etc. goes.
This is the environment variable that is configured when we are going to connect with APis
THE index.html which is where we add, sources, opengraph, metadata etc.
there is the global sass, to add global styles to our application
I make a mention since on every page & component you create from ionic, a .sass file is always created (which sass is a css preprocessor)
It is also worth noting that in this project we have created the ionic application with angular, therefore I want you to see it in the package.json
As we see, we have installed Angular 9 & Typescript.
I hope you liked this little introduction to ionic, where we show you how to install ionic with angular from scratch, we explain a little the root of the project, some ionic commands and most importantly what tools you must download in order to compile ionic in android & on the web.