Angularjs

Angularjs filter by multiple property in controller, ignore case

Angularjs Filter is very really handing when we need to filter records from a complex object array. I was looking Angular way to filter my records and found some interesting things from different websites, which I will try to summarise and explain in more detain in this article. We will see how to use filter in ngRepeat, ngOption and inside our controller because using filter in controller is a... By Ali Adravi   On 30 Jan 2017  Viewed: 630
  • angularjs
  • filter

Dynamic Angular Forms Validation in ngRepeat with ngMessage and live demo

Validation of controls in ng-repeat is really easy, just we need a unique name for every control. I found many articles which use ngMessage but they validate all the controls together, if there is any invalid control, all the controls say the error message. I was in need to explore and try different tricks and found one easy way, which I want to share to same others time. In this article we are... By Ali Adravi   On 20 Jan 2017  Viewed: 246
  • angularjs
  • ngMessage

Angularjs Multiple master pages with different design without show hide

Multiple master page in AngularJS is easy but it is not very straight forward in any documentation. Most of the people say no it is not feasible, some suggest to user different techniques which doesnot work for me. I try hard to find any quick solution but spend two days trying different suggestion for different people. After all decided to try my own so start exploring UI-Router in more... By Ali Adravi   On 03 Nov 2016  Viewed: 799
  • angularjs
  • ui-router
  • master-page

Angularjs Validation with CSS and ngMessage with Demo

Angularjs ngMessage validation is so powerful that we can complete our validation without writing any code except two simple CSS class and with great look and feel. By using ngMessage we can give those features which was taking months to wring css and JavaScript but with angularjs it is only the elements settings. In this article we will first try to understand the very simple CSS style then we... By Ali Adravi   On 06 May 2016  Viewed: 848
  • angularjs
  • ngMessage
  • Validation

Angularjs directives fundamentals

In AngularJS Directives are html markers on a DOM element like an attribute, element name, comment or CSS class, that tell AngularJS's HTML compiler ($compile) to perform a specified behaviour to that DOM element or even transform the DOM element and its children.Some Example are ngBind, ngModel, and ngClass etc. All the AngularJS pre-defined directives prefix with `ng`. AngularJS allow us to... By Ali Adravi   On 16 Mar 2016  Viewed: 373
  • angularjs
  • directives
  • restrict

Pass value from one controller to another in AngularJS

Share value between two or more controller is easy by using the service which we will see in this article. In ASP.Net there were many options to pass values from one page to other pages, let's just name some of them to understand if we can use them or not. The very first thing comes in mind SESSION state, to use the session state we will to go to the server side, so we will need the service to... By Ali Adravi   On 02 Nov 2015  Viewed: 6,263
  • service
  • angularjs
  • controller

You must know about angularjs

Angularjs has many feature which makes developer life easier specially the way of binding and changing values when there is any change in value automatically. As an Angularjs developer, what are the features we must know before starting coding. Here are some of the features we will discuss in this article 1. Data Binding (one way, two way and one time data binding) 2. Data Binding (one way,... By Alicia Gonzalez   On 15 Oct 2015  Viewed: 461
  • angularjs
  • $http
  • $watch

Angularjs Bootstrap Datepicker enable/disable dates with configuration example

Adding calendar to the angularjs application is more than easy to any other application if you configured it properly. Angularjs Bootstrap DatePicker have more features than any other available calendar, you can set all your condition in html from data format to min-date, max-date, date disabled for Saturday and Sunday, first day of the week, todays button text, Week button text, close button... By Ali Adravi   On 22 Sep 2015  Viewed: 15,544
  • angularjs
  • bootstrap
  • Datepicker
  • Calendar

Angularjs dropdown select value, text, multiple values with demo

Angularjs dropdown/slect have more option than any other .net language dropdownlist, we can bind and get only Id or Text or both from dropdown, even we can bind and get more than two values like value, text and role from a dropdown and even more. We can try to see all the possible ways to bind the dropdown/select in this article, which is not possible to cover every thing but we will try our best... By Ali Adravi   On 05 Sep 2015  Viewed: 12,562
  • angularjs
  • dropdown
  • select

Angularjs Constant and enum with example

As we know the benefit of constant and enum in any other language, we need to it wherever need in our project. But angularjs does not have any enum concept, we will try to create some constants, object to achieve the same goal of enum easily with example. Luckily AngularJS provides a `constant` service type that can be used for static data that will not change and can be used throughout the... By Ali Adravi   On 02 Sep 2015  Viewed: 18,597
  • angularjs
  • constants
  • enum

AngularJS HTML5 mode reloading page not found solution

Removing # from Angularjs application is tricky but BOSS is always right, if he don't want to see the # (hash) in URL then there is no way to keep it any more. Actually it is not too much work for anyone to set it up within 5 minute by rewriting the URL. I was playing and found it is very easy and useful. In all the supporting browsers it will show the url without hash and in older browsers which... By Ali Adravi   On 17 Aug 2015  Viewed: 8,455
  • angularjs
  • routing
  • web.config

Angularjs powerful paging on table and searching with delay and demo

Paging on table is the basic requirement and most of us look for some grid so it can provide the complete feature of paging and sorting but in Angularjs it is so easy that anyone can achieve it by writing some code. I checked and found most of the available code give the paging feature in for 1 to N means if there is 500 pages then it renders 500 links at the bottom which grow more than the table... By Ali Adravi   On 14 Aug 2015  Viewed: 6,202
  • angularjs
  • table
  • pagination
  • searching

Angularjs Cascading Dropdown/Select with demo

Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change of state dropdown. We will fetch only those records from database which match the criteria rather... By Ali Adravi   On 06 Aug 2015  Viewed: 27,101
  • angularjs
  • select
  • dropdown
  • cascading

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 2

Add/Edid Customer in Modal Popup --- In previous article we discussed how to search, delete and show detail of customer and contact list. In this article we will try to open the modal popup to add new customer and edit an existing customer record. I divided article in two parts because of the Modal Popup, which works in totally different way so I thought to give more detail about it. First of... By Ali Adravi   On 29 Jul 2015  Viewed: 10,929
  • angularjs
  • modal-popup
  • bootstrap

Custom Directives in AngularJS with example and demo

Angularjs custom directives are the common to avoid the duplicate code, it is easy powerful and really nice. There are already too many directive have been created by experts but as a developer we need to write our own to achieve our specific goal. ng-model, ng-if, ng-show, ng-repeat all these are the directives which is created by experts for us to speed up our daily life coding. In this... By Ali Adravi   On 29 Jul 2015  Viewed: 1,950
  • angularjs
  • directive

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1

Search sort Insert update and delete are the basic features we need to learn first to learn any language, In this article we will try to create these features with Web API, bootstrap modal popup and ui.router. We will use enetity framework code first to save and retrieve data from database. We will extend our previous article example to achieve our goal. Here is the list of features we are... By Ali Adravi   On 28 Jul 2015  Viewed: 20,296
  • angularjs
  • webapi
  • ui.router
  • entity-framework
  • modal-popup

Angularjs Progress bar directive for entire application

Progress bar for Angularjs application by using directives is simple and real easy. I was googling and could not found any directive way, if you will check most of the people says before call the http method open the progress bas and close once you get the result or get any error. Do you think it is good way to write the code in every http request, I don't like it. What ever we are going to... By Ali Adravi   On 24 Jul 2015  Viewed: 9,117
  • angularjs
  • directive
  • $http
  • progress-bar
  • css

Apply angularjs animation in 2 minutes

Angularjs animation is more than easy, even you don't have write a single line of code any kind of animation. In this demo I am going to show how you can animate the list of item coming from left, rotating and flying list items by just adding ngAnimation dependency and some copy and past of css and adding class to elements. Don't you bleave it, watch the video. - First of all, The ng-animate... By Ali Adravi   On 21 Jul 2015  Viewed: 1,841
  • angularjs
  • animation
  • css

Angularjs search and sort on table data

Sorting and searching on table data in angularjs is more than easy, just we need to do some html adjustment and everything works quickly. No need to write any separate procedure with these extra features, in this article we will see how we can achieve it without calling the data from database and without paging, latter on if we need we can extend it to do the same feature with data from... By Ali Adravi   On 18 Jul 2015  Viewed: 1,248
  • angularjs
  • table
  • search
  • sort

Angularjs ui-routing with Web API

I found most of .Net developer whether they are ASP.Net developer or MVC developer, they face to start and how to create the Angularjs application structure. In this article we will start from an empty project with Web API 2.0. First of all we will create very simple application with three three pages, home, about and contact us, latter we will use entity framework to get data from database... By Ali Adravi   On 18 Jul 2015  Viewed: 1,931
  • angularjs
  • ui.router
  • web-api
12