AngularJS Examples

• Overview

  In this section, we will be introduced to AngularJS and will understand the basics of AngularJS.  Use left side panel to go to respective posts.
  1. Expressions
  2. Filters
  3. How to setup AngularJS?
  4. Conroller
  5. Services

• Data Binding

  In this section, we shall learn different ways and approaches of data binding in AngularJS.
  1. One way data binding
  2. Two way data binding

• Components

  In this section, we shall learn about different components of AngularJS.
  1. Templates
  2. Directives

• Controllers

  In this section, we shall understand how to's related with controllers. To know basic details about controllers and how to create it, click here.
  1. Attaching functions
  2. Passing arguments to controller methods
  3. Controller scope Inheritence

• Repeaters

  In this section, we shall learn how to work with collections and how to repeat the items of the collections to list the records.
  1. Listing from array
  2. Listing from array
  3. List from JSON collection
  4. Add item to collection
  5. Remove item from collection

• Filters

  In this section, we shall learn how to user Filters in AngularJS. To know about filters in AngularJS, click here.
  1. lowercase and uppercase
  2. Number and currency
  3. Limit characters
  4. Date formatting
  5. Simple filter
  6. Object property filter
  7. Exact or contains filter
  8. Custom filter function

• Directives

  In this section, we shall learn about Directives, how to create different types of custom directives, adding event listeners to directives, directives that can manipuates DOM element, using templates for directive etc.
  1. Custom directive
  2. Custom directive with templateUrl
  3. function with templateUrl
  4. Restricting custom directive
  5. Isolating scope of directive

• Events

  Events are action or occurence detected by browser on a particular type of action by the end user. There are many types of events Click DblClick Mouseover Mouseout MouserEnter MouseOut Keypress Keyup Keydown etc. In this section, we sh ...
  1. ng-click event
  2. AngularJS - Double click event
  3. Mouse events
  4. Key events
  5. Change events
  6. ng-submit events

• Conditional Display

  In this section, we shall learn how to display a particular element based on conditions in AngularJS.
  1. Show/Hide
  2. Switch in AngularJS
  3. If condition in Angular
  4. Include

• Forms & Validations

  In this section, we shall learn how to interact with form elements in AngularJS.
  1. Validate values
  2. Checkbox
  3. Radio buttons
  4. Select - Drop downs
  5. Input validation advance
  6. How to bind the custom error message to the form based on control state in AngularJS?
  7. How to attach a custom trigger to update model in AngularJS?
  8. How to delay model updates in AngularJS?
  9. How to perform validation using custom directive in AngularJS?

• $http service

  In this section, we shall learn server call related services in AngularJS that is used to send asynchrnous request to server and receive response. In AngularJS, communication to the server is done using $http service. As per official website of Angu ...
  1. $http.get method example
  2. $http.post method example
  3. $http.put method example
  4. $http.delete method example

• CSS Class & Style

  In this section, we shall learn how to work with CSS styles and AngularJS CSS Classes.
  1. CSS Style
  2. Dynamically set CSS class

• Caching

  In this section, we shall learn caching in AngularJS where we will cache data temporarily in the browser memory. For this we shall use AngularJS $cacheFactory service.
  1. Add into cache
  2. Read / Update cache
  3. Remove from cache