Sunday 4 October 2015

How To create arrow using CSS

We can now create arrow using CSS3 Properties. Its very silmple to create arrow using css. Today I am showing you that how can you create arrows using css3 properties.

So first create a basic html page. and add div or and other tag for creating arrow.

HTML


Now you have to write the css which will transform this elements into arrow. For creating arrows we have to define elements height and width to '0px' as we will play with borders and creating arrows.so here is our css

CSS


Now you can see the results here.

RESULT

Thursday 1 October 2015

How to user UI router in Angular js Application

Hi, Guys, Today I am telling you that how to use AngularUI Router
AngularUI Router  is basically used for routing in angularjs application. its work like angular ng-route, but AngularUI Router  has more features and power than ngRoute. If you are building a complex and large scale application than I am suggesting you to use UIRouter in your application for flexible routing and nested view.
AngularUI Router is also supports nested views.

Get Started

For use AngularUI router you need angularUi Router script. There are many methods to download script and you can also use cdn.
  • via npm: by running $ npm install angular-ui-router from your console
  • or via Bower: by running $ bower install angular-ui-router from your console
  • or via cdn link to cdn
Include angular-ui-router.js in your index.html and than  Add 'ui.router' to your main module's list of dependencies 
so your index.html will look like following.


I have added  ui-sref directive to manage state transitions. this directive auto generate href attribute for given state.
I have also used ui-view Directive. in this directive our view will be loaded in the ui-veiw.
Now lets create some child templates which will be loaded according to given state in ui-sref.


Finally We use  $stateProvider to set up our states in the module config, as in the following:


In this code I have passed parameters in state which I have initialized in ui-sref. I can define controller and templates also.
Please let me know if you have any trouble in integrating ui-router.

Now see our code in action here





You can also download this code from here
Angular UI router Example Seed