(ASP.NET MVC, AngularJS) - Installing AngularJS in ASP.NET MVC with Visual Studio

What this article covers?

How to Install AngularJS in your project?

Understanding Nuget Package Manager in VisualStudio.

How to use AngularJS library?

AngularJS Hello World Example

By the completion of this article you will get knowledge on how to install (or) integrate the AngularJS in your ASP.NET MVC application with Visual Studio.

Before proceeding I suggest you to refer my previous articles. 

AngularJS - Overview

ASP.NET MVC - Creating Hello World Application with Visual Studio 2017

How to Install AngularJS in your project?

You can install the AngularJS in your application with the help of the Nuget Package Manager Tool in the Visual Studio.

Open your project and go to the Solution Explorer, Right Click on the project and select Manage Nuget Packages option, it will open the Nuget Package Manager window. 

Click on the Browse menu.

Search for the AngularJS, then select the AngularJS library.

You have a provision to install specific version based on your preference. By default latest version will be selected, if you want to install specific version select it and then click on install, then it’ll be added to your application.

Please check the installation status in the Output window. If the plugin installation failed you can check the reasons for Installation failing.

So now all the AngularJS libraries will be available in Scripts folder in the project.

How to use AngularJS in your project?

If you want to use the AngularJS in one page you can directly add reference to the Angular.js file in your View.

Open the View and add the reference to Angular.js file as shown below.

Now the AngularJS will be loaded dynamically into your view while page loading.

AngularJS Hello World Example

Let’s add a small code snippet to your page. Add the html content to your View body as shown below.

Code Explanation:

In the above script ng-app tells the Angular that please initialize and then parse all the nodes within it.

Initializing the value of the message variable using the ng-init directive, and then binding the same message to the h1 element with the help of Angular Expressions.

Now run the application Angular will display the output as shown below.

ASP.NET MVC - Creating Hello World Application with Visual Studio 2017

What this article covers?

- Creating a Project in Visual Studio

- Adding Controller / How to Add Controller?

- Adding a View / How to generate a view from a Controller method?

- Adding a View / How to generate a view from a Controller method?

- Configuring Route / How to configure the default route? 

Creating a Project in Visual Studio

1.      Open Visual Studio

2.     On the File menu select New and then select New Project

3.     You’ll be prompted with the New Project window

4.     Select your programming language and then expand it to get all installed application types under it.

5.     Select Web option.

6.     Select ASP.NET Web Application Template and then enter the name of your application you wanted to create, then click OK.

7.     Click on Empty option to create the MVC application, and then check the MVC checkbox to create the empty MVC folder structure, and then click OK. Now your new ASP.NET MVC project is ready for you.

Adding Controller / How to Add Controller?

1.      Go to Solution Explorer

2.    Right Click on Controllers Folder

3.     Select Add, and then select Controller option

4.     Select an Empty MVC Controller Template and then click on Add.

5.     Enter your controller name (Controller name must end with the suffix Controller), and then click on Add.

6.     Now the controller class will be added to your project along with default Index action method as sown below.

7.     You can change the default controller action. I’m changing it from Index to HelloWorld.

Adding a View / How to generate a view from a Controller method?

1.      Right click on Index action method in controller, then select Add View option.

2.     The view name and controller name should be the same. So, don’t modify the default name. Uncheck ”Use a Layout Page” option, because we don’t have any layout page in our application, and then click on Add.

3.     Now the view will be added to your application. Add some welcome text as shown below.

4.

5.     Now your Controller and View are ready.

Configuring Route / How to configure the default route?  

Routing enable us to define URL pattern that maps to the request handler.

Every MVC application must configure (register) at least one route, which is configured by MVC framework by default. You can register a route in RouteConfig class, which is in RouteConfig.cs under App_Start folder. The following figure illustrates how to configure a Route in the RouteConfig class.

Modify the route parameters according to your Controller and View.

            

Now your view is configure as the default view for your application.

Run the application to see the output in browser.

AngularJS - Overview

- AngularJS is a JavaScript framework developed by Google.

- AngularJS empowers the traditional HTML by extending its current vocabulary.

- AngularJS is open source, client-side JavaScript framework that promotes a high-productivity web development experience.

- AngularJS applications are built around a design pattern called Model View Controller (MVC).

- AngularJS used in Single Page Application (SPA) development projects. 

- AngularJS extends HTML DOM with additional attributes and makes it more responsive to user actions.

- AngularJS is a part of new generation libraries and frameworks that came to support the development of more productive, flexible, maintainable, and testable web applications.


What You Should Already Know?

  You should be familiar with the basics of web development.

• HTML
• CSS
• JavaScript
• JSON

AngularJS Core Features

Model	The data shown to the user in the view
View	Responsible for displaying data to the user
Controller	Contains the business logic
Directives	Extends HTML with custom attributes and elements
Services	Reusable business logic independent of views
Filters	Formats the value of an expression for display to the user
Expressions	Binds application data to HTML
Templates	HTML with additional markup
Routing	Loads a single HTML page and dynamically updates that page as the user interacts with the web app
Dependency Injection	Simplifies the process of dealing with dependencies
Testing	It has many features which makes testing your applications easy
Validations	Offers client side validation
Scope	Object which helps in exchanging the data between controller and view.
Data Binding	Automatic synchronization of data between the model and view components

C#.NET - Code Snippet to Generate Random Numbers without Repetition

         /// <summary>
        /// Get Random Numbers without repet
        /// </summary>
        /// <param name="minRange">Minimum Value</param>
        /// <param name="maxRange">Maximum Value</param>
        /// <param name="count">Limit Count</param>
        /// <returns></returns>
        private static List<int> GetRandomNumbers(int minRange, int maxRange, int count)
        {
            Random randomGenerator = new Random();

            List<int> randomList = new List<int>();

            for (int i = 0; i < count; i++)
            {
                var number = randomGenerator.Next(minRange, maxRange);

                if (!randomList.Contains(number))
                {
                    randomList.Add(number);
                    if (randomList.Count>= maxRange)
                    {
                        break;
                    }

                }
                else
                {
                    i--;
                    continue;
                }
            }

            return randomList;
        }

How to call:

List<int> randomNumbers = GetRandomNumbers(0, 100, 10);