Hack The Sec-Leading Resource Of Linux Tutorial: Ionic

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="title single-title title20" style="background-color: white; border: 0px; font-family: 'Roboto Slab'; font-size: 28px; line-height: 38px; margin: 0px 0px 5px; opacity: 1; outline: 0px; padding: 0px; transition: opacity 0.24s ease-in-out; vertical-align: baseline; visibility: visible;">
<span style="color: #990000;"><u><i>Install Ionic Framework on <a href="http://www.hackthesec.co.in/search/label/Ubuntu" target="_blank">Ubuntu</a>, <a href="http://www.hackthesec.co.in/search/label/Debian" target="_blank">Debian </a>& <a href="http://www.hackthesec.co.in/search/label/LinuxMint" target="_blank">LinuxMint</a></i></u></span></h2>
<div>
<div style="background-color: white; box-sizing: border-box; line-height: 26.6px; margin-bottom: 10.5px;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Welcome! Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.</span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 26.6px; margin-bottom: 10.5px;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Ionic is focused mainly on the look and feel, and UI interaction of your app. That means we aren't a replacement for <a href="http://phonegap.com/" style="box-sizing: border-box; opacity: 0.8; text-decoration: none; transition: opacity 0.1s ease-in-out, border-color;">PhoneGap</a> or your favorite Javascript framework. Instead, Ionic simply fits in well with these projects in order to simplify one big part of your app: the front end. We recommend reading <a href="http://ionicframework.com/blog/where-does-the-ionic-framework-fit-in/" style="box-sizing: border-box; opacity: 0.8; text-decoration: none; transition: opacity 0.1s ease-in-out, border-color;">Where does the Ionic Framework fit in?</a> to get a good understanding of Ionic's goals.</span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 26.6px; margin-bottom: 10.5px;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><b style="box-sizing: border-box;">Ionic currently requires AngularJS</b> in order to work at its full potential. While you can still use the CSS portion of the framework, you'll miss out on powerful UI interactions, gestures, animations, and other things.</span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 26.6px; margin-bottom: 10.5px;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">We will be releasing Cordova/PhoneGap plugins in the future to expand the capabilities of your apps.</span></div>
<div style="background-color: white; box-sizing: border-box; line-height: 26.6px; margin-bottom: 10.5px;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><b>Inonic Framework</b> is useful for buliding mobile apps like <b>android </b>and <b>iOS</b>.This article will help you to install<b> NODE.JS, Cordova and Ionic framework </b>on your system.</span></div>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrA7fWxgTL3kHx0HJNZOLk0AnqY1cPSiwqItpmlSIpnGZRDbmBbuSkO7hijVIwq1yl9_IKxGn-hUTXTWLML4IlrnlfrvFAcpWNzosrkpbHBjCf6XRs_9lUvXHZFVE1DBdQZu3c7dLWHgaB/s1600/ionic-framework_www.hackthesec.co.in.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrA7fWxgTL3kHx0HJNZOLk0AnqY1cPSiwqItpmlSIpnGZRDbmBbuSkO7hijVIwq1yl9_IKxGn-hUTXTWLML4IlrnlfrvFAcpWNzosrkpbHBjCf6XRs_9lUvXHZFVE1DBdQZu3c7dLWHgaB/s200/ionic-framework_www.hackthesec.co.in.png" width="200" /></a></div>
<div style="background-color: white; border: 0px; font-size: 16px; line-height: 28px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-family: Georgia, Times New Roman, serif;">.</span><span style="color: #0b5394; font-family: 'Roboto Slab'; font-size: 24px; font-weight: bolder; line-height: 34px;">1. Install Node.js</span></div>
<div style="background-color: white; border: 0px; line-height: 28px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">First use the following commands to install npm and nodejs on your system. In below commands first command will installed some required packages on system. Second command will add ppa for node.js to your system. After that update your all attached ppa and last command will install nodejs and npm on your system.</span></div>
<pre style="background: none 0px 0px repeat scroll rgb(60, 60, 60); border-radius: 4px; border: 1px solid rgb(229, 229, 229); line-height: 1.3em; margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="font-family: Courier New, Courier, monospace; font-size: large;"><span style="color: white;">$ sudo </span><span style="color: lime;">apt-get install python-software-properties python g++ make</span><span style="color: white;">
$ sudo add-apt-repository </span><span style="color: lime;">ppa:chris-lea/node.js</span><span style="color: white;">
$ sudo </span><span style="color: lime;">apt-get</span><span style="color: white;"> update
$ sudo apt-get </span><span style="color: lime;">install nodejs</span></span><span style="color: white; font-size: 0.9em;">
</span></pre>
<h2 class="heading1" style="background-color: white; border: 0px; font-family: 'Roboto Slab'; font-size: 24px; font-weight: bolder; line-height: 34px; margin: 45px 0px 12px; opacity: 1; outline: 0px; padding: 0px; transition: opacity 0.24s ease-in-out; vertical-align: baseline; visibility: visible;">
<span style="color: #0b5394;">2. Install Cordova</span></h2>
<div style="background-color: white; border: 0px; line-height: 28px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Now use the following command to install Cordova on your system using npm command. It will install all other required node modules on your system.</span></div>
<pre style="background: none 0px 0px repeat scroll rgb(60, 60, 60); border-radius: 4px; border: 1px solid rgb(229, 229, 229); line-height: 1.3em; margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="font-family: Courier New, Courier, monospace; font-size: large;"><span style="color: white;">$ sudo npm </span><span style="color: lime;">install -g cordova</span><span style="color: white;">
</span></span></pre>
<h2 class="heading1" style="background-color: white; border: 0px; font-family: 'Roboto Slab'; font-size: 24px; font-weight: bolder; line-height: 34px; margin: 45px 0px 12px; opacity: 1; outline: 0px; padding: 0px; transition: opacity 0.24s ease-in-out; vertical-align: baseline; visibility: visible;">
<span style="color: #0b5394;">3. Install Ionic Framework</span></h2>
<div style="background-color: white; border: 0px; line-height: 28px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Ionic provides and command line utility for creating packages, build and start applications. Use npm command to install Ionic framework on your system.</span></div>
<pre style="background: none 0px 0px repeat scroll rgb(60, 60, 60); border-radius: 4px; border: 1px solid rgb(229, 229, 229); line-height: 1.3em; margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="font-family: Courier New, Courier, monospace; font-size: large;"><span style="color: white;">$ sudo npm install </span><span style="color: lime;">-g ionic</span><span style="color: white;">
</span></span></pre>
<div style="background-color: white; border: 0px; line-height: 28px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">After completing installation of Ionic framework, use following command to check installed version.</span></div>
<pre style="background: none 0px 0px repeat scroll rgb(60, 60, 60); border-radius: 4px; border: 1px solid rgb(229, 229, 229); line-height: 1.3em; margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="font-family: Courier New, Courier, monospace; font-size: large;"><span style="color: white;">$ </span><span style="color: lime;">ionic -v</span><span style="color: white;">

1.7.12</span></span><span style="color: white; font-size: 0.9em;">
</span></pre>
<h2 class="heading1" style="background-color: white; border: 0px; font-family: 'Roboto Slab'; font-size: 24px; font-weight: bolder; line-height: 34px; margin: 45px 0px 12px; opacity: 1; outline: 0px; padding: 0px; transition: opacity 0.24s ease-in-out; vertical-align: baseline; visibility: visible;">
<span style="color: #0b5394;">4. Create Your Project</span></h2>
<div style="background-color: white; border: 0px; line-height: 28px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Now, You need to create a new <b><span style="color: red;">Cordova </span></b>project on your computer using following command.</span></div>
<pre style="background: none 0px 0px repeat scroll rgb(60, 60, 60); border-radius: 4px; border: 1px solid rgb(229, 229, 229); line-height: 1.3em; margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="font-family: Courier New, Courier, monospace; font-size: large;"><span style="color: white;">$ </span><span style="color: lime;">ionic start</span><span style="color: white;"> HelloWorld blank
</span></span></pre>
<div style="background-color: white; border: 0px; line-height: 28px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Now use one of the following command to enable <b>iOS </b>or Android platform. <b>iOS </b>platform will work on <b>MacOS </b>only.</span></div>
<pre style="background: none 0px 0px repeat scroll rgb(60, 60, 60); border-radius: 4px; border: 1px solid rgb(229, 229, 229); line-height: 1.3em; margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="font-family: Courier New, Courier, monospace; font-size: large;"><span style="color: white;">$ </span><span style="color: lime;">ionic platform add ios</span><span style="color: white;">
</span><span style="color: lime;">$ ionic platform add android</span></span><span style="font-size: 0.9em;"><span style="color: lime;">
</span></span></pre>
<div style="background-color: white; border: 0px; font-size: 16px; line-height: 28px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-family: Georgia, Times New Roman, serif;">For more details visit <a href="http://ionicframework.com/docs/guide/installation.html" style="outline: none; text-decoration: none;" target="_blank">http://ionicframework.com/docs/guide/installation.html</a><br /><a href="http://www.hackthese.co.in/" target="_blank">HackTheSec</a><br /><a href="https://www.twitter.com/hackthesecurity" target="_blank">HackTheSecTwitter</a><br /><a href="http://www.hackthesec.co.in/">www.hackthesec.co.in</a></span></div>
<div class="single-post-ad" style="background-color: white; border: 0px; clear: both; color: #555555; font-family: 'Roboto Slab'; font-size: 16px; line-height: 28px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
</div>
</div>