What
Is Ionic Framework?
I hope you enjoyed with this post. Thank you very much for your time.
Ionic
Framework is an HTML5
mobile app development framework targeted at building hybrid mobile apps.
Ionic
Framework is complete open-source
SDK, test, and deploy cross-platform.
Ionic
Framework is created by Max Lynch, Ben Sperry
and Adam Bradley in 2013 and the
original version was released in 2013
and built on top of AngularJs and Apache Cordova. The recent releases known as Ionic/Ionic 3, are built on Angular.
Ionic
Framework is focused mainly on the look and feel, and UI
interaction of your app. That means we aren't a replacement for PhoneGap or
your favorite JavaScript framework.
Ionic
Framework uses Cordova plug-in to gain access to host
operating systems features such as Camera, GPS, Flashlight, etc.
In short - Ionic
Framework is an Angular Application with a neat set of Angular components
and pre validated Cordova plug-in. And of-course Ionic framework can be used
for web app also (Cordova plug-in will not work as it is for native device not
for web browsers).
What
Is the Current Stable Version of Ionic Framework?
Ionic
3,
it was released on 24th February, 2017and
it helps us to build a native mobile applications using HTML5,CSS, and JavaScript.
Ionic
Framework mainly focuses on the look and feel, and the user
interface of our applications.
What
Are The Benefit of Ionic Framework?
The Benefit of Ionic Framework -
1. Ionic
framework is an open- source free platform
2. Code
once, run on all mobile devices
3. One
programming language for all mobile OS
4. One
source for all the supported platforms (mainly Android and OSX)
5. Main
development in HTML5, CSS and JavaScript
6. Ionic
uses Angular as the basic framework which could be used to diversify into web
applications as well.
7. Good
availability of "plug-in", If you are hiring someone to build your
app you'll reduce costs.
What
Are The Disadvantages of Ionic Framework?
The Disadvantages of Ionic Framework -
1. Possible
performance issues depending on application type. But alternatives to PhoneGap
do exist
2. Security
issue - Ionic applications may not be as secure as the native applications.
3. Need
for specialists, JS can be tricky to learn for new guys
4. If
you don't like Angular, you don't use it
5. Early
adopter risk. This technology is still in its infancy. Support keeps changing,
standards keep changing, and libraries can be completely rewritten at any time
6. The
native Java SDK integration in the JavaScript is a pain too
Is
the Ionic Framework Responsive?
Yes!,
Ionic framework is quick, smooth and responsive.
The Ionic Framework offers developers a
responsive grid similar to that of something like Bootstrap (CSS Frameworks).
Is
Ionic Framework still good?
Yes!,
it's still a good solution for rapid, cross-platform development.
It is also good in a relative term. Ionic is
mature. It's cross platform. It's open and is built upon very well understood
web standards. Mobile browsers since iPhone 5s and up are capable of running
Ionic apps to optimal standards.
Is
Ionic Native?
Yes!,
Ionic Native is a Typescript wrapper for Cordova/PhoneGap plugins that make
adding any native functionality you need to your Ionic mobile app easy.
Why
I’m switched to the Ionic Framework?
The main Reasons are -
1. Ionic
Framework is completely free and Open Source
2. The
One code, run most of on all mobile devices
3. Ionic
Framework is built on Angular
4. Ionic
Framework has a Beautiful Default UI That Is Easy to Customize
5. Ionic
Framework integrates easily with Native Functionality
6. The
core development team is Awesome :)
How
to Setup and Install Ionic Framework?
Ionic
Framework is an npm module and requires Node.js.
Let explore the link for detail => Setup and Install
The
List of Useful Ionic Framework Commands?
The commands and its description
1.
start- This command is used to create
a new project
2.
generate- This command is used to generate pipes,
components, pages, directives, providers and tabs
3.
serve- This command is used to start
a local dev server for app dev/testing
4.
build - This command is used to Build
web assets and prepare your app for any platform targets
5.
docs - This command is used to Open
the Ionic documentation website
6.
info - This command is used to Print
system/environment info
7.
link- This command is used to Connect
your local app to Ionic
8.
login- This command is used to Login
with your Ionic ID
9.
signup - This command is used to
Create an Ionic account
10. telemetry- This command is used to Opt in and out of
telemetry
11. upload-
This command is used to Upload a new snapshot of your app
12. config
get- This command is used to Print config values
13. config
set- This command is used to Set config values
14. cordova
build- This command is used to Build an Ionic project for a given platform
15. cordova
compile- This command is used to compile native platform code
16. cordova
emulate- This command is used to Emulate an Ionic project on a simulator or
emulator
17. cordova
platform- This command is used to Manage Cordova platform targets
18. cordova
plugin - This command is used to Manage Cordova plug-in
19. cordova
prepare - This command is used to Copies assets to Cordova platforms, preparing
them for native builds
20. cordova
resources - This command is used to Automatically create icon and splash screen
resources
21. package
build- This command is used to Start a package build
22. package
download- This command is used to Download your packaged app
23. package
list - This command is used to List your cloud builds
24. package
info - This command is used to Get info about a build
25. cordova
run - This command is used to Run an Ionic project on a connected device
What
Are the Others Ionic Commands also Available for Angular?
Others Ionic Commands also Available for Angular
Projects -
1.
Pipes,
2.
Components,
3.
Directives,
4.
Providers and
5.
Tabs
6.
And So On
Syntax
–
1.
ionic generate [<pipes>]
[<pipes-name>]
2.
ionic generate [<components>]
[<components-name>]
3.
ionic generate [<directives>]
[<directives-name>]
4.
ionic generate [<providers>]
[<providers-name>]
5.
ionic generate [<tabs>]
[<tabs-name>]
The
List of Examples –
1.
ionic generate component
2.
ionic generate directive
3.
ionic generate page
4.
ionic generate pipe
5.
ionic generate provider
6.
ionic generate tabs
7.
ionic generate component demoApp
8.
ionic generate page Login
9.
ionic generate page register
--no-module
10. ionic
generate page users --constants
11. ionic
generate pipe MyCustomPipe
List
Some Popular apps built with Ionic Framework?
Here goes a list of some popular applications
built with the help of ionic framework –
1.
Pacifica
2.
MarketWatch
3.
Nationwide
4.
Untappd
5.
JustWatch
6.
ChefStepsl
7.
Cryptochange
8.
TD Trading
9.
Sworkit
How
many Types of Storage Available in Ionic Framework?
Eight (8) Types of Storage Available in Ionic
Framework -
1.
HTML5 local Storage
2.
indexedDB
3.
Webservice
4.
API storage
5.
WebSQL
6.
Cookie and session storage
7.
PouchDB
8.
Cordova storage
How
To Use Observables in an Ionic Framework?
Observables are something that are not specific
to Ionic or Angular and are provided by the RxJS library. Observables
are almost similar to the promises but you can do lots of more.
How
to parse JSON in Ionic Framework?
The JSON.parse()
method parses a JSON string, constructing the JavaScript value or object
described by the string.
The
Example is -
var users = JSON.parse(userResponseData);
We can disable/enable scrollbar pragmatically.
Example 1 - Try a setting <content scroll="false"> that will disable
scrolling.
Example 2 , You can alos used this as a quick fix
–
This every time an event is called, in our case,
on every drag event.
Disable
Scrolling -
$ionicScrollDelegate.getScrollView().__enableScrollY = false
Enable
Scrolling -
$ionicScrollDelegate.getScrollView().__enableScrollY = true
Example 3,
$timeout(function(){
$ionicScrollDelegate.$getByHandle('formularContent').freezeScroll(true);
})
Example 4,
Add the .scss file –
.no-scroll .scroll-content{
overflow: hidden;
}
And
Then add the no-scroll class to your ion-content
like this –
<ion-content class="no-scroll">
..
</ion-content>
I hope you enjoyed with this post. Thank you very much for your time.