Shulou(Shulou.com)06/01 Report--

If you want to upgrade the server side or client side of your Web application, read on to learn how to use MVC in Angular.

Introduction

I thought I would share my experience with Microsoft ASP.NET MVC and AngularJS. This article will be more helpful to "MVC with AngularJS" beginners.

Which technology is the best?

Why do we use MVC?

Why do we use AngularJS?

Why should we use AngularJS in MVC?

How do I configure AngularJS in MVC?

Which technology is the best?

Today, there are many new technologies in the world, so there may be some confusion about which is optional and which is the best technology to build our application.

Suggestion

Most of the time, programmers will build their applications in MVC, because MVC (Model-View-Controller) is loosely coupled and we can reuse the structure of the pattern.

ASP.NET MVC with WEB API is best suited for server-side technology. We can reuse the same service for other communication devices (mobile devices, iPad, etc.), and the Web API will be hosted separately in the IIS. It increases the performance of the server.

Angular JS is best suited for the client. We can use rapid development, which is very useful for data binding because it uses the RESTful protocol.

Why do we use MVC?

ASP.NET MVC gives you a powerful and pattern-based way to build dynamic Web sites, giving you complete control over markup for an enjoyable development experience.

The Model-View-Controller (MVC) architecture pattern divides the application into three main components.

Model

Models are typically used for business objects. It will directly manage the data, logic and application rules.

View

This is a user interface that displays the output of the operation.

Regulator

The controller is the core of the application. It accepts input and converts it to a model or view.

The function of ASP.NET MVC

Web API supports the MVC framework built by RESTful.

We can use NuGet to install jQuery,AngularJS and so on.

We can write an asynchronous operation method as a single method, which returns an object of the task.

The routing module is responsible for mapping specific controller actions.

Why do we use AngularJS?

AngularJS is an open source scripting language. It will work based on Model-View-Controller mode and the latest client-side JavaScript.

One of the biggest advantages of data binding is that whenever the model changes, it automatically changes the value of the view and updates the model when the view changes. This is called two-way binding.

Characteristics of AngularJS

Two-way data binding.

Use and support the MVC design pattern.

Support routing, just like a single page application.

Support for RESTful services.

Dependency injection.

Why do we use AngularJS in MVC?

Both ASP.NET MVC and AngularJS are compatible with MVC mode, and there are many projects that can be used together. This is good because your MVC server-side code provides JSON results for Angular client calls.

In addition, you can use the MVC controller to control the HTML view or razor view in your application. This provides you with authorization, redirection, error handling and other functions.

How to configure Angular JS in MVC

Open Visual Studio 2015 and click = > File = > New = > ASP.NET Web Application.

Now, it will display the screen shown below. Select Project Type = > Select Web API project.

Now, open a project solution as shown below.

Right-click the above project and select manage NuGet package.

Click the Browse tab and search for AngularJS.

We have to download the AngularJS,AngularJS.Core and AngularJS.Route files.

When the download is complete, these file paths are displayed in the output window.

Add a new folder and create a new JavaScript file as Ng.Module.js.

Open the _ layout.cshtml page and give ng-app the name "Test".

Create another JavaScript file to create an Angular controller.

Open the Index.cshtml page and write the code for ng-controller, as shown below.

{{Testname}} {{Test}} {{happy}}

Link the AngularJS files in _ layout.cshtml page

Now, run the (F5) application. It displays the results in the browser.

Source of reprint: http://www.iis7.com/c/90/

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.