Visual Studio 2017使用Asp.Net Core构建Angular4应用程序
2017-11-28 10:52
1206 查看
文章转载请著名出处:http://www.cnblogs.com/smallprogram
你需要了解的名词
1. NodeJS,这是一个基于Chrome V8 JavaScript引擎构建的JavaScript运行时的库,NPM就包含在NodeJS中,他具有强大的生态系统。
2. NPM包管理器,是Node包生态系统的管理器。可以使用他安装Angular所有的包以及依赖包。
2. DotNet CLI,这是微软提供的命令行接口工具。用于开发跨平台.NET程序的工具链。如果你安装了VS2017,默认应该已经安装DotNetCLI工具。
3. AngularCLI,这是Angular官方发布的AngularCLI工具,可以使用他对Angular进行新建、编译、运行等操作。
4. Asp.Net Core,这是微软推出的跨平台Web应用程序。功能强大。官方文档非常完善。
5. TypeScript,这是一种类型化的JavaScript,可以通过他编译生成Javascript,Angular就是基于TypeScript的。
6. RESTful API,这是一个很火热的Web应用程序API的设计理念。微软官网也写过一篇关于RESTful的文章,但实在太老了。于是用aisuhua的GitHub代替了
一、安装NPM https://nodejs.org/en/download/。
二、安装angular模板
安装结果应如下图所示
若未发现angular模板,请前往地址手工下载安装 https://visualstudiogallery.msdn.microsoft.com/31a3eab5-e62b-4030-9226-b5e4c9e1ffb5/file/220144/8/ASP.NET%20Core%20Template%20Pack%20v1.1.37.vsix 顺便说下,https://marketplace.visualstudio.com/vs是个好地方
三、使用DotNetCLI命令根据模板创建angular项目
dotnet new angular
四、还原.NET依赖包:
dotnet restore
五、获取Angular依赖包
npm install
若安装出现错误,请以管理员方式运行命令行
npm uninstall
npm cache clean --force
重新执行安装angular依赖包
六、完成之后你就可以运行程序
下面我们创建自己的应用
一、打开vs2017,创建一个空的web
二、配置我们的Asp.Net Core
使用以下代码覆盖
注:
其次Configure方法中的所有代码,使用如下代码替换:
第一个app.Use中间件的作用是当系统返回404状态码并且访问的Request不包含文件扩展名并且访问Request不是以“/api/”开头的访问直接将其跳转到/index.html
app.UseMvcWithDefaultRoute()的意思是使用MVC的默认路由中间件。
app.UseDefaultFiles()的意思是启用默认文档提供器中间件,他会对只有主机的URL进行访问时搜索default.html、default.htm、index.html、index.htm文件,如果有就返回内容。
app.UseStaticFiles()的意思启用程序的静态文件支持,也就是启用wwwroot文件夹可以通过URL访问。
四、新建一WebAPIController=》ValuesController,修改get方法
五、安装angular/cli,以管理员身份运行命令行,导航到项目根目录
npm install –g @angular/cli
六、测试cli是否安装成功 ng -v
七、创建angular项目;
ng new mycat --skip-install
八、调整目录结构,提取mycat文件到根目录,重命名src为myapp
九、启用Angular的HTTP模式和表单绑定模式,修改myapp/app/app.module.ts
十、配置.angular-cli.json,tsconfig.json,tsconfig.app.json,tsconfig.spec.json
angular-cli.json:
tsconfig.json
tsconfig.app.json
tsconfig.spec.json
app.component.ts
app.module.ts
十一、安装Angular所有依赖项
npm install
回到VS,显示全部文件,你会发现多出一个node_module的文件夹,并且依赖项中会出现npm依赖,这个文件夹里包含的就是包括Angular在内的所有依赖包。不要把他包含在项目中。否则会出错。
编译成功之后,回到VS中你会发现wwwroot文件夹下出现了编译好的JS文件和HTML文件等。不要在意wwwroot文件夹的图标从一个小地球变成了文件图标。
你需要了解的名词
1. NodeJS,这是一个基于Chrome V8 JavaScript引擎构建的JavaScript运行时的库,NPM就包含在NodeJS中,他具有强大的生态系统。
2. NPM包管理器,是Node包生态系统的管理器。可以使用他安装Angular所有的包以及依赖包。
2. DotNet CLI,这是微软提供的命令行接口工具。用于开发跨平台.NET程序的工具链。如果你安装了VS2017,默认应该已经安装DotNetCLI工具。
3. AngularCLI,这是Angular官方发布的AngularCLI工具,可以使用他对Angular进行新建、编译、运行等操作。
4. Asp.Net Core,这是微软推出的跨平台Web应用程序。功能强大。官方文档非常完善。
5. TypeScript,这是一种类型化的JavaScript,可以通过他编译生成Javascript,Angular就是基于TypeScript的。
6. RESTful API,这是一个很火热的Web应用程序API的设计理念。微软官网也写过一篇关于RESTful的文章,但实在太老了。于是用aisuhua的GitHub代替了
一、安装NPM https://nodejs.org/en/download/。
二、安装angular模板
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
安装结果应如下图所示
若未发现angular模板,请前往地址手工下载安装 https://visualstudiogallery.msdn.microsoft.com/31a3eab5-e62b-4030-9226-b5e4c9e1ffb5/file/220144/8/ASP.NET%20Core%20Template%20Pack%20v1.1.37.vsix 顺便说下,https://marketplace.visualstudio.com/vs是个好地方
三、使用DotNetCLI命令根据模板创建angular项目
dotnet new angular
四、还原.NET依赖包:
dotnet restore
五、获取Angular依赖包
npm install
若安装出现错误,请以管理员方式运行命令行
npm uninstall
npm cache clean --force
重新执行安装angular依赖包
六、完成之后你就可以运行程序
下面我们创建自己的应用
一、打开vs2017,创建一个空的web
二、配置我们的Asp.Net Core
使用以下代码覆盖
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp1.1</TargetFramework> <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> </PropertyGroup> <ItemGroup> <Folder Include="wwwroot\" /> </ItemGroup> <ItemGroup> <PackageReference Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.0.0" /> <PackageReference Include="Microsoft.AspNetCore" Version="1.1.1" /> <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.3" /> <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.2" /> <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.1" /> </ItemGroup> <ItemGroup> <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="1.0.0" /> </ItemGroup> </Project>
注:
<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.3" /> <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.2" /> Microsoft.AspNetCore.Mvc包能够允许我们添加控制器并且构建WebAPI, 而Microsoft.AspNetCore.StaticFiles包可以让我们配置提供静态目录访问的功能。例如默认提供/wwwroot目录的访问。<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
我们会使用其他工具去编译Typescript文件,所以需要在PropertyGroup节点中配置 三、配置Startup.cs文件 首先在ConfigServives方法中添加MVC服务:
public void ConfigureServices(IServiceCollection services) { // Add framework services. services.AddMvc(); }
其次Configure方法中的所有代码,使用如下代码替换:
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) { app.Use(async (context, next) => { await next(); if (context.Response.StatusCode == 404 && !System.IO.Path.HasExtension(context.Request.Path.Value) && !context.Request.Path.Value.StartsWith("/api/")) { context.Request.Path = "/index.html"; await next(); } }); app.UseMvcWithDefaultRoute(); app.UseDefaultFiles(); app.UseStaticFiles(); }
第一个app.Use中间件的作用是当系统返回404状态码并且访问的Request不包含文件扩展名并且访问Request不是以“/api/”开头的访问直接将其跳转到/index.html
app.UseMvcWithDefaultRoute()的意思是使用MVC的默认路由中间件。
app.UseDefaultFiles()的意思是启用默认文档提供器中间件,他会对只有主机的URL进行访问时搜索default.html、default.htm、index.html、index.htm文件,如果有就返回内容。
app.UseStaticFiles()的意思启用程序的静态文件支持,也就是启用wwwroot文件夹可以通过URL访问。
四、新建一WebAPIController=》ValuesController,修改get方法
public IEnumerable<string> Get() { return new string[] { "Hello Angular4", "Hello Asp.Net Core 1.1" }; }
五、安装angular/cli,以管理员身份运行命令行,导航到项目根目录
npm install –g @angular/cli
六、测试cli是否安装成功 ng -v
七、创建angular项目;
ng new mycat --skip-install
八、调整目录结构,提取mycat文件到根目录,重命名src为myapp
九、启用Angular的HTTP模式和表单绑定模式,修改myapp/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
十、配置.angular-cli.json,tsconfig.json,tsconfig.app.json,tsconfig.spec.json
angular-cli.json:
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "bamboo.my-web-app" }, "apps": [ { "root": "MyApp", "outDir": "wwwroot", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.css" ], "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "lint": [ { "project": "src/tsconfig.app.json", "exclude": "**/node_modules/**" }, { "project": "src/tsconfig.spec.json", "exclude": "**/node_modules/**" }, { "project": "e2e/tsconfig.e2e.json", "exclude": "**/node_modules/**" } ], "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "component": {} } }
tsconfig.json
{ "compileOnSave": false, "compilerOptions": { "outDir": "./wwwroot/dist/out-tsc", "baseUrl": "MyApp", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ] } }
tsconfig.app.json
{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../wwwroot/out-tsc/app", "baseUrl": "./", "module": "es2015", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ] }
tsconfig.spec.json
{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../wwwroot/out-tsc/spec", "baseUrl": "./", "module": "commonjs", "target": "es5", "types": [ "jasmine", "node" ] }, "files": [ "test.ts" ], "include": [ "**/*.spec.ts", "**/*.d.ts" ] }
app.component.ts
import { Component, OnInit } from '@angular/core'; import { Http } from '@angular/http' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { constructor(private _httpService: Http) { } apiValues: string[] = []; ngOnInit() { this._httpService.get('/api/values').subscribe(values => { this.apiValues = values.json() as string[]; }); } }
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
修改index.html
<div style="text-align:center"> <h1> 这是一个Asp.Net Core 1.1 With Angular4应用程序 </h1> <h2>下面的信息是由Asp.Net Core WebAPI返回的</h2> <ul *ngFor="let value of apiValues"> <li>{{value}}</li> </ul> <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="> </div>
十一、安装Angular所有依赖项
npm install
回到VS,显示全部文件,你会发现多出一个node_module的文件夹,并且依赖项中会出现npm依赖,这个文件夹里包含的就是包括Angular在内的所有依赖包。不要把他包含在项目中。否则会出错。
十二、编译Angular程序 ng build
编译成功之后,回到VS中你会发现wwwroot文件夹下出现了编译好的JS文件和HTML文件等。不要在意wwwroot文件夹的图标从一个小地球变成了文件图标。
十三、使用DotNetCLI编译并运行Asp.NET Core应用程序,执行如下命令: dotnet run 打开浏览器,运行http://localhost:58322,得到如下结果
相关文章推荐
- Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)
- 使用 Asp.net core 2.0 + Angular 4 构建车辆管理的Web应用程序
- ASP.NET Core 中文文档 第二章 指南(8) 使用 dotnet watch 开发 ASP.NET Core 应用程序
- Visual Studio 2017下ASP.NET CORE的TagHelper智能提示解决办法
- Visual Studio 2017 ASP.NET Core开发
- 使用PM2 启动ASP.NET Core应用程序
- 使用 ASP.NET MVC 和 Ext JS 构建以数据为中心的 Web 应用程序
- 使用ASP.NET 构建 Web 应用程序快速入门-8小时的免费培训视频 - Scott Hanselman的中文博客【转载】
- 使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用
- Visual Studio 2015/2017 与ASP.NET CORE 联合创建具有SPA模式的Angular2模板
- 使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用:Task List
- 使用 Visual Studio 的 ASP.NET Core MVC 和 Entity Framework Core 入门 (1 of 10)
- 使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序
- Visual Studio 2017 ASP.NET Core开发
- 使用ASP.NET MVC构建HTML5离线web应用程序
- 使用Metrics.NET 构建 ASP.NET MVC 应用程序的性能指标
- 使用 dotnet watch 开发 ASP.NET Core 应用程序
- 使用 dotnet watch 开发 ASP.NET Core 应用程序
- 使用 dotnet watch 开发 ASP.NET Core 应用程序