ASP를 변환합니다.NET Core와 Angular 응용 프로그램을 데스크톱 응용 프로그램에 연결

13974 단어 webdev csharp dotnet angular

이 블로그에서는 ASP를 변환하는 방법에 대해 설명합니다.NET Core, 각도(2~9+)가 있는 웹 응용 프로그램으로 데스크톱 응용 프로그램에 연결할 수 있습니다.우리는 전자로 이 점을 실현해야 한다.NET dll에서 파일을 컴파일합니다.
Electron 웹 기술을 사용하여 크로스플랫폼 데스크톱 응용 프로그램을 구축할 수 있습니다.그것은 노드를 이용한다.js와 Chromium 렌더링 엔진이 데스크톱 셸에서 웹 프로그램을 실행합니다.

선결 조건

Visual Studio

Angular(2~9개 버전)

Electron Net NuGet package

ASP를 만듭니다.NET Core 및 Angular 애플리케이션

ASP에서 Angular 애플리케이션을 실행하려면 다음 절차를 따르십시오.NET 핵심 환경:
첫 번째 단계: 먼저 ASP를 선택하여 새 항목을 만듭니다.NET 핵심 웹 응용 프로그램 옵션그런 다음 다음을 클릭합니다.

2단계: 이제 ASP의 각도 템플릿을 선택합니다.순핵심.그런 다음 다음을 클릭합니다.
3단계: 그런 다음 항목에 이름을 지정하고 다음을 클릭합니다.
4단계: 마지막으로 Angular 템플릿을 선택하고 Configure for HTTPS 확인란을 선택한 다음Create를 클릭합니다.프로젝트를 만든 후 필요한 경우 Angular 애플리케이션을 최신 버전으로 업그레이드할 수 있습니다.

참고: Angular 애플리케이션을 개별적으로 만들어 ASP를 구성할 수도 있습니다.NET Core는 ASP에서 Angular 애플리케이션을 실행합니다.NET 핵심 웹 응용 프로그램

전자로 전자를 배치하다.NET 동적 링크 라이브러리

전자 네트워크를 설치하다.API NuGet 패키지

첫 번째 단계: 먼저 만든 항목을 마우스 오른쪽 버튼으로 클릭하고 Manage NuGet Packages 를 선택합니다.

2단계: 찾아보기 탭으로 전환합니다.그리고 전자를 찾아라.NET NuGet 패키지를 설치하고 설치합니다.

전자를 구성하다.NET 프로그래밍.cs 파일

단계 1: 현재 프로그램에 다음 이름 공간을 추가합니다.cs 파일.

using ElectronNET.API;

2단계: 그런 다음 전자를 구성합니다.NET 패키지.UseElectron WebHostBuilder를 사용하여 cs 파일을 생성합니다.

public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
    WebHost.CreateDefaultBuilder(args)
        .UseStartup<Startup>()
        .UseElectron(args);

전자를 구성하다.NET의 초창기 기업에서의 응용cs 파일

첫 번째 단계: 시작에 다음 이름 공간을 추가합니다.cs 파일.

using ElectronNET.API;
using ElectronNET.API.Entities;

2단계: ElectronBootstrap 방법을 시작 상태로 설정합니다.cs 파일.

public async void ElectronBootstrap()
{
    BrowserWindowOptions options = new BrowserWindowOptions
    {
        Show = false,
    };
    BrowserWindow mainWindow = await Electron.WindowManager.CreateWindowAsync(options);
    mainWindow.OnReadyToShow += () =>
    {
        mainWindow.Show();
        mainWindow.SetTitle(“Application Name”);

    };

}

3단계: 이제 전자를 설정합니다.NET 패키지, 시작할 때 Configure 방법의 ElectronBootstrap 방법을 호출합니다.cs 파일.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ElectronBootstrap();
}

전자 네트워크를 설치하다.CLI NuGet 패키지

ElectronNET.CLI NuGet package 데스크탑 어플리케이션을 구축하고 실행하는 데 사용됩니다.이 패키지를 글로벌 패키지로 설치할 수 있습니다.이렇게 하면 패키지 관리자 컨트롤러나 명령 알림부호에서 다시 사용할 수 있습니다.
다음 명령을 사용하여 ElectronNET를 설치합니다.프로젝트의 CLI 번들:
| dotnet tool install ElectronNET.CLI -g |

사용자 정의 디버그 및 데스크톱 메뉴

개발자 창을 사용하여 데스크톱 응용 프로그램을 디버깅하려면 ElectronBootstrap 메서드에서 다음 코드를 사용합니다.
디버깅

mainWindow.WebContents.OpenDevTools();

또한 ElectronBootstrap 방법의 코드를 사용하여 기존 데스크톱 메뉴를 추가하거나 업데이트할 수 있습니다.
데스크톱 메뉴

    MenuItem[] menu = new MenuItem[]
    {
new MenuItem
{
      Label = “File”,
      Submenu=new MenuItem[]
      {
         new MenuItem
         {
             Label =”Exit”,
             Click =()=>{Electron.App.Exit();}
         }
      }
},
new MenuItem
{
      Label = “Info”,
      Click = async ()=>
      {
         await Electron.Dialog.ShowMessageBoxAsync(“Welcome to App”);
      }
}
   };
   Electron.Menu.SetApplicationMenu(menu);

데스크톱 아이콘 및 시작 화면 사용자 정의

또한 electron을 사용하여 시작 화면 이미지와 데스크톱 아이콘을 업데이트할 수 있습니다.표시루트 디렉터리의 json 파일입니다.
바탕 화면 아이콘을 업데이트하고 화면을 시작하려면 다음 코드 예제를 참조하십시오.

{
    “executable”: “Sample”,
    “Splashscreen”: {
        “imageFile”: “2280.png”
    },
    “name”: “Sample”,
    “author”: “”,
    “singleInstance”: false,
    “environment”: “Production”,
    “build”: {
        “appId”: “com.Sample.app”,
        “productName”: “Sample”,
        “win”: {
            “icon”: “./bin/tbl.png”
        },

초기화 및 생성

데스크톱 프로그램을 초기화하고 구축하는 과정을 보여 줍니다.
주의: 만약 당신의 ASP가 있다면.NET Core 프로젝트는 Angular 템플릿이 없는 상태에서 만들어진 다음 electronize 명령을 실행하기 전에 다음 명령을 사용하여 Angular production build을 실행합니다.
| ng build --prod |
1단계: 명령 프롬프트나 패키지 관리자 콘솔에서 다음 명령을 실행합니다.이 명령은 처음 실행할 수 있습니다.
| electronize init |
주의: init 명령을 실행하면 전자입니다.목록 파일은 루트 디렉터리에 생성됩니다.데스크톱 프로그램에 프로그램 코드의 업데이트를 포함하려면 electronize init 명령을 실행하십시오.
2단계: 다음 명령을 사용하여 프로그램을 멈추지 않고 변경 사항을 관찰합니다.
| electronize start |
3단계: 마지막으로 다음 명령 목록을 실행하여 해당하는 운영체제에 데스크톱 프로그램을 생성합니다.
|

electronize build /target win

electronize build /target osx

electronize build /target linux

ASP.Electron 프레임워크를 사용하여 데스크톱 응용 프로그램으로 변환하는 NET 커널

결론

이 블로그에서 ASP를 변환하는 방법을 배웠습니다.NET Core는 Electron 프레임워크를 사용하는 데스크톱 응용 프로그램에 Angular 응용 프로그램과 연결합니다.본 블로그에서 토론하는 절차를 시도해 보고 아래의 피드백 부분에 당신의 평론을 남겨 보세요!
SyncfusionAngular UI component 라이브러리는 Angular 응용 프로그램을 구축하는 데 필요한 유일한 세트입니다. 왜냐하면 한 가방에 65개 이상의 고성능, 경량, 모듈화, 응답성 UI 구성 요소를 포함하기 때문입니다.그것들을 사용하여 세계적인 응용 프로그램을 구축합니다!
기존 고객의 경우 License and Downloads 페이지에서 새 Essential Studio 버전을 다운로드할 수 있습니다.Syncfusion 고객이 아닌 경우 사용 가능한 기능을 30일free trial 동안 검토해 보십시오.
저희support forum, Direct-Trac 또는 feedback portal를 통해서도 저희에게 연락하실 수 있습니다.우리는 언제든지 기꺼이 당신을 돕겠습니다!