ASP.NET CORE Combines Angular to Create SPA

 

                                                   Single Page Web Application

一：源起  ~~~

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

二：SPA创建 ~~~

     开发环境：

1.  vs 2017（15.7.5）     （可选）
2.  angular （v 6.0.9）      (必须)
3.  node（v 8.11.3）       （可选）
4.  npm (v 5.6.0)              （可选）
5. angular CLI (v 6.0.8)      (必须)

    搬砖实录： 

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

   

   可以看出这是一个多么简洁的结构，也是我一直喜欢的风格，直到angular那一大坨东西的创建，下面可以看出，所以angular这种越往后，越后端的风格以及采用typescript这种格式语言，虽然身为后端出身的我看起来无比熟悉，但是实在喜欢不上，反而之前看不顺眼的JavaScript反倒是亲切多了，这可能就是那句物极必反以及喜新厌旧以及反复无常的综合征吧。

2. 创建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，启动项目，运行如下：            

   

                                   

三：预知后事如何，请看下回分解（创建一个智能家居物联的SPA应用）