Different ways of injecting dependency in an AngularJS Application

When you start learning the very first characteristics of AngularJS, you may come across something called Dependency Injection (DI): the premise that AngularJS injects dependencies whenever an application needs them. As a developer, our task is only to pass the dependency to the module and everything else will be taken care by AngularJS.

To create a controller, we pass $scope object and other dependencies to the module’s controller function. For example, to create a ProductController, we are passing $scope object and Calculator service dependencies. As a developer our job is to pass the dependencies and AngularJS will inject them whenever the application needs them.

As a developer, we really don’t care about how AngularJS injects dependencies – we don’t need to know how the injection process works to develop applications.  However, it is better if we know different ways of passing dependencies. In AngularJS, dependencies can be passed in three possible ways. They are as follows:

  • Passing a dependency as Function Arguments
  • Passing a dependency as Array Arguments
  • Passing a dependency using the $inject service

Let us explore these options one by one.

Passing a dependency as a Function Argument

Perhaps most of the time you pass a dependency as a function argument, which is perfectly fine. For example, we pass a $scope object to create a controller as shown in the listing below:

Read full article on the Infragistics blog

Understanding the Grid Layout in Bootstrap

With each passing day, new devices with new screen sizes are popping up – and as web developers, we need to create web applications that are responsive to these various screen sizes. There are multiple ways you can create a responsive layout, however I find Bootstrap grid layout to be the easiest. In this post, we will cover various aspects of the Bootstrap Grid system with various examples. To start with let us create a four equal column layout for medium-sized devices in Bootstrap Grid system.

image

 

4 equal columns layout

To create the layout, you need to complete the following steps:

  1. Create a div with class container for fixed width or container-fluid for the full width of the screen
  2. Create a div with class row. Div with the class row must be inside container
  3. Create 4 divs for 4 columns. Div of the column must be the immediate child of the row div
  4. Content will be inside the column div

To create four equal columns in a row, I have created four divs with the class set at col-md-3 as shown in the listing below:

Read full article on the Infragistics blog

What is a Provider () in AngularJS?

The provider() function allows us to create a configurable service where we can set input per application for the service created using the provider (). For example, if we need to set API key to access a service on the application level, we can set that in the module config and pass input to the provider using the $provide service. All the others ways to create services internally use the $provide service.

Creating a service using $provide service in module.config

Let us start by creating a very simple service using the provider() function.

	
app.config(function ($provide) {
    $provide.provider('globalsetting', function () {
        this.$get = function () {
            var appname = "Lawyer App";
            return {
                appName: appname
            };
        }
    })
});

Let’s explore what is going on in the above snippet. To create a service using provider, we need to use the $provide service. The provider function of the $provide service takes two parameters: the name of the service and the function. A provider function must have a $get function. To create a simple service using the provider(), we need to perform following five steps:

  1. Inject the $provide service in the app config method
  2. Create a provider using the provider() function
  3. Pass two parameters to the provider() function: the name of the service and a function
  4. The provider function must contain a $get function
  5. Return an object literal from the $get function

We can use the globalsetting service created using the provider by injecting it in a controller as shown in the listing below:

Read full article on the Infragistics blog

Hosting (74th Free) workshop in Chandigarh on AngularJS and Repository Pattern in MVC.

Register for FREE to attend the event

In June last year, I hosted a workshop on AngularJS in beautiful city Chandigarh. I was overwhelmed seeing self-motivated and energetic developers attending the event. It’s their love and continuous request on various social media channel that I am excited to back again.

clip_image001

Yes, I am hosting 5 Hrs. session on AngularJS and Repository Pattern in Chandigarh on 31st January. As always, I will represent Infragistics and whole show is managed by C-SharpCorner.com.

Event will be hosted in Kisan Bhawan Sector 35A, Chandigarh starting at 9 AM and as always it is FREE to attend.

Register for FREE to attend the event

I will be taking two sessions,

Building MVC Application using Repository Pattern (60 minutes)

  • Introducing Repository Pattern
  • Introducing Dependency Injection
  • Creating application using Repository Pattern

AngularJS in a Nutshell (150 minutes)

  • What is AngularJS
  • Controller and controller as syntax
  • $scope and $rootScope
  • Filter and custom filter
  • Routing
  • Services in AngulrJS
  • Provider in AngularJS
  • Service(), Provider(), Factory(), value() and constant()
  • Unit Testing in AngularJS using Jasmine and Karma
  • Getting started with Directives
  • Scopes in directives
  • Components in AngularJS
  • Angular JS project structure

I am very excited for upcoming Chandigarh session. I am sure we will become better developer together. Once again to reiterate some important points about event is given below:

  1. Its absolutely FREE to attend
  2. Venue is : Kisan Bhawan Sector 35A, Chandigarh
  3. Registration starts at 9 AM.

Register for FREE to attend the event

Creating a photo album for ASP.NET MVC 5 Users using Azure BLOB storage

In this blog post, we will integrate ASP.NET MVC with Azure BLOB Storage by saving an image for an ASP.NET Identity 2.0 user in Azure BLOB Storage. We’re going to cover a lot of ground in this post, including:

  • Using ASP.NET Identity 2.0 user as reference in other table.
  • Creating a one to many relationship with ASP.NET Identity 2.0 user table
  • Connecting an ASP.NET MVC application to Azure Storage
  • Creating or Uploading a BLOB
  • Deleting a BLOB
  • Downloading a BLOB
  • Uploading a file from MVC form to a Azure BLOB

The final output of the blog post we plan on creating in this post will look more or less like the image below. As you can see, a user can upload a photo to her album, delete a photo, and of course, view photos too.

image

Architecture of the Application

The High-level architecture of the application can be drawn as shown in the image below:

image

Creating tables to save images

When we create an ASP.NET MVC application using the given MVC template in Visual Studio, by default, a basic authentication gets created using the ASP.NET Identity 2.0. In a default MVC project, a template for the authentication and authorization purpose ASP.NET Identity 2.0 creates the tables as shown in the image below:

Read full article on the Infragistics Blog

Hosted Step by Step ASP.NET MVC workshop for beginners

Each month on the behalf of Infragistics , I host at least one Infragistics Day for the community. Infragistics days are free to attend and we cover various topics such as AngularJS, MVC, JavaScript, WCF, C# etc.

image

On 17th January 2015, I hosted Infragistics Hours in C# Corner Noida office. I this, we did a step by step workshop on ASP.NET MVC. This workshop was targeted to beginners. Five hours workshop was attended by around 80 developers. In the workshop, we covered following topics,

  • What is MVC
  • Understanding Controllers , Actions, and Child Actions
  • Understanding Models
  • Understanding Views
  • Understanding Routings
  • Performing CRUD operation using the database first approach
  • Integrating Ignite UI in ASP.NET MVC

image

Looking forward to host more such events. See you in next event.

Creating Unit Tests for ASP.NET MVC Controllers

In this blog post, we will learn to write unit tests for various MVC controller’s behaviors, such as view’s return types, redirecting to different actions etc. Specifically, we’ll cover writing Unit Tests for:

  1. ViewData of the Controller
  2. TempData of the Controller
  3. ViewBag of the Controller
  4. View of the Controller

Let’s get started!

Creating the MVC Project under Test

Let us go ahead and create a MVC project under Test. To keep things simpler, I have selected ”No Authentication” for the project. In this example we are going to write unit tests for the HomeController. The HomeController contains two action methods:

  1. Index
  2. Details

We are going to write tests for these actions. The HomeController contains code as shown here:

Read full article on the Infragistics Blog

How I did in 2015?

image

I procrastinate, hence this blog post is 12 days late. Nevertheless, I wish Happy New Year to each one of you. May you get best of the life in 2016. Many of us don’t like to read long stories and enjoy reading data in all possible ways. For data lovers here is the summary in a tabular form. However, I strongly request you to read the full story in your sweet time.

Where I was working

image

My Work

image

For me 2015 has been an ok year. Neither anything exceptional nor any fatal bad event did happen in 2015. I took 2015 on a day to day basis.

Did not enjoy as corporate Trainer

I started as a freelancer corporate trainer in January 2015 and could survived as a trainer merely for three months. It is a different kind of competition, trainer community, and vendor eco system. I did around 10 trainings in 3 months, however I realized that I don’t belong to there. I love to teach but certainly I am not a trainer. In three months, I did trainings for following clients-

  • Accenture
  • FactSet
  • Polaris Software

I will keep seeking opportunity to host workshop and teach developers, however not as so called corporate trainer. Life is too short to do the stuff you don’t enjoy, isn’t it?

Resumed as Developer Evangelist at Infragistics

I am a Developer Evangelist by instinct and aspired to enable developers all across the globe.

image

It was April afternoon when I met inspiring Jaosn Beres in one of the posh Delhi hotel. We talked about my career aspirations, strong and weak points etc. During our conversation, Jason asked me – why don’t you represent Infragistics as an evangelist in developer community? He added, you work hard and I will make the path for you to become Infragistics global evangelist. It was an offer, I could not resist. I said YES then and there.

I was Telerik evangelist till April 2014. I confess, for a year I missed being an evangelist. Teaching developers, conducing workshops, hosting webinars, and moreover enabling developers to take right decisions on the products. Jaosn offer gave breath to dying evangelist in me.

I was once again DEVELOPER EVANGELIST of Infragistics starting April 2015. Being an evangelist from April to December for the developers,

  • I wrote 36 articles on various topics like AngularJS, JavaScript, MVC, AZURE
  • I hosted 9 free webinars
  • I delivered 11 talks in various conferences and user group events.

Find recording of all the webinars here

Read all the articles here

I love to be an evangelist, and I am been doing it once again. I will focus on web based products like Ignite UI. I look forward to add more values for Infragistics Developer community in 2016.

Community rocks

image

With help of C-SHARPCORNER COMMUNITY and my personal blog, I have been teaching developers all across the country. I don’t charge to attend my workshops. A thousands of developers attend my workshop, sessions, and Infragistics day. In 2015, I focused mainly on Azure, AngularJS, JavaScript, MVC and Ignite UI.

  • I wrote 63 articles
  • I hosted 14 workshop/session
  • Hosted one session in Mathura village for school students

Looking Forward in 2016

I am very excited about 2016 and I am sure it is going be bigger and better. I look forward to add more values to Infragistics developer community as an Evangelist, to my blog readers by writing quality posts, and doing more sessions/workshop for C-sharpcorner chapter community.

I may become more ambitious also, and why to discard own Startup?😉 Good luck everyone. Have a great 2016.

Getting started with Azure API Apps and Azure MVC web App in Azure App Service

In this article, you will learn how to create Azure API Apps and an MVC client deployed in Azure We App. This is going to be a very simple application connecting various components of Azure App services, and to build it we’re going to use Azure API App, Azure Web App, and SQL Server in Azure. A high level architecture of the application can be drawn as shown in the image below:

image

Essentially, in this post we will learn to perform the following tasks:

  • Make a SQL Connection in SQL database in Azure
  • Use the Entity Framework database-first approach to scaffold a CRUD operation
  • Expose the operations in an Azure API App
  • Configure the swagger API and UI for metadata and API testing
  • Publish the Azure API App in Azure App Service
  • Create client side code using swagger metadata API in an ASP.NET MVC Application
  • Use generated client code in MVC application to perform CRUD operations on a table in a SQL database in Azure
  • Publish the ASP.NET MVC application in Azure Web App

On completion of this post, you should have an Azure API App and an MVC-based Azure Web App running live in the Azure Service. As the output of the article, we have Azure API App running at http://schoolapiapp.azurewebsites.net/swagger/ui/index. We’ve also got an MVC-based Azure Web App running on this URL: http://mvcclientazureapiapp.azurewebsites.net/

In this example I am using Visual Studio 2015, however you can use Visual Studio 2013 too. You’ll also need a subscription to Azure, but you can get a free trial. Let’s get started!

Azure API App

Let us start with creating an Azure API App. To set up the development environment, install Azure SDK. You can download Azure SDK for Visual Studio 2015 from here and Azure SDK for Visual Studio 2013 from here. After successful installation you should get the successfully installed dialog box as shown in the image below:

image

Now your development environment is all set to create your first Azure API Apps. Let’s go ahead and create a new project, by selecting New->Project->ASP.NET Web Application. Give a suitable name to your ASP.NET Web Application, and from the template dialog box choose Azure API App as shown in the image below:

image

After successfully creating the project, do the following:

  1. Delete ValuesController from the Controller folder. We don’t need this controller.
  2. Right click on the Models folder and add a new Item.

To add a new item, select ADO.NET Entity Model from the Data tab and give a name to the model. Here, I am leaving it as SchoolModel.

image

In this step, in the Entity Data Model Wizard, select EF Designer from the database option and click on Next as shown in the image below:

image

Let us take a moment here and understand what are we going to do in next step. Here we will be connecting to a School database which is inside the SQL databases in Azure.

image

To connect to a SQL database in Azure, you need to perfom following tasks:

  • Add a client IP to the database server Firewall rule in the Azure portal
  • Provide a database server name in Azure
  • Provide a username and password using SQL Server authentication
  • Select the required database and click on OK

You may want to refer to the images below to provide information to connect to a database in Azure:

Read full article on in Infragistics Blog

How to Create a YouTube AngularJS Directive

I have often seen, developers come across requirement to embed a YouTube video in an AngularJS application. In this post, we will learn to create a simple YouTube AngularJS directive and also to use some of the popular directive from the GitHub.
We will follow step by step approach to create the YouTube custom directive. So let us start with create module and the controller.

var myApp = angular.module('myApp', []);
myApp.controller('VideoController', function ($scope) {
    $scope.video = 'zRtPUIumXcY';
});

Next we will create a custom directive with the isolated scope. Let us go ahead and create YouTube directive with following characteristics

  • Directive will be used as an Element
  • Directive will work in the isolated scope
  • Directive replace property is set to true, such that user will not able to view the directive information in the browser
  • In the template, iframe is used to play the YouTube video.
  • In the link function, we are watching the object passed to directive. Whenever value of object changed, directive will play the different video from the YouTube.

By putting all above together, directive is created as shown in the listing below:


myApp.directive('angularYoutube', function ($sce) {
    return {
        restrict: 'E',
        scope: { video: '=' },
        replace: true,
        template: '<div style="height:300px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="1" allowfullscreen></iframe></div>',
        link: function (scope) {
            scope.$watch('video', function (newVal) {
                if (newVal) {
                    scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
                }
            });
        }
    }
})

As you might notice in above listing that in the template, we are using the iframe to play the YouTube video. Also we are watching the value passed to the directive and constructing the URL using the $sce service of AngularJS.
On the view, angularYoutube directive can be used as shown in the listing below:

<div ng-controller="VideoController">
        <angular-youtube video="video"></angular-youtube>
    </div>

As of now, we should able to play a video in AngularJS application. Right now we are passing hard coded video code from the controller. We can allow user to pass the video code, just by using an input textbox as shown in the listing below:


<div ng-controller="VideoController">
        <input type="text" ng-model="video" placeholder="enter video code here to play"/>
        <hr/>
        <angular-youtube video="video"></angular-youtube>
    </div>


Here we have created a very simple custom AngularJS directive to embed the YouTube video in the AngularJS application.
For advanced scenarios, you may want to use Angular YouTube Embed . I find it very useful for advanced scenarios. I hope you find this post useful. Thanks for reading.