Angular + asp.net core 入门

一、简介

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

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

创建了带有 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 ,而微软自带的程序集提供 ControllerModel 支持。当然也可以创建只含有后端的项目,这种项目一般称为 Web API 。其结构也遵循 MVC,只不过缺少了 Veiw

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

Angular + asp.net core 入门

上一篇:《IP组播(第1卷)》一2.2 MAC地址映射


下一篇:MVC基础使用