当前位置：首页 > news >正文

ASP.NET CORE Combines Angular to Create SPA

news 来源：原创 2024/4/30 8:27:09

Single Page Web Application

一：源起 ~~~

单页面应用，其实互联网一开始就是这个，只不过后来内容多了导致一个页面实在影响用户体验得变为多页面，然后就是当时没有ajax以及页面模板单页面切换的概念（主要是没ajax从而没顺势想到单页切换）。然后Angular来了，React随后跟进，Vue也顺势来凑一波热闹，然后。。。咳咳，今天主要讲.net core 结合 angular做出来的spa。

二：SPA创建 ~~~

开发环境：

vs 2017（15.7.5）（可选）
angular （v 6.0.9） (必须)
node（v 8.11.3）（可选）
npm (v 5.6.0) （可选）
angular CLI (v 6.0.8) (必须)

搬砖实录：

创建 asp.net core web 应用程序（这里我选空模板，当然你可以选其他，这个就看你自己的喜好了，步骤都差不多，可以跳着看）创建完的大致目录结构如下：

可以看出这是一个多么简洁的结构，也是我一直喜欢的风格，直到angular那一大坨东西的创建，下面可以看出，所以angular这种越往后，越后端的风格以及采用typescript这种格式语言，虽然身为后端出身的我看起来无比熟悉，但是实在喜欢不上，反而之前看不顺眼的JavaScript反倒是亲切多了，这可能就是那句物极必反以及喜新厌旧以及反复无常的综合征吧。
创建angular的项目工程，首先你得打开cmd（要是你用的是Visio stodio或者是webstore的就不需要这么干了，当然也就不会像我这样先创建.net core 再去搞这个，原谅我是一个.net从业员的思维）。cmd 命令如下：

F：                      //切换盘符
cd  F:\VS2017Project\AG  //导向到你当前的工程目录
ng new AG                //新建angular的工程目录（AG为我自定义的目录）

创建完成后目录是这样子的：

3. 修改Startup.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;

//这个是导入SPA服务的关键dll
using Microsoft.AspNetCore.SpaServices.AngularCli;

namespace AG
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            //注册SPA服务
            services.AddSpaStaticFiles(configuration =>
            {
                //设置你对应的angular项目配置文件名
                configuration.RootPath = "AG/dist";
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            //调用SPA服务
            app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501

                //设置你对应的angular项目文件名
                spa.Options.SourcePath = "AG";

                if (env.IsDevelopment())
                {
                    //这里就是去调用了ng的start命令去启动这个angular项目
                    spa.UseAngularCliServer(npmScript: "start");
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    app.UseHsts();
                }
            });
        }
    }
}

主要是SPA服务的引入，其他的暂时不需要，目前也只是这个angular项目简单挂起的demo，启动项目，运行如下：