AngularJS Tutorial

CRUD Operations with AngularJS, RequireJS and WebAPI

AngularJS is most popular MVW JavaScript framework for single page application development. Also, Visual Studio is the best IDE in world to develop your app using JavaScript framework which you love.

 

Enabling AngularJS IntelliSense in Visual Studio 2013

Today, AngularJS is most popular JavaScript framework to develop single page application. If you are using Visual studio as an IDE for developing your app in angularjs, intellisense support for angularjs help you a lot to develop your application. By default, Visual Studio 2013 doesn't provide better intellisense support while writing AngularJS code.

 

Understanding ng-repeat special variables

The ng-repeat directive has a set of special variables which you are useful while iterating the collection. These variables are as follows:

 

Understanding ng-if, ng-switch and ng-repeat directives

AngularJS provides you ng-if, ng-switch directives to display HTML elements based on conditions or cases. ng-repeat directive is used to generate HTML from a collection of items.

 

Understanding $watch(), $watchgroup() and $watchCollection() methods of scope

Angular uses $watch APIs to observe model changes on the scope. Angular registered watchers for each variable on scope to observe the change in its value. If the value, of variable on scope is changed then the view gets updated automatically. $watch APIs has following methods to observe model changes on the scope.

 

Understanding cookies in AngularJS

AngularJS provides ngCookies module for reading and writing browser cookies. To use it include the angular-cookies.js file and set ngCookies as a dependency in your angular app. This module provides two services for cookie management: $cookies and $cookieStore.

 

Understanding $emit, $broadcast and $on in AngularJS

AngularJS provides $on, $emit, and $broadcast services for event-based communication between controllers.

 

Understanding AngularJS digest life-cycle

The digest loop is responsible to update DOM elements with the changes made to the model as well as executing any registered watcher functions.

 

Understanding AngularJS scope life-cycle

Scope data goes through a life cycle when the angular app is loaded into the browser. Understanding the scope life cycle will help you to understand the interaction between scope and other AngularJS components.

 

Understanding Data Binding in AngularJS

AngularJS data-binding is the most useful feature which saves you from writing boilerplate code (i.e. the sections of code which is included in many places with little or no alteration).

 

Understanding scope inheritance in AngularJS

The $scope object used by views in AngularJS are organized into a hierarchy. There is a root scope, and the $rootScope can has one or more child scopes.

 

Bootstrapping angular app based on multiple modules

AngularJS is automatically initialized for one module. But sometimes, it is required to bootstrap for multiple modules and it can be achieved by using two methods:

 

Understanding jQLite or jQuery Lite

jQLite is a subset of jQuery that is built directly into AngularJS. jQLite provides you all the useful features of jQuery. In fact it provides you limited features or functions of jQuery.

 

Understanding AngularJS Bootstrap Process

Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is downloaded to the browser and the document.readyState is set to complete. At this point AngularJS looks for the ng-app directive which is the root of angular app compilation and tells about AngularJS part within DOM.

 

Understanding AngularJS Routing

Routing is a mechanism which helps you to divide your single page application into multiple views and bind these views to corresponding controllers. In this article, you will learn how to configure angular routing.