Angular + asp.net core 入门

一、简介

通俗的理解，Angular 只是一个前端框架，它只负责前端的事，但一个完整的项目还应该有后端，这其中之一可选的技术就是 asp.net core 。这里简单学习一下两个框架之间的协同开发。

对于现有的轮子，visual studio 已经可以直接创建带有 Angular 模板的 asp.net core 应用。详细教程可以直接翻微软的官方文档，很详细。

创建了带有 angular 模板的 asp.net core 应用之后，前后端的代码都可以在同一个项目下维护，更可以协同调试，以下是创建之后的工程目录。

工程目录

常规上讲，asp.net core 应用遵循 MVC 模式，在创建的模板中，Angular 项目代替了原来 Veiw 部分，也就是说带 angular 应用的 asp.net core 项目仍然还是遵循MVC模式。

根据我阅读文档所得的结论，在这个工程下面我们只需要写 Model 以及 controller 即可，model 好理解，不就是我们从数据库中拿数据之后称放容器的模具嘛。那 controller 是什么？官方文档中说它是处理业务逻辑的东西，那么问题来了，我们要如何调用呢？去哪里调用呢？

二、控制器的调用逻辑

这里需要事先声明，一个请求(Get)，即是用户在浏览器输入地址按下回车的时候。

对于一个项目来说，它里面的控制器调用遵循一个路由逻辑。即

/[Controller]/[ActionName]/[Parameters]

举个例子，我这里有个控制器，代码如下

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class HelloWorldController : Controller
    {
        //
        // GET: /HelloWorld/
	// 路由走到http://localhost:4200/HelloWorld/ 就会默认调用它，也可能他是第一个缘故
	[HttpGet]
        public string Index()
        {
            return "This is my default action...";
        }

        //
        // GET: /HelloWorld/Welcome/
	[HttpGet]
        public string Welcome()
        {
            return "This is the Welcome action method...";
        }
    }
}

譬如这里我们的网页运行在 [http://localhost:4200](http://localhost:4200) ，那么如果我这个时候在地址栏输入

http://localhost:4200/HelloWorld/Index
# or
http://localhost:4200/HelloWorld/Welcome

就能够调用这个控制器下的两个方法，这个调用逻辑遵循上面讲述的路由规则，即

/[Controller]/[ActionName]?[Parameters]

所以可以推断出，控制器实际上指的是后端对于页面上所有组件的各种应对逻辑。

---

三、项目当中的 MVC 结构

对于一个完整的 asp.net core 项目来说，是一个完整的 MVC 结构，项目内的 Angular 工程充当 Veiw ，而微软自带的程序集提供 Controller 和 Model 支持。当然也可以创建只含有后端的项目，这种项目一般称为 Web API 。其结构也遵循 MVC，只不过缺少了 Veiw 。

打包之后，Veiw 部分会被编译成静态文件存于生成路径，以供编译生成执行文件调用。