Showing posts with label AngularJS. Show all posts
Showing posts with label AngularJS. Show all posts

July 04, 2016

How to add ionic or angular directives dynamically on runtime in html

Angular JS facilitates user to dynamically add angular directives or ionic directives or any custom made angular directives in html and update the page accordingly.

To implement it we need to use $compile function which deals with transforming the template DOM.

Format of compile function:

 function compile(tElement,tAttrs,transclude){...}  

The compile function takes the following arguments:
  • tElement - template element - The element where the directive has been declared. It is safe to do template transformation on the element and child elements only.
  • tAttrs - template attributes - Normalized list of attributes declared on this element shared between all directive compile functions.
  • transclude - [DEPRECATED!] A transclude linking function: function(scope, cloneLinkingFn)

Example of using compile function to dynamically add directives:

Lets create an array list and show the list in ion-list directive dynamically. 

JavaScript (app.js) Code:

 var htmlStr = ' <ion-list>'+  
    '<ion-item ng-repeat="item in nlist">'+  
     'Number {{item}} '+  
    '</ion-item>'+  
   '</ion-list>';  
 angular.module('myApp', ['ionic'])  
 .controller('THController', function($scope) {   
  $scope.doRefresh = function() {              
     var $target = $("#ioncontentpane");  
     angular.element($target).injector().invoke(function($compile) {  
       var $scopen = angular.element($target).scope();  
       $target.append($compile(htmlStr)($scope));  
       // Finally, refresh the watch expressions in the new element  
       $scopen.$apply();  
      });  
     $scope.nlist = [1,2,3];  
          $scope.$broadcast('scroll.refreshComplete');  
  };  
 });  

HTML code:

1:  <!DOCTYPE html>  
2:  <html>  
3:   <head>  
4:    <meta charset="utf-8">  
5:    <title>MyApp</title>  
6:    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
7:    <link href="css/ionic.css" rel="stylesheet">  
8:    <script src="js/jquery2.2.min.js"></script>  
9:    <script src="js/ionic.bundle.js"></script>  
10:    <script src="js/app.js"></script>  
11:   </head>  
12:   <body ng-app="myApp">  
13:    <ion-pane>  
14:    <ion-header-bar class="bar-stable">  
15:     <h1 class="title">Number List</h1>  
16:    </ion-header-bar>  
17:    <ion-content ng-controller="THController" id="ioncontentpane">  
18:    <ion-refresher  
19:     pulling-text="Pull to refresh..."  
20:     on-refresh="doRefresh()">  
21:    </ion-refresher>  
22:    </ion-content>  
23:   </ion-pane>  
24:   </body>  
25:  </html>  

the above code will display plain page with header, but when we pull down the page, it will dynamically add the items list directive and display the data as well.

Screenshots of output of the example:

Before pull-to-refresh event trigger:


After event trigger:



June 27, 2016

How to add pull-to-refresh feature using Ionic Framework

To add a pull-to-refresh feature of an Ionic framework, we need to use ion-refresher element/component. On using this tag, when we pull down the screen it will invoke the js method we would like to execute. Add your logic in that method that you want to execute after this refresh trigger.

This is how you can write the refresher tag.

  <ion-refresher  
    pulling-text="Pull to refresh..."  
    on-refresh="doRefresh()">  
   </ion-refresher>  

on-refresh executes the js method defined on page pull down. .
pulling-text displays the text while pulling down the page. 

Lets create one example to understand the use case of ion refresher. Lets create a plain page which on pull down refresh the page and will show 3 item list.

HTML Source Code:
 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>MyApp</title>  
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
   <link href="css/ionic.css" rel="stylesheet">  
   <script src="js/ionic.bundle.js"></script>  
   <script src="js/app.js"></script>  
  </head>  
  <body ng-app="myApp">  
   <ion-pane>  
   <ion-header-bar class="bar-stable">  
    <h1 class="title">Number List</h1>  
   </ion-header-bar>  
   <ion-content ng-controller="THController">  
   <ion-refresher  
    pulling-text="Pull to refresh..."  
    on-refresh="doRefresh()">  
   </ion-refresher>  
   <ion-list>  
    <ion-item ng-repeat="item in nlist">  
     Number {{item}}   
    </ion-item>  
   </ion-list>  
   </ion-content>  
  </ion-pane>  
  </body>  
 </html>  

JavaScript Code (app.js):
 angular.module('myApp', ['ionic'])  
 .controller('THController', function($scope) {   
  $scope.doRefresh = function() {              
     $scope.nlist = [1,2,3];  
     $scope.$broadcast('scroll.refreshComplete');  
  };  
 });  

In above JS code, doRefresh method declared which initializes an array (nlist) of 3. On completion of this method it will displays the list on the page.

Screenshots of the example:

Before pull-to-refresh event trigger:


After event trigger:



June 21, 2016

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.