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應用）