能否创建ASP.NET Core 6 MVC+AngularJS Web应用？该如何实现？

完全可行，AngularJS（1.x版本）作为前端库，能和ASP.NET Core 6 MVC无缝集成，不需要依赖Visual Studio自带的新版Angular模板，两种实现方式供你选择：

一、改造现有Visual Studio创建的Angular项目 #

如果你已经创建了带新版Angular的项目，可以按以下步骤替换为AngularJS：

• 删除项目中自动生成的ClientApp文件夹（里面是新版Angular的代码）
• 在项目的wwwroot目录下新建js、css文件夹，用于存放AngularJS相关资源
• 下载AngularJS脚本（推荐1.8.x稳定版）放到wwwroot/js，或者直接在MVC布局页（_Layout.cshtml）中通过CDN引入
• 编写AngularJS的模块、控制器、服务等代码，统一放在wwwroot/js下
• 在MVC视图中使用AngularJS的指令、数据绑定语法即可

二、从头创建MVC项目并集成AngularJS #

这种方式更简洁，步骤如下：

1. 在Visual Studio 2022中创建「ASP.NET Core Web App (Model-View-Controller)」项目，选择.NET 6框架
2. 引入AngularJS资源
   • 方式一：CDN引入（无需下载文件），在_Layout.cshtml的</body>前添加：

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
     

   • 方式二：本地引入，下载AngularJS脚本放到wwwroot/js，然后在布局页中添加：

     <script src="~/js/angular.min.js"></script>
     

3. 编写AngularJS核心代码
   在wwwroot/js下新建app.js，示例代码：

   // 定义AngularJS模块
   var myApp = angular.module('myApp', []);
   // 定义控制器
   myApp.controller('myController', function($scope) {
       $scope.greeting = "Hello from AngularJS + ASP.NET Core 6 MVC!";
       $scope.userList = [];
   });
   

4. 在MVC视图中使用AngularJS
   打开Views/Home/Index.cshtml，替换内容为：

   @{
       ViewData["Title"] = "Home Page";
   }
   
   <div ng-app="myApp" ng-controller="myController">
       <h2>{{greeting}}</h2>
       <!-- 可以添加更多AngularJS绑定内容 -->
   </div>
   
   <script src="~/js/app.js"></script>
   

额外注意事项 #

• 路由冲突：如果要使用AngularJS的路由功能，需要额外引入angular-route.js，同时配置MVC的 fallback路由（防止刷新页面时404），可以在Program.cs中添加：

  app.MapFallbackToFile("index.html");
  

• 数据交互：ASP.NET Core MVC可以编写API接口，AngularJS通过$http服务调用接口获取/提交数据，示例：

  myApp.controller('myController', function($scope, $http) {
      $http.get('/api/User/GetUsers')
          .then(function(response) {
              $scope.userList = response.data;
          });
  });
  

内容的提问来源于stack exchange，提问作者Amatour