Angular proje şablonunu ASP.NET Core ile kullanma

  • Makale
  • Okumak için 2 dakika

güncelleştirilmiş Angular proje şablonu, Angular kullanarak ASP.NET Core uygulamalar için kolay bir başlangıç noktası ve zengin, istemci tarafı kullanıcı arabirimi (uı) uygulamak için Angular clı sağlar.

şablon, bir apı arka ucu görevi gören bir ASP.NET Core projesi ve kullanıcı arabirimi olarak davranacak bir Angular clı projesi oluşturma ile eşdeğerdir. Şablon, her iki proje türünü tek bir uygulama projesinde barındırmanın kolaylığını sunar. Sonuç olarak, uygulama projesi tek bir birim olarak oluşturulup yayımlanabilir.

Yeni uygulama oluşturma

ASP.NET Core 2,1 yüklüyse, Angular proje şablonunu yüklemeye gerek yoktur.

Boş bir dizinde komutunu kullanarak komut isteminden yeni bir proje oluşturun dotnet new angular . Örneğin, aşağıdaki komutlar uygulamayı Yeni bir uygulama dizininde oluşturur ve bu dizine geçer:

dotnet new angular -o my-new-app
cd my-new-app

uygulamayı Visual Studio veya .NET Core CLI çalıştırın:

Oluşturulan . csproj dosyasını açın ve uygulamayı buradan normal olarak çalıştırın.

Yapı işlemi ilk çalıştırmada NPM bağımlılıklarını geri yükler ve bu işlem birkaç dakika sürebilir. Sonraki derlemeler çok daha hızlıdır.

proje şablonu, bir ASP.NET Core uygulaması ve bir Angular uygulaması oluşturur. ASP.NET Core uygulaması veri erişimi, yetkilendirme ve diğer sunucu tarafı sorunları için kullanılmak üzere tasarlanmıştır. clientapp alt dizininde bulunan Angular uygulamasının tüm kullanıcı arabirimi sorunları için kullanılması amaçlanmıştır.

Sayfa, resim, stil, modül vb. ekleyin

clientapp dizini bir standart Angular clı uygulaması içerir. daha fazla bilgi için resmi Angular belgelerine bakın.

bu şablon tarafından oluşturulan Angular uygulaması ve Angular clı tarafından (aracılığıyla) oluşturulan hafif farklar vardır ng new ; ancak, uygulamanın özellikleri değiştirilmez. Şablon tarafından oluşturulan uygulama, önyüklemetabanlı bir düzen ve temel bir yönlendirme örneği içerir.

Çalıştır komutları

Bir komut isteminde clientapp alt dizinine geçin:

cd ClientApp

ngAraç genel olarak yüklüyse, komutlarından birini çalıştırabilirsiniz. örneğin, ng lint ng test ya da diğer Angular clı komutlarındanbirini çalıştırabilirsiniz. ng serveASP.NET Core uygulamanız uygulamanızın sunucu tarafı ve istemci tarafı bölümlerine sunma konusunda anlaştığından, ancak bu çalışmaya gerek yoktur. Dahili olarak, ng serve geliştirme sürecinde kullanır.

ngYüklü bir araç yoksa, npm run ng bunun yerine çalıştırın. Örneğin, npm run ng lint veya çalıştırabilirsiniz npm run ng test .

NPM paketlerini yükler

Üçüncü taraf NPM paketlerini yüklemek için clientapp alt dizininde bir komut istemi kullanın. Örnek:

cd ClientApp
npm install --save <package_name>

Yayımla ve dağıt

Geliştirme aşamasında uygulama, geliştirici kolaylığı için iyileştirilmiş bir modda çalışır. Örneğin, JavaScript demeti kaynak eşlemeleri içerir (hata ayıklarken, özgün TypeScript kodunuzu görebilirsiniz). Uygulama TypeScript, HTML ve CSS dosya değişikliklerini diskte izler ve bu dosya değişikliğini gördüğünde otomatik olarak yeniden derlenir ve yeniden yükler.

Üretimde, uygulamanızın performans için iyileştirilmiş bir sürümünü sunar. Bu otomatik olarak gerçekleşecek şekilde yapılandırılmıştır. Yayımladığınızda, derleme yapılandırması, istemci tarafı kodunuzun küçültülmüş, önceden derlenmiş bir derlemesini yayar. Geliştirme derlemesinin aksine, üretim derlemesi sunucuya Node.js yüklenmesini gerektirmez (sunucu tarafı işlemesini (SSR) etkinleştirmediğiniz müddetçe).

standart ASP.NET Core barındırma ve dağıtım yöntemlerikullanabilirsiniz.

Bağımsız olarak "ng hizmeti" Çalıştır

proje, ASP.NET Core uygulama geliştirme modunda başladığında arka planda Angular clı sunucusunun kendi örneğini başlatacak şekilde yapılandırılmıştır. Ayrı bir sunucuyu el ile çalıştırmak zorunda olmadığınızdan bu kullanışlıdır.

Bu varsayılan Kurulumun bir dezavantajı vardır. C# kodunuzu her değiştirişinizde ve ASP.NET Core uygulamanızın yeniden başlatılması gerektiğinde, Angular clı sunucusu yeniden başlatılır. Yeniden başlatmak için yaklaşık 10 saniye gereklidir. sık kullanılan C# kod düzenlemeleri oluşturuyorsanız ve Angular clı 'nın yeniden başlamasını beklemek istemiyorsanız, ASP.NET Core işleminden bağımsız olarak Angular clı sunucusunu dışarıdan çalıştırın. Bunun için:

  1. bir komut isteminde clientapp alt dizinine geçin ve Angular clı geliştirme sunucusunu başlatın:

    cd ClientApp
npm start

    Önemli

    npm start ng serve package.jsüzerindeki yapılandırmanın kullanılması için değil Angular clı geliştirme sunucusunu başlatmak için kullanın. Angular clı sunucusuna ek parametreler geçirmek için, bunları scripts package.js dosyadaki ilgili satıra ekleyin.

  2. ASP.NET Core uygulamanızı, kendi kendine birini başlatmak yerine dış Angular clı örneğini kullanacak şekilde değiştirin. Başlangıç sınıfınıza, spa.UseAngularCliServer çağrıyı aşağıdaki ile değiştirin:

    spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

ASP.NET Core uygulamanızı başlattığınızda, Angular clı sunucusu başlatılmaz. Bunun yerine el ile başlattığınız örnek kullanılır. Bu, daha hızlı başlamasını ve yeniden başlatılmasını sağlar. artık Angular clı 'nin istemci uygulamanızı her seferinde yeniden oluşturması bekleniyordu.

.NET kodundan verileri TypeScript koduna geçirme

ssr sırasında, ASP.NET Core uygulamanızdaki istek başına verileri Angular uygulamanıza geçirmek isteyebilirsiniz. Örneğin, cookie bilgileri veya bir veritabanından okunan bir şeyi geçirebilirsiniz. Bunu yapmak için Başlangıç sınıfınızı düzenleyin. İçin geri çağırmada UseSpaPrerendering , aşağıdaki gibi bir değer ayarlayın options.SupplyData :

options.SupplyData = (context, data) =>
{
    // Creates a new value called isHttpsRequest that's passed to TypeScript code
    data["isHttpsRequest"] = context.Request.IsHttps;
};

SupplyDataGeri arama, isteğe bağlı olarak, JSON ile seri hale getirilebilir verileri (örneğin, dizeler, Boole değerleri veya sayılar) geçirmenize olanak sağlar. Main. Server. TS kodunuz bunu olarak alır params.data . Örneğin, yukarıdaki kod örneği params.data.isHttpsRequest geri çağırmada olduğu gibi bir Boole değeri geçirir createServerRenderer . Bunu, Angular tarafından desteklenen herhangi bir şekilde uygulamanızın diğer bölümlerine geçirebilirsiniz. Örneğin, bkz. Main. Server. TS BASE_URL değeri, Oluşturucusu onu almak için bildirildiği herhangi bir bileşene geçirir.

SSR 'nin dezavantajları

Tüm uygulamalar SSR 'den faydalanır. Birincil avantaj, performans algılanır. Yavaş bir ağ bağlantısı veya yavaş mobil cihazlarda uygulamanıza ulaşan ziyaretçiler, JavaScript paketlerini getirme veya ayrıştırma sırasında bile ilk Kullanıcı arabirimine hızlı bir şekilde bakın. Ancak, çoğu maça genellikle uygulamanın neredeyse anında göründüğü hızlı bilgisayarlarda hızlı, dahili şirket ağları üzerinde kullanılır.

Aynı zamanda SSR 'yi etkinleştirmenin önemli sakıncaları vardır. Geliştirme sürecinizi karmaşıklık altına ekler. Kodunuzun iki farklı ortamda çalışması gerekir: istemci tarafı ve sunucu tarafı (ASP.NET Core tarafından çağrılan Node.js bir ortamda). Göz önünde bulundurmanız gereken bazı şeyler aşağıda verilmiştir:

  • SSR, üretim sunucularınızda Node.js yüklemesi gerektirir. Azure uygulama hizmetleri gibi bazı dağıtım senaryolarında bu durum otomatik olarak yapılır, ancak Azure Service Fabric gibi diğerleri için de değildir.

  • BuildServerSideRendererYapı bayrağını etkinleştirmek, node_modules dizininizin yayımlamasına neden olur. Bu klasör, dağıtım süresini artıran 20000 + dosyalarını içerir.

  • Kodunuzu Node.js bir ortamda çalıştırmak için, veya gibi tarayıcıya özgü JavaScript API 'Lerinin varlığına bağlı olamaz window localStorage . Kodunuz (veya başvuru yaptığınız bazı üçüncü taraf kitaplığı) Bu API 'Leri kullanmayı denediğinde SSR sırasında bir hata alırsınız. Örneğin, birçok yerde tarayıcıya özgü API 'Lere başvurduğundan jQuery kullanmayın. Hataları önlemek için SSR 'yi kullanmaktan veya tarayıcıya özgü API 'lerden ya da kitaplıklardan kaçınmalısınız. Bu tür API 'lere yapılan çağrıları SSR sırasında çağrıdıklarından emin olmak için, denetimleri içinde kaydırabilirsiniz. Örneğin, JavaScript veya TypeScript kodunda aşağıdakiler gibi bir denetim kullanın:

    if (typeof window !== 'undefined') {
    // Call browser-specific APIs here
}

Ek kaynaklar