Friday 1 May 2015

Using Report Viewer with Dataset Asp.net Csharp and vb



For Using Report Viewer in Asp.net or Desktop Application using Csharp or Visual basic I am today providing a simple step by step solution -

Demo File is also available to Download so that you can have a demo for how to use or Use Reports With Dataset in Asp.net . I have provided Both Csharp and Vb code

Step 1 - First of Start a C# Project or Vb Project and then Add an Empty Webform to it .




Step 2 :- Now Right Click on Solution in Solution Explorer and Click on Add then click on New Item . Then Click On DataSet and Give a Name and Click Ok . This will add a Dataset in your Project . I will recommend it give dataset a name similar to database table whose data you want to show in Report Viewer

Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet
Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet


Step 3 :- Now After Dataset is added Right Click on Dataset Page and Click on Add then click on DataTable It will add a DataTable

Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet
Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet


Step 4:- Now Add Columns to DataTable and Must Ensure that the name of these DataTable column must be same to Names of Columns in Database that Corresponds to this DataTable

Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet
Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet

Step 5 :- Now Again Right click on solution in Solution Explorer and Click on Add then click on New and then click on Report give it a name and click on ok . This will add a Report to your Project

Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet
Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet

Step 6 :- Now From You Controls Toolbox in Visual Studio . Place a Report Viewer Control on your WebPage as shown in image below


Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet
Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet


 Step 7 :- Now Open your Recently Added Report file you will see it same as shown below


Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet
Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet


Step 8 :- Now we need to Add the Previously added dataset or need to link the dataset we added in previous steps to the report file

Step 9 :- So for that linking Right Click on Dataaset folder in sidebar of Report Then Click on Add Dataset then you will see the following screen

Step 10 :- Now select the Added Dataset from Combox for DataSource and then after that Choose the DataTable from Next Last Combobox


Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet
Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet

Step 11  :- Now Dataset Fields will be added Under Dataset folder in Left Sidebar of Report . Now you can Drag drop fields from Left Sidebar and also Place the Textbox for Labelling like I have added for ID,Name and heading etc



Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet
Using Report Viewer with Dataset Asp.net Csharp and vb , Using Reporting in asp .net dotnet

Step 13:-  Now we need to Add the Code so Open Cshar Code side of Webpage where you have added the Report viewer control And Add the following code according to your choose language c# or vb

Now At Page_Load Event of your WebPage Add the Following Code According to C# or VB


Imports System.Data
Imports System.Data.SqlClient
Imports Microsoft.Reporting.WebForms

        'VB CODE
        ReportViewer1.ProcessingMode = Microsoft.Reporting.WebForms.ProcessingMode.Local
        ReportViewer1.LocalReport.ReportPath = Server.MapPath("~/Report.rdlc")

        Dim dsUsersInfo As New DataSet1
        Dim con As New SqlConnection("Your Connection String")
        Dim cmd As New SqlCommand("select * from YourTableName", con)
        Dim da As New SqlDataAdapter()
        da.SelectCommand = cmd

        'DataTable1 is the DataTable we have created in Dataset1 that contains our columns
        da.Fill(dsUsersInfo, "DataTable1")


        Dim datasource As New ReportDataSource("DataSet1", dsUsersInfo)
        ReportViewer1.LocalReport.DataSources.Clear()
        ReportViewer1.LocalReport.DataSources.Add(datasource)


        'CSharp Code
        'ReportViewer1.ProcessingMode = Microsoft.Reporting.WebForms.ProcessingMode.Local
        'ReportViewer1.LocalReport.ReportPath = Server.MapPath("~/Report.rdlc")

        ' DataSet1 dsUsersInfo = new DataSet1();

        '        SqlConnection con = new SqlConnection("Your Connection String"));

        '            con.Open();
        '            SqlCommand cmd1 = new SqlCommand("select * from TableName", con);

        '            SqlDataAdapter da = new SqlDataAdapter(cmd1);
        '            da.Fill(dsUsersInfo, "DataTable1");
        '            con.Close();

        '        ReportDataSource datasource = new ReportDataSource("DataSet1", dsUsersInfo.Tables[0]);

        'ReportViewer1.LocalReport.DataSources.Clear()
        'ReportViewer1.LocalReport.DataSources.Add(datasource)




Step 12 :- Now when you run the Page where you have added the Report viewer control It will show the Report with data from database


Parse Error The base class includes the field ‘reportViewer’, but its type (Microsoft.Reporting.WebForms.ReportViewer) is not compatible with the type of control (Microsoft.Reporting.WebForms



Parse Error Message:the base class include the field 'reportviewer1',but its type (Microsoft.reporting.webforms.reportviewer) is not compatible with the type of control (Microsoft.reporting.webforms.reportviewer)

This Error Occur due to Usage of different version of ReportViewer in Same .Net Project . It may happen when you have referenced a different version of ReportViewer dll files as compared to Version of Report Viewer dll ReportViewer Control is using and referenced in web.config file

So we need have same version of Report Viewer dll file in web.config file that matches with Control using and as well as version that we have referenced .

So Dll File we are using is - Microsoft.Reporting.WebForms .

Fix For This Error - 


Go to your web.config file and Search for following code -

    <add path="Reserved.ReportViewerWebControl.axd" verb="*" type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" validate="false"/>

YOU CAN SEE VERSION IN ABOVE CODE "VERSION=10.0.0.0" OR IT MAY BE 11.0.0.0 OR BELOW 10 .SO WE NEED TO MAKE REFERENCE TO SAME ASSEMBLY IN ORDER TO MATCH THE VERSION OF ASSEMBLY REFERENCED WITH CONTROL USING ASSEBLY
SO HERE CONTROL IS USING 10.0.0.0 VERSION OF ASSEMBLY

STEP FOR FIX Parse Error 

1. Right Click on your Website or WebApplication in Solution Explorer
2. Then Click on Add Reference 
3. Then Search For Reporting
4. Then Checkmark the Checkbox for Microsoft.ReportViewer.WebForms with Same Version  10.0.0.0 or other that is available in your web.config
5. Now Click ok 
6. Rebuild Your Solution and Now Error Should be Resolved

If Any Problem Exist Still then Feel Free to Put your Query In Comment Here .

Thursday 30 April 2015

Bootstrap dropdown menu not working


Today Twitter Bootstrap has become a basic need of the Website Development . Today i am giving some explanation regarding a common mistake while using Twitter Bootstrap . This mistake will happen only when you are trying to create a Navigation Bar for your website / webapplication using Bootstrap NavBar .

So , In order to create a NavBar we must require 3 files -

1. Bootstrap.css file
2. Jquery.js file
3. Bootstrap.js file

So Bootstrap.css file is used for Design and look of Navbar and Now the most important thing due to this you may suffer from an error -

Bootstrap dropdown menu not working 

So , Ever you suffer from this a simple solution is you must first include the jquery.js file or any version of jquery.js file as you wish as shown in example below and then after jquery file you can include bootstrap.js file 

If it still does not work just include the following script code after including the above two js files

<script>
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });
</script>

A Simple Example of Twitter Bootstrap Navbar is Below :-



<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });
</script>




   
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>

       
         <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Manage Users <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
        </li>
      </ul>
    <div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
     
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


    </div>
    </form>
</body>
</html>

Tuesday 28 April 2015

ASP.NET MVC Action Return View Not Changing URL

The return View(.......) in Action of Controller is the statement that we use to return the view View for a Particular Controller Request . But Return view will return the view exactly you want and render the view but it will not change or target the user to target url  . The simple solution is below -


Code For an Action -

[HttpPost]
public ActionResult Start(SomeViewModel someViewModel)
{
  ...
  return RedirectToAction("SomeOtherAction");

              
                             or


  return RedirectToAction("Action Name", "Controller Name");
}

So , In code above We are using RedirectToAction instead of using  return view this can be used in total of 6 variants .

I have give 2 of simple one . In Parameter to these actions you need to pass the controller and action name according to variant you choose


Sunday 22 March 2015

The cockroach theory for self development - The Persuit Of Happyness


At a restaurant, a cockroach suddenly flew from somewhere and sat on a lady. She started screaming out of fear. With a panic stricken face and trembling voice,she started jumping, with both her hands desperately trying to get rid of the cockroach. Her reaction was contagious, as everyone in her group also got panicky. The lady finally managed to push the cockroach away but ...it landed on another lady in the group.

Now, it was the turn of the other lady in the group to continue the drama. The waiter rushed forward to their rescue. In the relay of throwing, the cockroach next fell upon the waiter. The waiter stood firm, composed himself and observed the behavior of the cockroach on his shirt. When he was confident enough, he grabbed it with his fingers and threw it out of the restaurant.

Sipping my coffee and watching the amusement, the antenna of my mind picked up a few thoughts and started wondering, was the cockroach responsible for their histrionic behavior?
If so, then why was the waiter not disturbed? He handled it near to perfection, without any chaos. It is not the cockroach, but the inability of the ladies to handle the disturbance caused by the cockroach that disturbed the ladies.

I realized that, it is not the shouting of my father or my boss or my wife that disturbs me, but it's my inability to handle the disturbances caused by their shouting that disturbs me. It's not the traffic jams on the road that disturbs me, but my inability to handle the disturbance caused by the traffic jam that disturbs me. More than the problem, it's my reaction to the problem that creates chaos in my life.

Lessons learnt from the story: I understood, I should not react in life. I should always respond. The women reacted, whereas the waiter responded. Reactions are always instinctive whereas responses are always well thought of. A beautiful way to understand............LIFE.
Person who is HAPPY is not because Everything is RIGHT in his Life.. He is HAPPY because his Attitude towards Everything in his Life is Right..!!,,,,,,,
Really beautiful

Friday 20 March 2015

Thursday 19 March 2015

Wednesday 11 February 2015

HTTP Error 500-22 - Internal Server Error The page cannot be displayed because an internal server error has occurred



Now At 11:47 PM I am going to write about how to solve HTTP 500.22 - Internal Server Error . This error is really very Bad Boy . It only display Error Message and does not give any detailed information about error as we don't normally allow for that . So Now I am going to give information how today Solved this error and what will be sure short and easy steps to solve this error so that you save your time .

I First tried to set CustomErrors="Off" in web.congig file just after <system.web> tag start But it does not helped so first i need to find way to see the error . So only way to see the error is through log file . I was using azure so I decided to turn on azure logging to check what is error

Enable Logging In Microsoft Azure Portal -


- Enable Application Diagnostics Logging 


1. Login to Azure Portal . In sidebar click on websites . Click on desired website
2. Now click on configure In Top Menu and scroll down and find 'Application Diagnostics'
3. Once found Do configuration as shown below -

Application Diagnostics For Application Logging - Windows Azure
Application Diagnostics For Application Logging - Windows Azure

- Enable Web Server Logging 


1. Login to Azure Portal . In sidebar click on websites . Click on desired website
2. Now click on configure In Top Menu and scroll down and find 'Web Server Logging'
3. Once found Do configurations as shown below -

Web Server Logging - Windows Azure
Web Server Logging - Windows Azure

4. After Doing Both Diagnostics Configuration . you must Save and Restart Azure Website .

How To Find Error In Azure Website Log


1. Now after Enabling Log you can see your log by logging in your FTP Client like CuteFTP or      FileZilla( In my case) . First login to your FTP Client of that website

2. Now at root you can see a folder named LogFiles as shown below -

LogFile In windows Azure
LogFile In windows Azure


3. Open the folder and then find a folder named 'DetailedErrors' Now open the folder here you can 4. see all your errors details for that particular website . as shown below -



Azure Website Log File Detailed Errors
Azure Website Log File Detailed Errors


5. So choose the latest file and download it to your computer and open it in browser and It will show you error in your azure website in Detail so that we can know error information to solve the error . In my case error was HTTP Error 500.22 error as shown by log file below snapshot -


Find Error Using Logs in windows Azure
Find Error Using Logs in windows Azure


 Cause of  HTTP Error 500-22 - Internal Server Error


The Main cause of  "HTTP Error 500-22 - Internal Server Error  The page cannot be displayed because an internal server error has occurred" is Managed Pipeline Mode in Application Pool . Integrated Pipeline Mode of Application Pool does not support some services and functionalities 

Solution For HTTP Error 500-22 - Internal Server Error  


Step 1- Change Application Pool From Integrated Pipeline Mode To Classic Pipeline Mode


FOR IIS USERS ON Windows Server


1. Open Control Panel Then GoTo Administrative Tools
2. Then choose IIS Manager
3. Now Change  App site's Managed Pipeline from Integrated to Classic.

FOR AZURE PORTAL USERS 


1. Login to your Azure Portal . In sidebar click on websites . Click on desired website
2. Now click on configure In Top Menu and Under General Section find 'Managed Pipeline Mode'
3. Once Found Change mode from Integrated To Classic Pipeline Mode  as shown in snapshot below

Enable Classic Pipeline Mode Application Pool IIS and Windows Azure
Enable Classic Pipeline Mode Application Pool IIS and Windows Azure

Now after this change No other change will be required Everything is solved now . browse your website everything will be fine .

In case you face some Problem or Same Error Persist You may try the following solutions that can help in resolving issue 

 Changes in Web.Config File (Optional )


1. First open your Web.Config file and Search for <Configuration> Tag opening part and then insert following code in it and it should look like below --

<configuration>
    <system.webServer>
        <validation validateIntegratedModeConfiguration="false"/>
    </system.webServer>
</configuration>

Sunday 25 January 2015

Using Entity Framework Code First Migration Asp MVC

 Code First Database Initializers


 Before understanding code first migrations, let's have a look at Code First Database Initializers   provided by Entity Framework. When you follow EF code first approach, then you have three op tions for initializing database as given below–
  1. CreateDatabaseIfNotExists

    This is the default database initializer class used by Code First. This class creates a database only if it doesn't exist. This initializer helps you to avoid any accidental deletion of the database.
  2. DropCreateDatabaseWhenModelChanges

    This database initializer class drop the existing database and re-creates it if there is a mismatch between the model classes and table schema. This initializer is useful during starting phase of development and testing when models are changing often and there is no concern about the existing database records.
  3. DropCreateDatabaseAlways

    This database initializer class always drop and creates a new database, whether it is already present or not with every run of the application. This initializer is useful during testing when you want to run the application with a fresh set of data.

    Why Code First Migrations?

    The above three database initializing approach become fail when you add new model classes and you want to update existing database without any deletion or change. To achieve this, you need to use EF code first migrations which allow you to update existing database with new model classes changes and your existing database remains same with your database records.

    Visual Studio Package Manager Console

    To create the database for these two entities within your application, go to the Package Manager Console option as shown below:

    Creating New Database

    Running Commands

    Run the following command to configure migrations within your project and for creating new database.
  4. Enable migrations

    Enable-Migrations
  5. Create migration

    Add-Migration MigrationsName
  6. Create upgrade/downgrade script

    Update-Database

  7. Updating Existing Database

    Suppose you have added one more class named as Customer into your data model classes as given below:

    Running Commands

    Now for updating the database with new changes run the following commands as given below:
  8. Create migration

    Add-Migration MigrationsName
  9. Create upgrade/downgrade script

    Update-Database


Crud Operation in AngularJS With Bootstrap


In My Previous Article I explored about How to setup angularjs in Visual Studio and also Explored concepts of What , why and when To use AngularJS . In this article I am going to do CRUD Operation in AngularJS . CRUD operations means Insert , view , Update and Delete Data In Database . CRUD operations are most important thing that you must practice to create Applications either simple or complex in AngularJS or in any other Language or Technology . I am giving a simple code and easy sample that you can use to Perform CRUD operations in AngularJS using .NET technology 

Download the Sample Code from Link Below .

Download Code



How to setup/Run this sample 


1. First Download the code 
2. Then Open Web.config file and update the connection string to your sqlserver connection string by first making database in you sql server .
3. You need to Deal with CODE First Data migration Commands you can see these command in  link below :-

Data Migration


Snapshots

View Data From Database AngularJS

Insert Data In Database AngularJS

Delete Data from Database AngularJS

Update Data From Database AngularJS

Why we should use AngularJS

What is AngularJS

Why Its Called AngularJS

Why To Use AngularJS

When To Use AngularJS

So , Today i started to explore the top-most question that always stuck our mind when we start with new technology . Like i already know my stuff then when i started with angular these above are basic questions that stuck my mind that what is angularjs and why i should use it and when  .

Today briefly I am going to give answers to these questions -

What is AngularJS ?

AngularJS is a javascript framework developed by Google's Employees . What so special about angularjs is it is client side . what all you need is Javascript and any programming language of your own choice to start with AngularJS that makes angular best . Like in my case I am Asp.net C# developer so I use my all logic like database connectivity in c# and all bindings are done by Angularjs and Let me tell you it is so fast in case of Searching and other type of operations required in Applications developement this is because everything in here is through javascript which is client side It has all inbuilt functions for different type of work that make it suitable for web development .

Why Its Called AngularJS ?

Now foremost question is why its called AngularJS this is because its main Namespace is ng and that sounds like Angular and JS is used with it that's why its called AngularJS .

Why To Use AngularJS

5 Main Points Why we should use AngularJS -

  1. Angular Provides Data-Binding:- binding is the coolest concept in AngularJS. It's a fascinating real-time concept. Just like desktop application, mobile apps user also wishes to witness swift changes in the UI. So AngularJS’ two-way data binding handles the synchronization between the DOM and the model, and vice versa. As a result, the UI changes based on other input components are very much smooth without any extra effort on the part of the developer
  2. Angular Enables Single Page Apps :- Single Page Applications are becoming more popular for a good reason. They fill a very specific need. More functionality is being moved to the web, and the browser is finally realizing its potential as a distributed computing node. By design, SPA applications are far more responsive (even though some of that is perception). They can provide an experience that feels almost like a native app in the web. By rendering on the client they cut down load on the server as well as reduce network traffic – instead of sending a full page of markup, you can send a payload of data and turn it into markup at the client. Of course, Angular doesn't force you into building a SPA app, it only provides plenty of built-in support
  3.  Angular Provides Dependency Injection :- AngularJS has a built-in dependency injection subsystem useful for developers as it makes application development easier including testing. Dependency Injection (DI) allows users to ask for dependencies, rather than having to go and look for them or make them on their own .

    for example, “Hey I need X’, and the DI is responsible for creating and providing it for you. If user wants to gain access to core AngularJS services, all they need to do is add service as a parameter. AngularJS will detect that users need that service and will provide it instantly.
  4.  AngularJS Directives :- Directives can create custom HTML tags that serve as new and custom widgets.Directives achieve this by allowing users to invent their own HTML elements. Putting DOM manipulation code into the directives makes it easy for the users to separate them out of MVC app and leaves MVC to update the view with new data, but how the view will behave is certainly up to directives
  5. AngularJS requires less coding :- The data-binding feature allows developers to stop providing data manually into the view. Filters allow you to manipulate the data on the view level without changing your controllers. As a result, developers need to write very little code to achieve the task, which is a great deal for the developers

     When To Use AngularJS ?

    AngularJS is a very good SPA framework. If we want to create a SPA application, then AngularJS is a good option for it.“SPA” refers to Single Page Application. A Single Page Application is one in which we have a shell page and we can load multiple views into that. So a traditional app, as you know you typically blink and load everything again.
    It’s not very efficient on the bandwidth, especially in the mobile world. In a SPA, we can load the initial content upfront and then the different views or the small kind of mini web pages can be loaded on the fly and embedded into the shell.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

Setting up Angularjs in Visual Studio Express

AngularJS is a unique framework that without doubt will shape the web development space in the years to come . AngularJS is a recent addition to the client-side MVC frameworks list, yet it has
managed to attract a lot of attention, mostly due to its innovative templating system, ease of  development, and very solid engineering practices

In Simple Words I would say AngularJs is Awesome that anything else .

AngularJS is a relatively new actor on the client-side MVC frameworks scene; its 1.0 version was released only in June 2012. In reality, the work on this framework started in 2009 as a personal project of Miško Hevery, a Google employee. The initial idea turned out to be so good that, at the time of writing, the project was offiially backed by Google Inc., and there is a whole team at Google working full-time on the framework.

AngularJS is an open source project hosted on GitHub (https://github.com/angular/angular.js) and licensed by Google, Inc. under the terms of the MIT licens



Setting Up Angularjs in Visual Studio

1. First Open Visual Studio then Click on Tools Menu
2. Then Under Tools Menu click on Extension and Updates
3. It shows Extension and Updates Window . Now in Search Box at Top right side Typein AngularJS and Hit Enter .
4. Now you will be shown the result as below screenshot -

Add caption

 5. Now click on Install button to Install Angular js in visual studio .
 6. If any of Nuget packages are missing then these will be dependencies for angular that will automatically installed . as shown in screenshot below -


7. Now to check AngualarJS is installed click on File menu then click on New then click on Project
Now  under Templates -> Web category you can see AngularJS installed as shown in screenshot below -


Now AngularJS is ready in Visual Studio .