How to work with the Bootstrap DropDown in AngularJS

Read full article on the Infragistics blog

In this post we will learn how to work with the Bootstrap dropdown in an AngularJS APP. In a step by step by approach, we’ll cover how to:

  1. Bind a dropdown with the controller;
  2. Select an item in the drop down and pass to controller;
  3. Bind a dropdown with the Web API

Bootstrap dropdown

A simple bootstrap dropdown button can be created as shown in the listing below:

image

In the dropdown we’ve created above, we will be navigated to another view or page on selecting an item and all the items are hard coded in the dropdown.

Bootstrap dropdown with AngularJS controller data

Now let us assume that we need to create a bootstrap dropdown in the AngularJS application. To create that, first we need to make sure that the reference of bootstrap CSS is added in the project, as shown in the listing below:

image 

Next let us create AngularJS controller. In the controller there is an array called subjects which will be bound to the bootstrap dropdown. The controller can be created as shown in the listing below:

image

Read full article on the Infragistics blog

Understanding scopes in AngularJS custom Directives

Read full article on the Infragistics blog

In this post we will learn about different kinds of scopes in AngularJS custom directives. First we’ll start with a high level introduction of directives and then focus on scopes.

Directives

Directives are one of the most important components of AngularJS 1.X, and have the following purposes:

  1. Gives special meaning to the existing element
  2. Creates a new element
  3. Manipulates the DOM

Mainly, directives perform either of the following tasks:

Manipulate DOM

  • Iterate through data
  • Handle events
  • Modify CSS
  • Validate data
  • Data Binding

Even though there are many built-in directives provided by the Angular team, there are times when you might need to create your own custom directives. A custom directive can be created either as an element, attribute, comment or class. In this post, a very simple custom directive can be created as shown in the listing below:

image

While creating custom directives, it’s important to remember:

  • The directive name must be in the camel case;
  • On the view, the directive can be used by separating the camel case name by using a dash, colon, underscore, or a combination of these.

Scopes in Custom Directives

Scopes enter the scene when we pass data to custom directives. There are three types of scopes:

  1. Shared scope
  2. Inherited scope
  3. Isolated scope

Read full article on the Infragistics blog

A Step-by-Step Guide to Working with the ASP.NET Web API and AngularJS

Read full article on the Infragistics blog

In this post we will learn to work with AngularJS and ASP.NET Web API in a step by step manner. I’ll assume that you are already familiar with some of the basic terms like what AngularJS and a Web API is, and we’ll work in a hands-on way, fetching data from the database and displaying that in an AngularJS application using the following:

  • Database in the SQL Server
  • Data model using Entity Framework database-first approach
  • The ASP.NET Web API
  • Using the Web API in an AngularJS application

Essentially, data resides in the SQL Server database and is exposed as JSON data using the ASP.NET Web API. We then consume the JSON data from the ASP.NET Web API in the AngularJS application.

Setting up the Database

Here we have a table named city with the following columns:

The table is populated with the following data:

This table is inside the SQL Server, and we’ll connect to SQL Server using the Entity Framework database first approach.

ASP.NET Web API

Let us go ahead and create a Web API project in Visual Studio. To do this, select File->New Project-> Web Application>Web API as shown in the image below.

On clicking Ok, we can verify in the solution explorer that a web API project has been created.

Creating the Data Model

Next, to create the data model we’re going to follow the Entity Framework database first approach. To do this, right click on the Model folder in the project and select Add new item.

Read full article on the Infragistics blog

Free Infragistics Live Webinar – Learning SOLID Principles Using C#

 

Reserve your seat here

As part of the webinar series in the India time zone, Infragistics is hosting another webinar on the –Learning SOLILD principles using C# . I am excited to share that I will be hosting this webinar along with my colleague Anand.

Webinar is on 19th June from 3 PM to 4 PM IST.

Register for the webinar here

About the Topic

SOLID principles are the five basic principles of object-oriented programming and design. Systems created using these principles are easy to extend and maintain over time, making them a wise choice. But where do you begin to learn about them?

In this upcoming webinar, we’ll explore all of the basic SOLID principles, including:

  • The Single responsibility principle;
  • The Open Closed principle;
  • The Liskov substitution principle;
  • The Interface segregation principle; and
  • The Dependency Inversion

Additionally, you’ll learn how to create a system by adhering to the SOLID principles we explore, using C# as a language to understand the principles.

Register for the webinar here. I am excited to see you in the webinar.

Teaching AngularJS and Ignite UI in Chandigarh- Join me on Saturday 13th June for Free

Learn more about Ignite UI here

image

I am excited to share that,

For free I am going to teach you AngularJS and Ignite UI with the help of C-Sharpcorner chapters in the beautiful city Chandigarh. You can attend the class for free.

To attend register here

It is scheduled to happen at – Kisan Bhawan Sector 35A, Chandigarh, 160036

In my talk I will cover the following topics,

Ignite UI

  • What is Ignite UI
  • Why you need Ignite UI
  • Exploring different controls
  • Exploring Ignite UI with HTML5 and jQuery
  • Exploring Ignite UI with MVC

AngularJS

  • Setting up Visual Studio for AngularJS
  • Understanding $scope, $rootScope, and scope hierarchy
  • Controller and nested controllers
  • Services
  • Routing in AngularJS
  • Custom Directives with isolated scopes
  • IgniteUI and AngularJS

I am excited to see you in Chandigarh. Happy Coding.