如何在现有ASP.NET Web API项目中用TypeScript集成AngularJS前端？

嘿，我来一步步帮你搞定用TypeScript把AngularJS集成到你的ASP.NET Web API项目里——毕竟TypeScript能给AngularJS带来类型安全和更好的代码可维护性，比纯JS舒服多了！

1. 先做好准备工作 #

• 确保你的ASP.NET Web API项目已经能正常运行，所有API端点都测试通过（用Postman或者Swagger验证下）
• 安装必要工具：
  • Node.js：用来管理npm包，安装后就能用npm命令了
  • 给项目加TypeScript支持：可以通过NuGet安装Microsoft.TypeScript.MSBuild，或者直接手动创建tsconfig.json配置文件

2. 调整项目结构 #

建议在Web API项目里新建一个ClientApp目录专门放前端代码，结构大概这样：

• src：TypeScript源码目录
  • services：封装API调用的AngularJS服务
  • controllers：AngularJS控制器
  • app.ts：AngularJS主模块入口
• dist：TypeScript编译后的JS文件（自动生成）
• index.html：前端入口页面

3. 配置TypeScript #

在ClientApp目录下创建tsconfig.json，配置如下（针对AngularJS做了兼容优化）：

{
  "compilerOptions": {
    "target": "ES5", // AngularJS兼容ES5版本
    "module": "AMD", // 模块加载器选AMD或者CommonJS都可以
    "outDir": "./dist", // 编译后的JS输出到dist目录
    "strict": true, // 开启严格类型检查
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "types": ["angular"] // 引入AngularJS的类型定义，写代码有提示
  },
  "include": ["src/**/*"] // 编译src下所有TypeScript文件
}

然后打开命令行，进入ClientApp目录，安装AngularJS的类型定义：

npm install @types/angular --save-dev

4. 创建AngularJS主模块 #

在src/app.ts里定义你的AngularJS核心模块，注册需要的服务和控制器：

import * as angular from 'angular';

// 导入自定义的服务和控制器
import { ApiService } from './services/api.service';
import { UserController } from './controllers/user.controller';

// 创建主模块，名字随便取，后面html里要用到
const app = angular.module('webApiApp', []);

// 注册服务和控制器到模块里
app.service('apiService', ApiService);
app.controller('UserController', UserController);

5. 封装API调用服务 #

在src/services/api.service.ts里写一个TypeScript类，用AngularJS的$http服务封装对Web API的调用，这样所有API请求都集中在这里，方便维护：

import * as angular from 'angular';

export class ApiService {
    // 依赖注入$http，AngularJS会自动实例化
    static $inject = ['$http'];

    constructor(private $http: angular.IHttpService) {}

    // 示例：获取用户列表，替换成你的API路由
    getUsers(): angular.IPromise<any[]> {
        return this.$http.get('/api/users')
            .then(response => response.data)
            .catch(error => {
                console.error('获取用户列表失败:', error);
                throw error; // 把错误抛出去让上层控制器处理
            });
    }

    // 示例：创建用户，POST请求
    createUser(user: any): angular.IPromise<any> {
        return this.$http.post('/api/users', user)
            .then(response => response.data)
            .catch(error => {
                console.error('创建用户失败:', error);
                throw error;
            });
    }

    // 你可以继续添加PUT、DELETE等其他API调用方法
}

6. 编写AngularJS控制器 #

在src/controllers/user.controller.ts里写控制器，调用上面的API服务，处理页面逻辑：

import * as angular from 'angular';
import { ApiService } from '../services/api.service';

export class UserController {
    // 注入自定义的apiService
    static $inject = ['apiService'];

    public users: any[] = [];
    public newUser: any = { name: '', email: '' };

    constructor(private apiService: ApiService) {
        this.loadUsers(); // 页面加载时自动获取用户列表
    }

    loadUsers(): void {
        this.apiService.getUsers()
            .then(users => {
                this.users = users;
            });
    }

    addUser(): void {
        this.apiService.createUser(this.newUser)
            .then(() => {
                this.loadUsers(); // 添加成功后刷新列表
                this.newUser = { name: '', email: '' }; // 重置表单
            });
    }
}

7. 编写前端入口页面 #

在ClientApp/index.html里引入AngularJS库和编译后的JS文件，写页面视图：

<!DOCTYPE html>
<html ng-app="webApiApp">
<head>
    <title>AngularJS + Web API 示例</title>
    <!-- 引入AngularJS官方库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <!-- 引入编译后的TypeScript文件，注意顺序：先服务，再控制器，最后主模块 -->
    <script src="dist/services/api.service.js"></script>
    <script src="dist/controllers/user.controller.js"></script>
    <script src="dist/app.js"></script>
</head>
<body ng-controller="UserController as vm">
    <h1>用户管理系统</h1>

    <!-- 用户列表展示 -->
    <h2>现有用户</h2>
    <ul>
        <li ng-repeat="user in vm.users">{{user.name}} - {{user.email}}</li>
    </ul>

    <!-- 添加用户表单 -->
    <h2>添加新用户</h2>
    <div>
        <input type="text" ng-model="vm.newUser.name" placeholder="请输入姓名" required />
        <input type="email" ng-model="vm.newUser.email" placeholder="请输入邮箱" required />
        <button ng-click="vm.addUser()" ng-disabled="!vm.newUser.name || !vm.newUser.email">添加用户</button>
    </div>
</body>
</html>

8. 整合到ASP.NET Web API项目 #

• 把ClientApp目录添加到你的ASP.NET项目中，确保dist目录的静态文件能被访问到
• 配置ASP.NET的路由，让根路径返回前端页面：
  • 如果是ASP.NET Core，在Startup.cs里修改：

    app.UseStaticFiles(); // 允许访问静态文件
    
    app.UseRouting();
    
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers(); // 保留API路由
        endpoints.MapFallbackToFile("ClientApp/index.html"); // 默认返回前端页面
    });
    

  • 如果是传统ASP.NET Framework，可以在Global.asax里设置默认文档为ClientApp/index.html，或者添加一个MVC控制器返回这个视图。

9. 编译和测试 #

• 编译TypeScript：可以用Visual Studio的自动编译（安装TypeScript插件后会自动监听），或者在命令行进入ClientApp目录运行tsc命令（需要全局安装TypeScript：npm install -g typescript）
• 运行你的ASP.NET Web API项目，访问根路径就能看到AngularJS前端页面，测试添加用户、加载用户等功能是否正常调用API。

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