Category : AngularJS


AngularJS - How to call function on page load example with demo?

Today, I am going to show you how to call controller function when page will load in AngularJS. We sometimes require to run function when page load like for example if you need to check user is login or not in AngularJS, It is possible by fire one Ajax request When Page Load. There are several way to you can do this. I have two example for execute function on page load. In this example i give you very simple example, so you can simply understand and use it properly. First Example using "data-ng-init" attribute and Second example "$window.onload" function. So, Let's check both example and tr.....

By Hardik Savani | September 5, 2016 | | 2475 Viewer | Category : AngularJS
READ MORE

How to create Pagination using dirPagination directive in Angularjs example with demo ?

Angularjs Pagination is not simple like laravel, code php etc, because we have to manage it with JS. In this tutorial i give you to build simple way pagination in your angularjs application. In this example we will use dirPagination directive to add paginate. Pagination Directive provide us very simple way to create paginate like set itemsPerPage, dir-pagination-controls etc. In this example you can see how it simple. You can get more information about Pagination Directive from here : <a href="https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination#basic-example".....

By Hardik Savani | July 7, 2016 | | 3313 Viewer | Category : AngularJS
READ MORE

AngularJS tooltip using UI Bootstrap tpls HTML example with demo

We are mostly use tooltip when the user hovers his cursor over a specific element purpose. In this post we going to create tooltip when cursor hovers on button, in this example i use ui-bootstrap-tpls plugin for tooltip. If you don't more about this plugin then no worry it is from scratch. In this example i added four button for different placement like top, right, left and bottom, so that way you can use any more that you want. So let's bellow example and also you can check demo. <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en-US"> <br/> <link rel="sty.....

By Hardik Savani | July 5, 2016 | | 1716 Viewer | Category : AngularJS
READ MORE

Angularjs Simple Datepicker directive example code with Demo

In this example you implement datepicker directive simply. In this example i used ngDatepicker plugin. It is very simple way to use and integrate. It is very flexible you can set format and other option. So If you also want to add datepicker then can do like as bellow example. In this example i include <strong class="path">/css/ngDatepicker.css</strong> path on link so you can download css file from here : <a href="https://raw.githubusercontent.com/jkuri/ngDatepicker/master/src/css/ngDatepicker.css" target="_blank">Click Here</a> and Also i include <strong class="path">/js/ngDatepicker.min.j.....

By Hardik Savani | July 2, 2016 | | 4223 Viewer | Category : AngularJS
READ MORE

AngularJS - sorting(using orderby filter) table data example with demo

Data sort in one of the most important and essential component in any web based projects. we can find data in order by any field then we can find any data easily from reach data. In this post, we can learn how to sort table row using AngularJS orderby filter. in bellow example you can see we have two column one for language and another for total developer. So if you click on table heading then you can sort data using orderBy filert. You can learn and see bellow example. <strong>Example</strong> <pre class="prettyprint lang-html"> <html lang="en-US"> <link rel="stylesheet" href="htt.....

By Hardik Savani | June 27, 2016 | | 1163 Viewer | Category : AngularJS
READ MORE

How to change date format using date filter in AngularJS?

AngularJS provides several filter for developing. AngularJS date filter through you can change date format as you want like yyyy-mm-dd, dd-MM-yyyy, MM-dd-yyyy etc. In bellow example you could understand very well date helper to how to use date filter in Angular JS. In this example i have one array with date(yyyy-mm-dd date format) and date format will be convert into dd-mm-yyyy using date filter. <strong>Example</strong> <pre class="prettyprint lang-html"> <html lang="en-US"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <bod.....

By Hardik Savani | June 26, 2016 | | 1040 Viewer | Category : AngularJS
READ MORE

AngularJS - How to Limit String Length using Filter?

Some case we have enough space to display content, for example you have articale blog and you want to display saveral articale on homepage with limited content like this way : <pre> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.... </pre> You can do it easily if you are work on any framework or something, but if you want to do on angular then you need to cr.....

By Hardik Savani | April 14, 2016 | | 1004 Viewer | Category : AngularJS
READ MORE

AngularJS - How to Capitalize the first letter of word Using filter?

Sometimes, we want to make Capitalize string in our AngularJS project then we have to create filter because AngularJS not provide any predefined function that can Capitalize word or string. However, you can solve this problem by makeing your own filter that can help you to make Capitalize string or word. so let's see following example and use it. <strong class="example">Create Filter:</strong> <pre class="prettyprint lang-js"> var app = angular.module('myApp', []); app.filter('capitalizeWord', function() { return function(text) { return (!!text) ? text.charAt(0).toUpperCase() + .....

By Hardik Savani | April 13, 2016 | | 917 Viewer | Category : AngularJS
READ MORE

AngularJS - how to remove html tags using filter?

Whenever you require to strip HTML tags usign Angular Filter, then this post can help you. If you are working on php then it is very easily use predefine function But in AngularJS you need to make your own filter for remove html tag from string. So, In bellow example you can see how to create and use it. <strong class="example">Create Filter:</strong> <pre class="prettyprint lang-js"> var app = angular.module('myHDApp', []); app.filter('removeHTMLTags', function() { return function(text) { return text ? String(text).replace(/<[^>]+>/gm, '') : ''; }; }); </pre> <strong class="example">U.....

By Hardik Savani | April 12, 2016 | | 4375 Viewer | Category : AngularJS
READ MORE

Laravel 5.2 API using JWT authentication tutorial from scratch example

In this post i want to share you how to create API in Laravel 5.2 with using JWT, If you are beginner then It is a very simple way to create and it is pretty easy to undestand how to create API. After this you can make more secure and complex your API. you can learn JWT authentication from back-end side. we have to learn how to works API from front-end and back-end side. i give you both side fully example how it works and use. <img width="100%" src="/upload/laravel-jwt.png" style="border:2px solid cadetblue"> JWT stand for Json Web Token. JWT will helps to create authentication and connect fro.....

By Hardik Savani | March 31, 2016 | | 15326 Viewer | Category : AngularJS
READ MORE

    Bootstrap - Jquery multiple select with checkboxes example using bootstrap-multiselect.js plugin

    Bootstrap - Jquery multiple select with checkboxes example using bootstrap-multiselect.js plugin

    Open Post

    Laravel 5 - line chart example code using google charts API

    Laravel 5 - line chart example code using google charts API

    Open Post

    How to get Instagram followers count using JQuery Ajax?

    How to get Instagram followers count using JQuery Ajax?

    Open Post

    How to create custom helper in Laravel 5?

    How to create custom helper in Laravel 5?

    Open Post

    Laravel 5 Repository Pattern Tutorial from scratch

    Laravel 5 Repository Pattern Tutorial from scratch

    Open Post

    PHP AngularJS CRUD with Search and Pagination Example From Scratch

    PHP AngularJS CRUD with Search and Pagination Example From Scratch

    Open Post