【问题标题】:What's the correct way to structure a project in ASP.NET MVC with an Angular SPA inside it?在 ASP.NET MVC 中使用 Angular SPA 构建项目的正确方法是什么?
【发布时间】:2015-11-18 07:08:59
【问题描述】:

我有一个 ASP.NET MVC 项目,其中包含一个 Angular SPA。起初,我决定为 SPA 创建一个新区域,但后来我意识到我不会在该区域内使用任何模型或控制器,而只会使用 JavaScript 文件。所以,现在我的想法是将 SPA 的所有脚本放在 ASP.NET MVC 项目的主 ~\Scripts\ 文件夹中,但放在另一个文件夹 ~\Scripts\MySPAName\ 中,然后通过 ASP.NET MVC 加载 SPA看法。

在这种情况下构建项目的最佳方式是什么?

【问题讨论】:

  • 如何为您的 SPA 获取数据?那是一个单独的API吗?你用$http获取数据吗?
  • 是的,我从一个单独的 API 获得它。

标签: angularjs asp.net-mvc projects-and-solutions


【解决方案1】:

好吧,如果你想创建这样的项目,我建议你使用 MVC + WebAPI + Angularjs。你真的只需要 2 个 MVC 控制器:Account 用于所有登录/注销逻辑,Home 只有一个简单的方法Index 此索引方法返回仅包含一行代码的视图 - divsection 或任何你想要的ng-view 属性。这将是您的主要应用程序页面。为什么使用 WebAPI 更好?因为这些控制器比 MVC 控制器工作得更快,而 WebAPI 为您提供了很好的 REST 可能性。项目结构怎么样。我可以向你推荐我个人的 MVC + Angularjs 项目结构:

所以你有用于 WebAPI 控制器的 API 文件夹,用于 MVC 控制器的标准 Controllers 文件夹。在Scripts 文件夹中,您有单独的文件夹用于您的角度控制器服务和通用库和一个 .js 文件 - 它是您的角度模块和应用程序文件。此外,如果您在 Scripts/Controllers 文件夹中有额外的子文件夹,它会更好更干净,这样您就可以按类别(例如 Home、Mangers、Prices 等)拆分所有 *.js 文件。您还可以看到我在项目的根目录中有文件夹Templates。在这里您可以放置​​您将用作angular 视图/模板的所有html 文件。而且我还建议您在这里创建额外的子文件夹,如 Scripts/Controllers 子文件夹,以获得更好和更清晰的结构

希望对你有帮助

【讨论】:

    【解决方案2】:

    ASP.NET MVC 更适合传统网站。对于单页应用,请改用 ASP.NET Web API。这是一个教程:

    http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-(spa)-with-aspnet-web-api-and-angularjs

    【讨论】:

    • 我的 ASP.NET MVC 包含多个模块,其中一个模块就是这个 SPA。
    【解决方案3】:

    这里有两个web项目,一个是web api,另一个是客户端网页(SPA)。

    你只需要一个空的 web 项目来启动一个 angular 项目。

    Index.html - 它是您的应用程序的主要 html 页面。您项目的所有其他页面(部分页面)都可以放在目录Pages内。

    Scripts - 你所有的 js 文件都可以放在这个目录中。您可以将所有 js 文件区分到它的子目录中。

    【讨论】:

    猜你喜欢
    • 2014-02-03
    • 1970-01-01
    • 2016-08-26
    • 2023-03-12
    • 2018-12-15
    • 2020-02-07
    • 1970-01-01
    • 2019-05-29
    • 1970-01-01
    相关资源
    最近更新 更多