Angular 2与.NET Core 2.0交互机制、开发周期及C#代码适用场景问询

Great questions—let’s break this down clearly for you since you’re just getting started with the C#/.NET Core + Angular 2 stack using the Visual Studio Community template.

1. How Angular 2 and .NET Core 2.0 Interact & the Typical Development Cycle #

First, think of your setup as two distinct layers:

• .NET Core 2.0: Acts as your backend API server, responsible for data management, business logic, and secure operations.
• Angular 2: The frontend client-side app that handles user interface interactions and presents data to users.

Core Interaction Flow #

They communicate using HTTP/REST APIs:

• .NET Core exposes endpoints (e.g., /api/products) that respond to GET/POST/PUT/DELETE requests. These endpoints interact with your SQL database (usually via Entity Framework Core) and return data in JSON format.
• Angular uses its built-in HTTP client (either Http from @angular/http for Angular 2 specifically, or the newer HttpClient if your template includes it) to send requests to these endpoints. You’ll wrap this logic in Angular services to keep your components clean.

Step-by-Step Development Cycle #

Using the VS Angular template simplifies the setup, but here’s the workflow you’ll follow day-to-day:

1. Project Setup: The template pre-configures both .NET Core and Angular. During development, Angular runs on its own dev server (typically localhost:4200) while .NET Core runs on another port (like localhost:5000). A proxy config is included so Angular can call .NET APIs without CORS issues.
2. Build Backend APIs: Write C# controllers to handle data operations. For example, a ProductsController to fetch or save product data:

   [ApiController]
   [Route("api/[controller]")]
   public class ProductsController : ControllerBase
   {
       private readonly AppDbContext _dbContext;
   
       public ProductsController(AppDbContext dbContext) => _dbContext = dbContext;
   
       [HttpGet]
       public async Task<IActionResult> GetAllProducts()
       {
           var products = await _dbContext.Products.ToListAsync();
           return Ok(products);
       }
   }
   

3. Create Angular Services: Build an Angular service to call the .NET API. This keeps API logic centralized:

   import { Injectable } from '@angular/core';
   import { Http } from '@angular/http';
   import { Product } from './product.model';
   
   @Injectable()
   export class ProductService {
       private apiUrl = '/api/products';
   
       constructor(private http: Http) {}
   
       getProducts() {
           return this.http.get(this.apiUrl).map(res => res.json() as Product[]);
       }
   }
   

4. Build Angular Components: Use the service in your components to fetch data and render it in the UI. For example, a ProductListComponent that displays the list of products.
5. Test: Validate backend APIs with tools like Postman or Swagger (you can add Swagger to .NET Core easily), and test frontend interactions manually or with Angular’s testing utilities.
6. Deploy: When you publish the project, Angular compiles into static files (HTML/JS/CSS) and is placed in .NET Core’s wwwroot folder. The .NET server then serves both the API and the frontend app.

2. When to Write C# Code vs. Angular (Services/Components) #

The key is separating server-side (secure, data-focused) and client-side (UI-focused) responsibilities:

Write C# code when you need to handle: #

• Data access: Direct interactions with your SQL database (never expose database logic or credentials to the frontend).
• Secure business logic: Rules that can’t be trusted to run in the browser (e.g., calculating discounts based on sensitive business rules, validating user permissions before allowing an action).
• Authentication & Authorization: Handling user login, generating secure tokens, and verifying access to resources (use .NET Core Identity for this).
• External service integrations: Calling third-party APIs (like payment gateways) where you need to keep API keys secure and avoid CORS issues.
• File handling: Uploading, storing, or processing files (images, documents)—server-side processing keeps file system access secure.
• Server-side validation: Even if you have client-side validation, always re-validate data on the backend to block malicious or invalid inputs.

Write Angular code (services/components) when you need to handle: #

• UI interactions: Logic tied to user actions (e.g., form submissions, button clicks, modal dialogs).
• Client-side state management: Managing data only needed on the frontend (e.g., user preferences, selected items in a list).
• Routing: Navigating between different views in your app.
• Client-side validation: Providing instant feedback to users as they fill out forms (remember to pair this with server-side validation!).
• Data presentation: Formatting and displaying backend data in a user-friendly way (e.g., filtering lists, sorting tables).
• Lightweight client logic: Minor, non-sensitive calculations (e.g., calculating a shopping cart total that’s already been validated by the backend).

Quick Rule of Thumb #

If the logic involves sensitive data, modifies your database, or needs to be enforced across all users/clients—put it in C#/.NET Core. If it’s about how users see or interact with the app—put it in Angular.

内容的提问来源于stack exchange，提问作者I Stand With Israel