June 30, 2017 by Rahul

vendor-manifest.json

Hi Friends,

Thought to share one of the errors which I usually face, whenever I switch machine. Scenario is I am working on any greenfield project which is basically an angular 4 project with asp.net core. I have a habit of keeping my code on source control which is git in this case. However, when I clone the same on different machine and install my usual dependencies with npm install; soon after that when I run my app, it gives me below error.

Continue reading “Cannot find module ‘./wwwroot/dist/vendor-manifest.json” »

April 1, 2016 by Rahul

Lazy Loading is Missing in Entity Framework 7

Hi Friends,

I thought to share my yet another experience with Entity Framework 7 where Lazy Loading is still not implemented. I was actually designing my Movie-Review API and soon after that I realized that results are unexpected, hence without wasting time, I directly checked with Microsoft. Here, is my conversation with Microsoft.

Continue reading “Lazy Loading is Missing in Entity Framework 7” »

September 13, 2015 by Rahul

Learning Angular JS in 2 Hours – 3rd Part

Download Code:- https://github.com/rahulsahay19/movieReview-SPA-Demo

However, if you would like to learn the stuffs from the scratch and code along. you can refer the below stuffs.

Getting Started with Angular JS :- http://bit.ly/ng-kindle
Building SPA with Angular and MVC 5:- http://ow.ly/Jh4bI

Demo Site:- http://moviereview.rahulsahay.com/#/

Thanks for Joining Me!

Thanks,
Rahul Sahay
Happy Coding
CodeProject

September 7, 2015 by Rahul

Learning Angular JS in 2 Hours – 2nd Part

Hi Friends,

This is the continuation of last Part.

Will release other videos on the same shortly. Till then, stay tuned and Happy Coding.

Thanks,
Rahul Sahay
CodeProject

September 5, 2015 by Rahul

Learning Angular JS in 2 hours

Hi Friends,

In this section, I have started explaining building simple App using Angular, MVC, Web API and other bunch of stuffs. Here, I have recorded few videos to give the glimpse, how I usually get started.

Will Publish another videos shortly. Thanks for Joining me.

Thanks,
Rahul Sahay
Happy Coding
CodeProject

May 24, 2015 by Rahul

WEB API Management -1st Part

Hi Friends,

In this section, we’ll talk about WEB API Management. Now, from the high level, it’s look very much like Managing WEB API. Here, we need to talk about two things.

1) You build a Web API and decide to do business with that means you want to sell that API, already bunch of people doing the same. Like you want to sell services like messaging service, phone call service may be anything. So, you will monetize that.

2) Scenario 2nd is you will be indirectly monetizing the APIs means you will be doing business indirectly. Fine example for the same is; you partner with some business and they get access to your service. Basically, it will help other companies for the integrated experience.

So, once you decided that you are going to experience one of these scenarios. Then, WEB API Management is best for you. Out of the box, it also helps to keep documentation side by side. Consider a scenario if you have given tons of API without documentation; this will be worst scenario to handle. So, from a developer perspective if you are writing any API and you want to put the documentation then and there. Then, WEB API management is again a good choice.

One more scenario which I would like to emphasis here, let’s suppose you want to launch marketing Campaign and you don’t have analytics embedded with API; then you can’t even think of doing that. However, with Website you can do the same exclusively by incorporating google analytics and other stuffs. But, if you are writing any API from scratch then you need to think of key management, access, analytics in the backend and other important things. But, with turnkey service API Management all these things will go away. So, I can have any WEB API hosted anywhere on any service provider; but Azure WEB API Management will sit in front of that. So, as you see below in the screen shot, developers develop/write APIs that calls their APIs via Azure proxy. And this is where all magic happens, like analytics and other much needed behavior for WEB API done here.

Now, from Azure portal you can create WEB API management as shown below in the screen shot.

Once, the API management, portal created, you can go ahead and click on Manage link. This will open new dashboard for API Management as shown below in the screen shot.

Now, here you can do all sort of things like adding new API or importing an existing API and set bunch of rules here on the same and then monitor the same on timely basis.

Then, you can add operations to it like shown below with documentation to that.

Once, it got added successfully, then you it will bring you back to the orignal screen as shown below with API added.

Next thing i need to do is to add the same in the products. Now, this is the place where you can change the behavior or apply policies. Here, you will add your APIs to the product. Below is the screen shots for the same.

Now, once i added the API to the products page. I need to publish the same as well.

Once done, then i will click on developer portal link; then this will open developer’s dashboard for the same. So, as i said there are two things publisher and Developers. We have published our API 1st and now its available for developer’s portal.

Now, when you click on APIs link, it will list your newly added API.

Now, below you can see variety of options to call the API means from different backend. One point to note here; in order to make a request you need to have a valid subscription id else this will result 401 error message as shown below

However, you can achieve the same from the azure window itself.

Now, this is the actual api http://moviereview.rahulsahay.com/api/movies which is getting fetched via Azure WEB API proxy.

Once this is done. you can now check it’s analytics in the API Management window as shown in the below screen shot.

with this i would like to wrap this session here. We’ll delve more in the coming session on the same. Till then stay tuned and Happy Coding.

Thanks,
Rahul Sahay
Happy Coding

CodeProject

February 18, 2015 by Rahul

Glimpse of Building SPA with MVC 5 and Angular

Hi Friends,

It gives me immense pleasure to share the 1st chapter of this book.

Contents

Chapter 1: Getting Started
WHAT DO you find in this CHAPTER?
Introduction
What is SPA
Technologies used to build SPA
Glimpse of Movie Review App
Summary

Chapter 2: Creating Solution from blank slate
WHAT DO you find in this CHAPTER?
Introduction
Solution Creation
Adding Project References
Adding Packages
Important Tools
Data Technologies
Creating Models
Creating Entity Framework
Database Initializer
Implementing Repository Pattern
Creating Unit of Work Pattern (UOW)
Summary

Chapter 3: Implementing Web API
WHAT DO you find in this CHAPTER?
Introduction
Creating 1st Web API Controller
Implementing HTTP Put Request
Implementing HTTP Post Request
Implementing HTTP Delete Request
Improvising Web APIs
Adding More Controllers
Testing Web APIs with QUnit
Summary

Chapter 4: Getting Started with Angular JS
WHAT DO you find in this CHAPTER?
Introduction
Getting started with PLNKR
Getting started with UI Design
Creating 1st Angular Controller
Data-Binding using Angular
Retrieving Data from API
Summary

Chapter 5: Deeper into Angular JS
WHAT DO you find in this CHAPTER?
Angular JS Routing
Adding More Routes
Client side validation
Saving Data using Angular
Creating Angular JS Service
Creating Movie Edit Feature
Creating Reviews Workflow
Summary

Chapter 6: Unit Testing
WHAT DO you find in this CHAPTER?
Introduction
Creating Test Project
Installing Chutzpah Test Adapter
Writing 1st JavaScript Test
Writing Angular Test
Using $httpBackend Service
Writing Controller Tests
Code Coverage
Summary

WHO SHOULD TAKE THIS BOOK

Building SPA using MVC 5 and Angular is designed to build the application right from the grass root level. This Book is actually targeted to those people who are comfortable with ASP.NET MVC and Angular as this needs basic knowledge of both the technology. Throughout this book my focus will be on teaching you making a full blown application rather than explaining basics. For basics you can check my other book Hands on With ASP.NET MVC. This book talks basics in great details with live demo in Azure. You can refer this book at this URL http://ow.ly/JetAi. I would recommend you to download the app from github URL shown below to help you while building https://github.com/rahulsahay19/MovieReview-Angular-Prod

Chapter 1: Getting Started

WHAT DO you find in this CHAPTER?

Introduction
What is SPA
Technologies used to build SPA
Glimpse of Movie Review App
Summary

Introduction:-
Hi my name is Rahul Sahay and I am going to introduce this whole new story of building Single Page Application right from the scratch. Here, in this context I am going to talk about bunch of different client/server side technologies and demonstrate how these small pieces marry together and creates a robust End to End application. So, without wasting time let’s get started.

What is SPA:-
Single Page App is all about user experience. People will love your app if you give them nice user experience which not only fits nicely in your laptop or desktop rather it goes nicely with multitude of devices like tabs, phones etc without breaking any single functionality. As shown in the below diagram, these are basic requirements for building any SPA.

Reliability: – People know that it’s reliable and it’s going to work. This kind of reliability only comes with positive experience.
Responsiveness: – Responsiveness means it’s going to work quickly for them. Quick is the key thing which any user expect to have in the app which he is using.
Reach: – Reach is often substituted with mobility. Mobility is again one of the key ingredient which every user is looking for. They always want to have the data handy with irrespective of what device they are on.
Available: – This thing is really important when it comes to the point at working offline. So, delivering a good user experience is must while building SPA.

“So, in a nutshell a Single Page App is web application which fits in a single page providing a fluid UX by loading all the necessary data in a single load.”

Now, apart from this there are many other attributes linked to SPA. They are:-

Maintain History: – When you flip between pages, it maintains your history in the same order how you visited them. Actually, it’s not going on different pages rather its loading different information’s on the same page. But, it looks to user that it’s presenting different pages to them.

Persisting Information: – Persisting information is also very important aspect of the SPA. It doesn’t mean that you need to save each and every thing at cache but you can store important things in the cache to improve the performance.

Mostly loaded on Page Load: – Mostly loaded on the page load means majority of information user required to use gets loaded initially itself to avoid roundtrip back to the server.

Dependent Elements: – As and when user requires to access different features of the application, app will go and download for the user.

Technologies used to build SPA:-

Movie Review app is built using tons of different client side and server side technologies. Some of these I have listed below:-

Client Side Technologies:-

HTML 5 & CSS
Modernizer & LESS
Media Queries
Responsive Design
Angular JS
Toastr JS
JQuery
QUnit JS
JQuery.MockJSON
Change Tracking
And many out of the box things

Server Side Technologies:-

SQL Server
Entity Framework – Code First Approach
Repository Pattern
Unit of Work Pattern
Web API
JSON & AJAX
NuGet
Ninject IOC
POCO Models

Glimpse of Movie Review App:-

I think it would be good idea you to show you finished app before directly jump in creating the same. Here is the URL http://rahulsahay19-001-site1.smarterasp.net/#/ where I have hosted my app. Now, when you click on this, you will land on the below shown page.

Above shown screen shot is the home page of the app. Now, when you click on the Movies link, it will take you to the below shown page.

Once, page gets loaded, little toast message at the bottom right of the screen pops up saying Movies Fetched Successfully. Now, from this screen you can do all the CRUD Operation. Here the very 1^st link is Add Movie, which will give user flexibility to go ahead and add any new movie as shown below.

Now, let’s suppose if we try to post the Form as it is blank, then it won’t allow, because above fields are required as marked by its CSS color and star mark as well. Now, once I enter any information, different validation will get triggered

Even at this moment I cannot submit the form as the form is invalid. Once, I modify and enter valid details, then form error messages and its error color (Red) will disappear.

Now, at this instant I can go ahead and submit the movie. Once I click submit button; one toast message will appear saying Data Saved Successfully and will get redirected back to movies link.

Next is the Edit link corresponding to the movie. When you click on this, it will present the below screen for editing the same.

Here, also each and every validation will be there, what we have seen during creation. However, you can go ahead and edit anything over here, let’s say I change the year to 2002 and update.

Once I update the movie it will save the same in database and then get redirected to Movies link as shown below.

However, let me change the same back to the original one as it’s not correct. Similarly, you can go ahead and delete the movie from the Edit link as well. Next to Edit link, there is link for Reviews as well. From this link you can go ahead and add new review as shown below.

Here, when I click on Add New Review, it will take me to the below form.

Above form has also got different set of validations as shown below.

Once done all the corrections, it will be like this

After successful, submission, it will redirect back to the movies link.

After adding Review, position of newly added movie moves up in the list as behind the scene order by clause is working on total no of reviews. Now, when I click on the Reviews link again, it will show me the review which I have added.

Here, corresponding to the Review, new Edit link also got enabled for editing or deleting the Review. This also works same what I explained above for Movie. About App link lists all the details of the application like what technologies used what tools you need, where to download the code etc….

I have also used QUnit Library to test my Web APIs. Below is the glimpse for the same.

When you click on any individual test, it will present you the detailed results as shown below in the screen shot.

And if there is anything wrong with any end points, let’s suppose that doesn’t exist; easiest way to break the test, then it will be like

You can also verify these APIs like shown below

http://rahulsahay19-001-site1.smarterasp.net/api/movies

Similarly different endpoints can be tested. Apart from Web API tests. I have also used Jasmine to test my Angular code. You will also learn how to test client side JavaScript code with Visual Studio. Here, I have used Chutzpah to integrate JavaScript Tests with Visual Studio. Below is the glimpse for the same.

Now, when I check code coverage results for my tests, Chutzpah will open a new window in browser with the code coverage results for the client side as shown below in the screen shot.

The ones which are highlighted in red are the ones which are not covered 100%, so when I click on any of this link, it will open the code in browser and show what is covered and what is not

Glimpse of Movie Review Solution:-

Let me go ahead and show you the solution structure of finished app. Below in the screen shot, I have 5 different projects. Each is having its on dependency and responsibility.

Here, the highlighted one is the web project which is dependent on other infrastructure projects Data, Contracts and Model. Data project is the place where in you maintain initial seed data, Entity Framework DBContext and many more things involve direct interfacing down the layer with database. Data Contract is the place where in you manage your repositories and apply Unit of Work Pattern on repositories like movies and moviereviews. Model is the place where you will be having your POCOs (Plain Old CLR Objects). This is the place where in you are maintaining all properties attributed to the tables. Below is the glimpse of all projects in its expanded form.

Summary:-

In this section, we have seen the bits and bytes of the Single Page Application which we are going to make using tons of client/server side framework. We have also seen the glimpse of app and solution. In the next section, we’ll begin the learning by creating the application right from the scratch. I would recommend you to download the app from github URL shown below to help you while building https://github.com/rahulsahay19/MovieReview-Angular-Prod .

I hope you have enjoyed the glimpse. More more info you can have the same from the below mentioned link.

http://ow.ly/Jh4bI

Thanks,
Rahul
Happy Coding

December 14, 2014 by Rahul

Glimpse of Single Page App using ASP.NET MVC 5 and Angular

Hi Friends,

It’s been long since i blogged any thing but it’s ok as i was working on one of the assignments which i shared few days back where in i’ll be wiring up bunch of technologies to make a robust SPA. Here, is the glimpse of the app what i have been working on.

Looks like my git shell has been corrupted, hence not able to push images in git. not a problem, will fix the same some time later, but for now let me upload images here itself.

However, below is the solution structure for the same. However, this is still incomplete as i have not yet added the testing project. But that’s ok, will be adding shortly and publishing the same shortly…Now, below is the glimpse of variety of technologies used so far to make this app…

so, the one showed below is the web project rather web api project talking to and fro with my other projects listed here. Here, the crucial things are api controllers and my client side scripts “Angular” here for delivering the same back to UI. Other projects are equally important where in one is having models project which is keeping my plain classes then contracts project which is the medium for Unit of Work Pattern and Repository Pattern. Then the last one is Data project where Entity Framework is playing it’s role. Here, I have also used design principles like Single Repository principle to keep the things simple and clean and Factory Pattern to create the required instance in case if that is not created earlier by the app. Like this there are variety of out of the box things i used in this app which you will experience once you start building this app right from the blank state.