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

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

How to create single page application using angular js

Hi guys, Angular js a grate framework to build single page application. Angularjs is most popular framework to build single page application.
In this post I am showing you that how to use routing (ng-route) to build a single page app using angular.
For routing we have to include angular-route.js in our angular project. and our html will look like and for rendering the different views of our application we will use ng-view directives in our body section where we want to render the different views.
I have also included 2 more files app.js and controller.js.
In app.js file we will define the app also write the routing code. and in controller.js we will write the controllers.
We can create multiple controllers in a single js files. but If you have lots of functionality than you should create different files for different controllers. I have created a single file for controllers controller.js
I have also created a basic navigation bar for switching the view.

In app.js file I am defining app and also defining routes using ng-route. I have added ng-route dependency in my module. I have to use the config function for configuring the routes. you can see in the code snippet.

• when('/view1'): The view1 view will be shown when the URL hash fragment is /view1. To construct this view, Angular will use the view1.html template and the view1 controller.

View1.html

• when('/view2'): The view2 view will be shown when the URL hash fragment matches '/view2', . To construct the phone details view, Angular will use the view.htmltemplate and the view2 controller.

View2.html

• otherwise({redirectTo: '/'}): triggers a redirection to / when the browser address doesn't match either of our routes.

Now you can see it in action. you can switch between views by just clicking on navbar and the view will change. check the example below

How To Start With Angular JS

There are so many tutorials and videos for start up with angularjs. When I was started with angularjs I found that most of tutorials are too confusing.
So I am showing that How to create a basic app with angularjs.

What We Need For Startup

1. Text Editor(sublime text, notepad++, dreamweaver)
2. Browser (chrome, firefox),
3. angularjs Library. You can download it from angularjs.org

Create a file named index.html and  create a initial html page.and attach  angularjs library in your html page. In this page I am showing you how the ng-model works and how to bind the data.Now you can see the results in the result tab of codepen demo. So for data binding we just need to add an angular library.
In Next Post I will let you know that How to create single page application using angular js.

<html ng-app="">  
 <head>  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>  
 </head>  
 <body>  
   <p>First Name : <input type="text" ng-model="f_name" placeholder="First Name"></p>  
   <p>Last Name : <input type="text" ng-model="l_name" placeholder="LastName"></p>  
   <h1>Hello {{f_name}} {{l_name}}</h1>  
 </body>  
 </html>  

See the Pen jbyZQL by Love Trivedi (@lovetrivedi) on CodePen.