Sonam Gupta's Blog: January 2016

Friday 29 January 2016

Popover in ionic

Popover can be created by using ion-popover-view element. This element should be added to HTML template and $ionicPopover service needs to be injected into controller.

There is a way of adding popover. fromTemplate method allows using inline template.

In your controller add the following line of code-

.controller('MyCtrl', function($scope, $ionicPopover) {

$ionicPopover.fromTemplateUrl('popover.html', {

scope: $scope

}).then(function(popover) {

$scope.popover = popover;

});

$scope.openPopover = function($event) {

$scope.popover.show($event);

};

$scope.closePopover = function() {

$scope.popover.hide();

};

//Cleanup the popover when we're done with it!

$scope.$on('$destroy', function() {

$scope.popover.remove();

});

// Execute action on hide popover

$scope.$on('popover.hidden', function() {

// Execute action

});

// Execute action on remove popover

$scope.$on('popover.removed', function() {

// Execute action

});

})

Now we will add script with template to the HTML file we are using for calling popover function.

<ion-popover-view>

<ion-header-bar>

<h1 class = "title">Popover Title</h1>

</ion-header-bar>

<ion-content>

Popover Content!

</ion-content>

</ion-popover-view>

</script>

Thanks...

Friday 22 January 2016

Ionic slide box with backward and forward functionality

Hi,

In this article we are going to discuss creating an application that makes use of slide boxes. The theme of the application will be cars.

Run the following command in your terminal-

ionic start IonicProject blank

cd IonicProject

ionic platform add android

ionic platform add ios

Add the following lines of code in your style.css file-

.slider { height: 100%; text-align: center }

.scroll { height: 100% }

We add the above code because we want each slide in the slide box to take up the full screen. Any text in these slides will be centered.

Add the following lines of code in your index.html file-

<ion-slide-box>

<ion-slide>

</ion-slide>

<ion-slide>

</ion-slide>

<ion-slide>

</ion-slide>

</ion-slide-box>

You’ll notice that I’ve found three random car pictures on the internet and included them in each of the slides. The image will take up the full width of the slide.

The above code is very basic. It only allows for swiping. It doesn’t auto play and it doesn’t loop. It also doesn’t allow you to choose the current slide. By adding the following line in index.html file, we can have better control of our slide box:

<ion-slide-box ng-controller="slideController" pager-click="navSlide(index)" auto-play="true" does-continue="true">

The above code will auto play the slides and loop them. I’ve also added a function that allows you to choose the slide when you click on one of the pager items. The function is found inside the slideController which can be seen below:

example.controller("slideController", function($scope, $ionicSlideBoxDelegate) {

$scope.navSlide = function(index) {

$ionicSlideBoxDelegate.slide(index, 500);

}

});

Now if you want to add the next and previous slide functionality by clicking on next and previous arrow, then add following lines of code in your slideController-

 $scope.slidePrevious = function() {

        $ionicSlideBoxDelegate.previous();
    }

    $scope.slideNext = function() {

        $ionicSlideBoxDelegate.next();
    }

And now index.html file look like-


<ion-slide-box ng-controller="slideController" pager-click="navSlide(index)">


 <ion-slide>


<h4>

       <b>Slide1</b> <i class="ion-chevron-right" ng-click = "slideNext()"></i>

 </h4>


        <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/7/79/2001_BMW_Z3_Sideview_Topdown_Topaz_Blue_2.5i.jpg">

    </ion-slide>

    <ion-slide>


<h4>

     <i class="ion-chevron-left" ng-click="slidePrevious()"></i>    <b>Slide2</b> <i class="ion-chevron-right" ng-click = "slideNext()"></i>

 </h4>


        <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/2/2e/BMW_Z3_1.9L_1998.jpg">

    </ion-slide>

    <ion-slide>


<h4>

     <i class="ion-chevron-left" ng-click="slidePrevious()"></i>    <b>Slide3</b> 

 </h4>


        <img style="width: 100%" src="http://www.bmwblog.com/wp-content/uploads/bmw-z3-black.jpg">

    </ion-slide>

</ion-slide-box>


 


 

Thanks...

Friday 15 January 2016

Deployment of wordPress on Heroku

Hello,

Here is a way by which you can deploy wordPress on Heroku, by using following sets of command-

Step1-
Run the following command on your terminal-

git clone git://github.com/mhoofman/wordpress-heroku.git

Step2-
Open the cloned directory by using following command-

cd wordpress-heroku

Step3-
Create an account on heroku by using https://signup.heroku.com/login

Step4-
Install the Heroku CLI by using instruction on https://devcenter.heroku.com/articles/heroku-command

Step5-
Run the following command in terminal-

heroku login

Step6-
Run the following command on terminal, so that an app will created on heroku-

heroku create

Step7-

If you want, you can rename the app but it is not necessary-

heroku apps:rename NameOfApp

Step8-

Add database to your app by using following command-

heroku addons:create heroku-postgresql

Step9-

Replace HEROKU_POSTGRESQL_INSTANCE with the name from the above output-

heroku pg:promote HEROKU_POSTGRESQL_INSTANCE

Step10-

Create a new branch for any configuration/setup changes needed.

git checkout -b production

Step11-

Store unique keys and salts in Heroku environment variables. WordPress can provide random values here.

heroku config:set AUTH_KEY='put your unique phrase here' \

SECURE_AUTH_KEY='put your unique phrase here' \

LOGGED_IN_KEY='put your unique phrase here' \

NONCE_KEY='put your unique phrase here' \

AUTH_SALT='put your unique phrase here' \

SECURE_AUTH_SALT='put your unique phrase here' \

LOGGED_IN_SALT='put your unique phrase here' \

NONCE_SALT='put your unique phrase here'

Step12-

Push the new changes on heroku-

git push heroku production:master

Now, you can use your app.

Thanks...