将ASP.NET与AngularJS结合 [英] Combining ASP.NET with AngularJS

查看:62
本文介绍了将ASP.NET与AngularJS结合的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我花了一些时间对ASP.NET(MVC/WebAPI)作为服务器端与AngularJS作为客户端之间的关联进行了很好的解释.但是我仍然不确定这是否是同时采用这两种技术的SPA的正确方法.

我的想法是使用ASP.NET作为REST服务.但是,我对ASP.NET中的捆绑包印象深刻.要使用它,我需要ASP.NET MVC及其Razor模板.用angularjs作为客户端来构建应用程序是一种好习惯吗?

我想如果允许用户进入相关页面,我只需要MVC进行授权.还是有更好的方法来确定Windows用户的角度?因为我需要Windows登录用户的帐户.

我希望任何人都能帮助我找出正确的方法.

解决方案

您建议使用的堆栈非常好用.

过去,我的团队构建了一个应用程序,其中有2个剃须刀页面,一个基本上是外部应用程序(通过外部,我是指未登录的用户),该应用程序重量轻且仅处理注册,然后是另一个充当应用程序其余部分的内部外壳(一旦登录).

  • .NET捆绑使我们可以做一些很酷的事情,例如仅将某些脚本传递到某些剃须刀页面.EG无需为整个内部应用程序提供未登录用户的权限.
  • 使用此方法还可以使您利用内置的ASP.NET身份验证框架.

我最近偶然发现了一个非常酷的

I've looked some time for a good explanation about the association between ASP.NET (MVC/WebAPI) as server-side and AngularJS as the client. But I'm still uncertain whether is it the correct way to implement a SPA with both technologies.

My idea is, to use ASP.NET as REST service. But I'm impressed about the Bundle in ASP.NET. To use it I need ASP.NET MVC and its Razor templates. Is that a good practice for building an application with angularjs as client?

I guess I only need MVC for authorization if the user is allowed to go on relevant pages. Or is there a better way with angular to find out the windows user? Because I need the account of the windows login user.

I hope anyone can help me to find out the right way.

解决方案

The stack you're suggesting is perfectly good to use.

My team has built an application in the past where we had 2 razor pages, the one was basically the external app (by external I mean non-logged in user) which was quite light weight and only handled signup, then the other acted as an internal shell for the rest of the app (once logged in).

  • The .NET bundling allowed us to do some cool things like only delivering certain scripts to certain razor pages. EG a non-logged in user didn't need to be served the whole internal app.
  • Using this method also allows you to utilize the built in ASP.NET auth framework.

I recently stumbled across a really cool bootstrap project that can help you construct a boilerplate app. My suggestion is just download this, and have a look through the boilerplate app to give you more clarity on its usage. (Then it's up to you if you want to use it or not, but it'll give you more clarity on solution construction)

Thus your final app would have one (or 2) MVC controller(s) that deliver your shell pages, and all other calls would be done via WebAPI endpoints. See rough example below:

..\Controllers\RootController.cs

public class RootController : Controller
{
    // we only utilize one server side rendered page to deliver out initial
    // payloads; scripts; css; etc.
    public ActionResult Index()
    {
        // using partial view allows you to get rid of the _layout.cshtml page
        return PartialView();
    }
}

..\Views\Root\Index.cshtml

<html ng-app="MyAngularApp">
<head>
    @Styles.Render("~/content/css")
    @Scripts.Render("~/bundles/js")
    @Scripts.Render("~/bundles/app")
</head>
<body>
    <div class="container">
        <div ng-view></div>
    </div>
</body>
</html>

..\WebAPI\SomethingController.cs

public class SomethingController : ApiController
{
    private readonly IRepository _repo;

    public SomethingController(IRepository repo)
    {
        _repo = repo;
    }

    // GET: api/Somethings
    public IQueryable<Something> GetSomethings()
    {
        return _repo.GetAll();
    }
}

Tip: The easiest way I've found to construct projects like this is to use the Visual Studio's New Project Wizard. Select Web Project -> MVC, Make sure to Select WebAPI. This will ensure that App_Start has all the required routes & configs pre-generated.

这篇关于将ASP.NET与AngularJS结合的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆