How to quick setup Ionic AngularJS to start developing a mobile app

A quick setup is when we just need to create a project structure to start development for building an mobile app. Ionic and AngularJS both are javascript frameworks and based on HTML5. So, just to create an application we dont need to have build setup as it is same like an static web application which can run on any browser.

Below is the structure require to start working on any application development:

|---< www >

|------------ < css > (this folder will contain all required css files)

|------------ < js > (this folder will contain all required js files)

|------------ < img > (this folder will contain all required images)

|------------ < common > (this folder will contain other required items)

|------------ index.html (this will be our entry point html/ file name can be anything )

There are two ways to have a quick setup to start development, as

1. Install node.js and using that install cordova and then ionic through commands.
2. Manual download ionic bundle from offcial site and Copy it as above given structure.

Let us go one by one and understand how can we acheive both above ways:

A) Install Ionic using commands:

1) To install cordova we must have node.js installed. In Ubuntu, use below command to install node.js
              $ sudo apt install npm

2) Now first install cordova by using below command:


       $ sudo npm install -g cordova
( for windows just run this command without keyword sudo in command prompt )


3) Now install Ionic framework using command 
       $ sudo npm install -g ionic 



4) Create a project using command:
        $ ionic start new_project blank

The above steps will create a project structure as below with all required libraries to start development (not build).




 ── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks├── hooks // custom cordova hooks to execute on specific commands├── ionic.project // ionic configuration
├── package.json // node dependencies├── platforms // iOS/Android specific builds will reside here├── plugins // where your cordova/ionic plugins will be installed├── scss // scss code, which will output to www/css/└── www // application - JS code and libs, CSS, images, etc.

The main coding has to be done under www folder. 

B) Manual Setup/Download of Ionic and Angular JS Libraries


1) Manually Download the latest stable version of ionic framework from below URL/Path and save it into local.       http://code.ionicframework.com/#


2) Extract the zip file under a folder name as “www”. You will see css and js folders (as shown in first figure ) with required libraries to develop an application.


3) Whenever you want to build the code then just copy all the files from www to the cordova project www folder.



This is the fast way as compare to the first to start quick development.

How to partial reset form in primefaces

To reset input fields of a part or a component of a form programmatically , we need to use reset method similarly like we do update through managed bean.
for example I have below code snippet :

1:  <p:panel id="panel">  
2:       <p:inputText id="text1">   
3:       <p:inputText id="text2">   
4:       ...  
5:       <P:commandButton .. />  
6:  </p:panel>  

and need to reset the component ("panel") then using below code in managed bean I can reset all input fields/components under it:

 RequestContext.getCurrentInstance().reset("form:panel");  

It will reset only the component which is provided in rest method.

How to Debug JavaScript code/functions of an application using breakpoint on browser

We can debug javascript functions/scripts of an application when running it on any browser like Internet Explorer, Mozilla, Chrome etc. Browsers provides the facility to enable user to use breakpoints and start debugging the JavaScript. We can use breakpoints from where we want to inspect the code flow and results.

This debugging helps developers to understand the flow and errors if any. Following are the steps to do it.

Press F12 (Developer Mode), after running the page of your application. You will see below screen (IE11 Developer Tool):

Click on Debugger Tab, you will see HTML and JS list associated to the HTML Page. To debug any javascript function, we need to add a breakpoint as shown below (red circle in left):

When you refresh the page or trigger the action, the browser will pause the code at this breakpoint, using above icons you can execute each code and check the issues or values at run time.