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,启动项目,运行如下:
三:预知后事如何,请看下回分解(创建一个智能家居物联的SPA应用)