ASP.Net MVC Web API AngularJS and Bootstrap application structure

Application structure by using ASP.Net MVC, Web API, AngularJs is not complicated but we need to know what NuGet Packages are required and what can make the application easy and speed up the development. In this article we will use MVC 4, Visual Studio 2012, Web API and AngularJS to create a single page application. We will try to use different folders for keeping our controllers, services,... By Ali Adravi   On 17 Nov 2014  Viewed: 9,697
  • angularjs
  • webapi
  • mvc
  • bootstrap

Angularjs render any json to table, add edit remove rows and more

Dynamic table rendering, edititing, adding/removing rows with angularjs, render any json script in tabular format with heading and contents. W will try to render dynamic table, add & remove rows, edit rows in table all by very simple coding, hardly two to five lines, don't allow to remove the first row and keep the add button always in the last row etc. 1. Angularjs Render any json array to... By Ali Adravi   On 07 Oct 2017  Viewed: 7,125
  • angularjs
  • dynamic-table

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: 6,903
  • angularjs
  • ui-router
  • master-page

Angularjs checkboxlist required validation with demo

Checkbox list at least one is required, checkbox list minimum 3 is required, gender at least one is required are the basic requirement for any situation. We will use the toggle trick to add remove the selected items from the list of checkbox values. In this article we are going to see the examples: 1- Radiobutton list, at least one value is required 2- Checkbox list, at least one value... By Ali Adravi   On 22 Oct 2017  Viewed: 5,542
  • angularjs
  • checkbox-list

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: 4,426
  • angularjs
  • ngMessage

Angular 6 Group Items in Select

Show option group in Angular with select and align group items properly. There is nothing special to Angular if you already know the ngFor loop. You are just missing the HTML part `optgroup`. We are going to see some working examples by using JSON data to show, you can use any service or data from anywhere. First we will see some pure HTML examples with hard coded values so we can understand... By Ali Adravi   On 04 Apr 2019  Viewed: 4,234
  • angularjs;
  • select
  • gourp

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: 4,112
  • angularjs
  • directive

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: 3,569
  • 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: 3,522
  • angularjs
  • ui.router
  • web-api

angular 5 form validation easiest way

Angular make form validation easier than ever, we are going to check with Angular FormBuilder, FormGroup and validation together in this article, We will also see how to validate email without writing any custom directive or any other code because it is already there. Some tricky way to show and hide the error on page load and on save. We will use plunker for example: First we need to update... By Ali Adravi   On 23 Jan 2018  Viewed: 2,988
  • angular-5
  • angularjs
  • validation
  • FormGroup
  • ReactiveForm

Angularjs jQuery UI Datepicker disable dates conditionally

Angularjs jquery calendar with minimum code to attach datepicker, how to extend to restrict the dates from a particular day, month or year, how to make calendar to validate start and end date from one control to other after user selection, how to format date before rendering or how to disable datepicker with the help of angular ngDisabled properties are some of the common points we are going to... By Ali Adravi   On 26 Dec 2017  Viewed: 2,501
  • angularjs
  • jquery
  • datepicker
  • validation

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: 2,281
  • angularjs
  • animation
  • css

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: 1,971
  • angularjs
  • ngMessage
  • Validation

Angularjs reusable Component with demo

Angularjs 1.5 introduced component which can be used for reuseable component similar to user control in ASP.Net. We will create a component and see how we can use with different pages by just adding a single element. If we will try to creat the same as a directive then will be complicated but with component it will be very easy. **Advantages of Components**: - simpler configuration than... By Ali Adravi   On 23 Oct 2017  Viewed: 1,835
  • angularjs
  • component

Angular component communication by using Input Output decorator

@Input and @Output decorator ar used to pass data/communicate between components, @input is used to pass data from parent to child component on the other hand @Output is use to notify the parent by using EventEmitter. Take the simple example of customers list parent page and add/edit child component, on clicking the edit button current customer data need to be passed to the child component to... By Ali Adravi   On 30 Sep 2017  Viewed: 1,554
  • angular2
  • angularjs
  • input
  • output

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: 784
  • angularjs
  • $http
  • $watch

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: 776
  • angularjs
  • directives
  • restrict