All geek questions in one place

How to use AngularJS with ASP.NET MVC?

I need to convert an existing ASP.NET website to a spa website for most of it. Therefore, I am evaluating Angularjs for this project. I read numerous articles and posts describing the use of AngularJS with ASP.NET Web Api, but not where it is used in conjunction with ASP.NET MVC.

So, I am wondering if only the landing page will be processed by ASP.NET MVC and then the rest will be processed through AngularJS? Also, when configuring the routes of the AngularJS application, they definitely need to return some views. Are these views returned from ASP.NET MVC actions or should they be just AngularJS templates that will be retrieved from the server. If they are Angularjs templates that seem to be the right choice, then how will the data in these templates be expanded? Of course, I can crack all of this, but some examples or best practices will be greatly appreciated.

+6
source share
4 answers

Mvc with angularjs can fit in well when you plan to do something called a “mini spa”, where you have mvc pages that serve as the main pages for a partitioned application, and after serving the main page from mvc, the rest will be processed using angularjs to avoid having one great spa app. Pluralsight.com has some decent mini-spa and corner mvc courses. Hope this helps.

+9
source

Like other users, this will be a debate. Technically, nothing is stopping you from using ASP.NET MVC as the backend for your AngularJS interface. You simply define your routes, which are likely to simply return JSON instead of MVC Views.

On the other hand, it can be argued that this is great for usecase ASP.NET WebAPI. I remember that I saw in at least one book an author proposing to use WebAPI to create SPA applications (I think it was Pro ASP.NET MVC 5, if I'm not mistaken).

+6
source

I think this will help you AngularJS with ASP.net MVC

There are several examples explaining the use of angularJS in asp.net mvc, how to create a login page, upload a file, show tabular data, etc.

Follow these steps to configure angularJS in an asp.net mvc application.

  • First download the required js. you can use asp.net mvc packages

    bundles.Add (new ScriptBundle ("~ / bundles / angular"). Include ("~ / Scripts / angular.js", "~ / Scripts / angular -route.js"));

  • Edit _Layout.cshtml

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> @* Here ng-app="MyApp" is used for auto-bootstrap an AngularJS application. here ng-app="MyApp" means <body> element is the owner of AngularJS application*@ <body ng-app="MyApp"> @RenderBody() @Scripts.Render("~/bundles/jquery") @* Add Angular Library Here *@ @Scripts.Render("~/bundles/angular") <script src="~/Scripts/MyApp.js"></script> @RenderSection("scripts", required: false) </body> </html>

  • Add a new js file to add the angularjs module, controller, etc. here 'ngRoute' is optional (not required if you do not want to use corner routing)

      (function () { //Create a Module var app = angular.module('MyApp', ['ngRoute']); // Will use ['ng-Route'] when we will implement routing //Create a Controller app.controller('HomeController', function ($scope) { // here $scope is used for share data between view and controller $scope.Message = "Yahoooo! we have successfully done our first part."; }); })();

  • Add a new action to your controller to view.

     public ActionResult Index() { return View(); }

  • Add a view for Action and design.

      @{ ViewBag.Title = "Index"; } <h2>Index</h2> <div ng-controller="HomeController"> {{Message}} </div>

  • Launch the application.

+4
source

You can check the ASP.NET Boilerplate ( http://www.aspnetboilerplate.com/ ) as a starting point. It has pre-built templates to start with ASP.NET MVC and AngularJs.

Actually, ASP.NET Boilerplate is an application platform based on the latest ASP.NET MVC and Web API technologies. It simplifies the use of dependency injection, logging, validation, exception handling, localization, etc.

+1
source

Source: https://habr.com/ru/post/978933/

More articles:


All Articles