未加星标

Angular2 CLI with ASP.NET Core application - Tutorial

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Few weeks ago I have posted atutorial on how to build an Angular2 application with ASP.NET Core API. Today, I would like to show you another way to accomplish that - by using Angular2 CLI , which has built in support for building and bundling Angular2 applications.

Creating an application Working with your application Building for deployment Angular2 CLI

I have blogged about itlast week, but in short, it is a command line tool to help you work with Angular2 applications:

initialize a new app generate code for new components, services etc. serve locally during development build for deployment

Using it is much simpler, than configuring the application manually. If you are starting a new app, I strongly recommend using it.

Creating an application

I will now walk you through the process of creating an app using Visual Studio 2015. The whole code is available on GitHub . Thanks to the input from Pawe Sotysiak , the project is also compatible with VS Code.

Backend project

Open Visual Studio and create a new ASP.NET Core project called Backend in the new solution. Name the solution with your project name.


Angular2 CLI with ASP.NET Core application - Tutorial
Configure MVC

Because we have created an empty project, we need to configure MVC and add support for static files. For that, you need to add these two packages to project.json file:

"Microsoft.AspNetCore.Mvc": "1.0.1", "Microsoft.AspNetCore.StaticFiles": "1.0.0",

When that’s done, you can modify the Startup class:

public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) { loggerFactory.AddConsole(); if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.Use(async (context, next) => { await next(); if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value) && !context.Request.Path.Value.StartsWith("/api/")) { context.Request.Path = "/index.html"; await next(); } }); app.UseMvc(); app.UseStaticFiles(); } }

Frontend project

Next, add a new Class Library project in this solution.


Angular2 CLI with ASP.NET Core application - Tutorial

I have used the Class Library so that the frontend part is visible in the Visual Studio.

Now, open a command prompt. If you haven’t done that already, install Angular CLI with npm install -g angular-cli . Next, cd to the Frontend directory and run ng init --name ProjectName . This step will take a while. Ng will bootstrap your angular application and download all npm packages that you need.

Proxy to the API

Because you will use TypeScript to write the frontend part, you can’t just serve these files to the browser. In the previous tutorial, I have used gulp to process all the files. Here, we will use ng command for it. The ng serve command is building the app, serves it on 4200 port and watches for changes you make in your code. When it detects modified file, it rebuilds the app and sends an event to the browser so it refreshes the window. This is great, but we also need to call our ASP API somehow. This is where the proxy configuration comes in. You need to create a file called proxy.conf.json in the Frontend directory:

{ "/api": { "target": "http://localhost:65498", "secure": false } }

The target value contains a port number. If you’re using Visual Studio, you can read it from Backend project properties.


Angular2 CLI with ASP.NET Core application - Tutorial

This will pass all the API requests to the running ASP.NET Core application.

The last thing we need to do here is to modify npm start script, so it uses the proxy configuration. Open package.json in the Frontend project, find the scripts section and modify start command to:

"start": "ng serve --proxy-config proxy.conf.json"

Build config

I mentioned above, we will use the cli to build the angular app. The CLI tool, by default, creates the files in the dist directory. We will change it to wwwroot in our backend app. For that, open angular-cli.json file and edit outDir property:

"outDir": "../Backend/wwwroot"

Working with your application

Now, when everything is set up, there are few things to remember.

Development

To work on the app, you need to start both, ng dev server and ASP.NET application. The first one is started with the command npm start executed from the Frontend directory. Backend app can be started from the Visual Studio or also command line with dotnet watch run . If you use the command line version, be careful about the port it uses and set it up properly in the proxy config file. The watch command in dotnet watches for changes in the application and rebuilds it whenever you change something.

You can also use ng tool to generate the angular2 files for you. Here are some useful commands. You can find all the details in the documentation

ng g component my-new-component ng g directive my-new-directive ng g pipe my-new-pipe ng g service my-new-service ng g module my-module

The route command has been temporarily disabled due to the changes in the router, but it’s probably coming back soon.

Building for deployment

To deploy the app, you need to first build the angular2 app with ng build command. It will transpile and bundle all needed files and copy everything, including static files, to wwwroot folder of the backend application. When it’s done, you can use Publish option in Visual Studio to generate the whole package.

Summary

As you see, the process described here is very straight forward. In these few steps, what you get is an application, which is very easy to maintain and deploy. You can do it all manually, or clone my seed repository , rename the project and start working on your application.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Angular2 CLI with ASP.NET Core application - Tutorial
本站链接:http://www.codesec.net/view/531845.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(65)