Mencampur api Angular dan ASP.NET MVC / Web?


87

Saya berasal dari menggunakan ASP.NET MVC / Web API dan sekarang saya mulai menggunakan Angular tetapi saya tidak jelas tentang cara yang tepat untuk mencampurnya.

Setelah saya menggunakan Angular, apakah konsep sisi server MVC masih memberikan nilai? Atau haruskah saya benar-benar menggunakan API Web semata-mata untuk mendapatkan data untuk panggilan HTTP sudut?

Setiap tips yang Anda miliki untuk seorang pria ASP.NET MVC yang bertransisi ke Angular akan sangat membantu


4
Itu akan tergantung, tapi saya akan berpikir "haruskah saya benar-benar menggunakan API Web murni untuk mendapatkan data untuk panggilan HTTP sudut" adalah cara yang benar untuk melakukannya.
MikeSmithDev

Berikut adalah tutorial untuk membuat aplikasi Angular dengan backend ASP.NET Core Web API -> medium.com/@levifuller/…
Levi Fuller

Jawaban:


113

API Web Murni

Aku digunakan untuk menjadi cukup hardcore dengan ASP.NET MVC tapi karena aku sudah bertemu sudut saya tidak melihat satu alasan mengapa saya menggunakan setiap sisi server kerangka generasi konten. Pure Angular / REST (WebApi) memberikan hasil yang lebih kaya dan lebih halus. Ini jauh lebih cepat dan memungkinkan Anda membangun situs web yang mendekati aplikasi desktop, tanpa peretasan yang funky.

Angular memang memiliki sedikit kurva pembelajaran, tetapi setelah tim Anda menguasainya, Anda akan membangun situs web yang jauh lebih baik dalam waktu yang lebih singkat. Terutama ini berkaitan dengan fakta bahwa Anda tidak lagi memiliki semua masalah status (kurang) ini.

Misalnya bayangkan wujud penyihir dengan kerangka sisi server tradisional apa pun. Setiap halaman perlu divalidasi dan dikirimkan secara terpisah. Mungkin konten halaman bergantung pada nilai-nilai dari halaman sebelumnya. Mungkin pengguna menekan tombol kembali dan mengirimkan kembali formulir sebelumnya. Di mana kami menyimpan status klien? Semua komplikasi ini tidak ada saat menggunakan Angular dan REST.

Jadi ... pergilah ke sisi gelap ... kita punya kue.

Pertanyaan serupa


Saya setuju tentang: kecepatan dan kelancaran pengembangan aplikasi melalui Angular. Di MVC atau WebForms (ugh) Anda menghabiskan waktu ini untuk memuntahkan markup, dan kemudian harus melakukan beberapa lintasan membaut kode klien ke atasnya, yang terasa aneh, padat karya, dan karena sifatnya yang terputus, membuang-buang banyak waktu melakukan hal-hal sederhana.
moribvndvs

3
@Bayu_joo; Ini memberikan beberapa cinta SEO.
null

5
Karena ketika saya mengganti nama properti pada model tertentu, saya tidak perlu mencari di sekitar AngularJS untuk "string ajaib"? Angular memang bagus, tetapi dalam jenis dunia .net yang aman dan ketat, integrasi yang lebih ketat memungkinkan Anda memanfaatkan keamanan jenis dari sisi server.
Sleeper Smith

6
@Sleeper Smith: Saya sering bertengkar dengan orang-orang di tim saya, tetapi pada konvensi kode akhir , pengujian unit dan pemisahan masalah menawarkan lebih banyak daripada semua jenis keamanan di dunia. Saya juga ingin melihat JS diganti dengan sesuatu seperti C # , tetapi kenyataannya bukan itu masalahnya. Yang terpenting adalah hasil yang bisa Anda raih. Pelanggan Anda mungkin tidak peduli dengan preferensi pengkodean Anda, mereka menginginkan situs web yang tampak keren, berkinerja mulus, dan mereka menginginkannya cepat. Angular menyelesaikan pekerjaan itu.
null

1
Misalnya, ketika menggunakan KnockoutJS saya biasa membuat aplikasi ASP.NET MVC normal dan setiap tampilan akan menerima data model dari MVC Controller. Kemudian data dari server ini akan diserialkan menjadi JSON dan dari sana KnockoutJS akan mengubahnya menjadi data yang dapat diamati, jadi saya akan mendapatkan data binding dua arah. Dan itu luar biasa! Tapi apa yang kita lakukan sekarang, karena AngularJS memiliki sistem peruteannya sendiri? Apa yang terjadi dengan perutean MVC? Apakah kita menggunakannya sama sekali? Apa yang terjadi sekarang dengan tampilan "_Layout" dan @RenderBody ()?
AlexRebula

43

AngularJS lebih terkait dengan paradigma aplikasi halaman tunggal, dan karena itu, tidak banyak mendapat manfaat dari teknologi sisi server yang merender markup. Tidak ada alasan teknis yang menghalangi Anda untuk menggunakannya bersama-sama, tetapi dalam arti praktis, mengapa Anda melakukannya?

SPA mengambil aset yang dibutuhkannya (tampilan JS, CSS, dan HTML) dan berjalan sendiri, berkomunikasi kembali ke layanan untuk mengirim atau mengambil data. Jadi, teknologi sisi server masih diperlukan untuk menyediakan layanan tersebut (serta cara lain seperti otentikasi dan sejenisnya), tetapi bagian rendering sebagian besar tidak relevan dan tidak terlalu berguna karena ini merupakan duplikasi upaya, kecuali MVC yang melakukannya. di sisi server dan Angular melakukannya di klien. Jika Anda menggunakan Angular, Anda menginginkannya di klien untuk hasil terbaik. Anda dapat membuat formulir HTML posting Angular dan mengambil sebagian tampilan dari tindakan MVC, tetapi Anda akan kehilangan fitur terbaik dan termudah dari Angular dan membuat hidup Anda lebih sulit.

MVC cukup fleksibel dan Anda dapat menggunakannya untuk melayani panggilan dari aplikasi SPA. Namun, WebAPI lebih teliti dan sedikit lebih mudah digunakan untuk layanan semacam itu.

Saya telah menulis sejumlah aplikasi AngularJS, termasuk beberapa yang bermigrasi dari aplikasi WebForms dan MVC yang sudah ada sebelumnya, dan aspek ASP.NET berkembang menuju platform untuk mengirimkan aplikasi AngularJS sebagai klien sebenarnya, dan untuk menghosting lapisan aplikasi klien berkomunikasi melalui REST (menggunakan WebAPI). MVC adalah kerangka kerja yang bagus, tetapi biasanya tidak memiliki pekerjaan dalam aplikasi semacam ini.

Aplikasi ASP.NET menjadi lapisan lain untuk infrastruktur, di mana tanggung jawabnya terbatas pada:

  • Menghosting wadah ketergantungan.
  • Masukkan implementasi logika bisnis ke dalam wadah.
  • Siapkan bundel aset untuk JS dan CSS.
  • Host layanan WebAPI.
  • Terapkan keamanan, lakukan pencatatan dan diagnostik.
  • Berinteraksi dengan cache aplikasi untuk kinerja.

Hal hebat lainnya tentang SPA adalah dapat meningkatkan bandwidth tim Anda. Satu grup dapat meledakkan layanan sementara yang lain berada di aplikasi klien. Karena Anda dapat dengan mudah menghentikan atau meniru layanan REST, Anda dapat memiliki aplikasi klien yang berfungsi penuh pada layanan tiruan dan menukar dengan yang asli setelah selesai.

Anda memang harus berinvestasi di muka di Angular, tetapi hasilnya besar. Karena Anda sudah terbiasa dengan MVC, Anda memiliki pengetahuan tentang beberapa konsep inti.


Oke, jadi saya ingin menggunakan Angular dan memiliki back-end .NET untuk menjaga produktivitas saya dengan API, Entity Framework, keamanan, dll. Apakah halaman saya masih memerlukan konfigurasi / tata letak master-anak sisi server? Apa yang saya gunakan untuk itu - WebForms (tidak - lalu saya mendapatkan kondisi tampilan), MVC, Halaman Web ASP.NET, atau yang lainnya?
Sean

1
Secara teknis, Anda tidak memerlukan halaman server, halaman tata letak, dll. Cukup HTML biasa. Namun, bergantung pada ukuran dan kompleksitas aplikasi Anda, Anda mungkin ingin memecah aplikasi Angular Anda menjadi beberapa aplikasi berbeda berdasarkan fungsionalitas (dan Anda dapat menautkan dari satu aplikasi ke aplikasi lain menggunakan navigasi umum atau apa pun). Dalam hal ini, Anda dapat menggunakan halaman tata letak untuk menjaga agar semuanya tetap KERING dan konsisten. Selain itu, Anda mungkin menggunakan bundel aset untuk CSS atau skrip, dan memiliki halaman root yang Razor atau apa pun yang akan menyatukan semuanya dengan baik.
moribvndvs

1
Saya telah menggunakan ASP.NET MVC selama tiga tahun sekarang di setidaknya 8 proyek besar dan saya terbiasa dengan kerangka kerja sisi server yang bagus dan matang ini. Namun saya tahu pentingnya SPA dan saya menyukai Angular, jadi saya memutuskan sekarang untuk menggunakan mini SPA atau aplikasi hybrid ... atau "SPA silo" seperti yang disebut Miguel Castro. Pertanyaan saya adalah - Bagaimana dengan otorisasi dan otentikasi? Saya tahu ASP.NET MVC memudahkan tugas ini secara siginficantly. Bagaimana ini dilakukan tanpa ASP.NET MVC?
AlexRebula

1
@AlexRebula Saya pikir pertanyaannya lebih merupakan pertanyaan tentang bagaimana Anda ingin melakukan otentikasi di WebApi vs MVC. Biasanya dengan cookie (Anda bahkan dapat menggunakan cookie FormsAuth atau ASP.NET Identity dengan WebApi) atau header (OAuth, dll.). Kedua pendekatan ini didukung penuh oleh API Web dan Angular, tetapi mengharuskan Anda membuat pilihan tentang penerapannya. Sulit untuk memberi Anda jawaban yang lebih tepat tanpa rincian lebih lanjut tentang apa yang Anda lakukan dan apa tujuan spesifik Anda.
moribvndvs

@HackedByChinese Saya mengerti. Dan sekarang saya pikir akan sangat bagus jika saya memiliki lebih banyak waktu untuk menggali lebih dalam Web API ...
AlexRebula

6

Itu tergantung pada proyek yang sedang Anda kerjakan.

Jika angularJS adalah sesuatu yang baru untuk Anda, saya lebih suka memilih proyek kecil berisiko / bertekanan untuk memulai dan memastikan Anda mempelajari cara melakukan hal-hal dengan cara yang benar (Saya telah melihat banyak proyek yang menggunakan Angularjs salah karena tekanan, tenggat waktu ... kurangnya waktu untuk mempelajarinya dengan cara yang tepat, misalnya menggunakan JQuery atau mengakses DOM di dalam pengontrol, dll ...).

Jika proyeknya adalah bidang hijau, dan Anda memiliki pengalaman di AngularJS, masuk akal untuk meninggalkan ASP.net MVC dan di sisi server gunakan REST / WebAPI murni.

Jika itu adalah proyek yang sudah ada, Anda dapat mengambil subset fungsionalitas yang kompleks dan membangun halaman itu sebagai aplikasi angularJS terpisah (misalnya, aplikasi Anda terdiri dari sekumpulan besar halaman standar sederhana / menengah dengan kompleksitas Razor tetapi Anda membutuhkan dan editor tingkat lanjut / halaman, itu bisa menjadi bagian target untuk membangun dengan AngularJS).


1
Saya menyukai jawaban Anda dan paling setuju dengan apa yang Anda katakan. Namun ada satu hal yang menggangguku. ASP.NET MVC adalah kerangka kerja sisi server yang sangat bagus dan matang dengan fitur bawaan yang hebat seperti otentikasi dan otorisasi. Anda menulis bahwa seseorang dapat meninggalkan ASP.NET MVC untuk menggunakan REST / WebAPI murni. Sekarang saya bertanya-tanya: Apakah otentikasi dan otorisasi semudah di ASP.NET MVC? Belum lagi betapa mudahnya mengimplementasikan OAuth untuk Google dll. Jadi pertanyaan saya adalah, betapa mudahnya menyelesaikan semua hal itu dengan REST / WebAPI. Jadi saya akan mempertimbangkan untuk memiliki SPA mini.
AlexRebula

Dalam kasus kami, kami menyiapkan token di setiap permintaan http (http default tempat tunggal untuk menambahkannya) menggunakan ASP .net MVC / api web AuthorizeAttribute untuk memeriksa token dan izin, Anda juga dapat di dalam metode api web mendapatkan token itu dan melakukan pemeriksaan keamanan yang lebih baik. Jika Anda membutuhkan OAuth, ada perpustakaan juga di sisi sudut untuk membantu Anda dengan itu.
Braulio

0

Anda dapat menggunakan kerangka kerja Angular untuk pengembangan ujung depan yaitu untuk membuat tampilan. Ini memberi Anda arsitektur yang kuat dan setelah Anda mempelajarinya, Anda akan menemukan keunggulannya dibandingkan mesin razor view Asp.net MVC. Untuk mengambil data, Anda harus menggunakan WebAPI dan sekarang proyek ASP.Net MVC mendukung pengontrol WebAPI dan MVC di luar kotak. Anda dapat merujuk tautan di bawah ini mulai dengan Angular dan pengembangan aplikasi ASP.Net MVC.

http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/

Ada dua kerangka kerja yang saat ini tersedia untuk mengembangkan komponen UI untuk aplikasi sudut. Saya telah menggunakan kedua kerangka kerja ini di salah satu proyek sudut yang saya kerjakan.

Bahan https://material.angular.io/

PrimeNG https://www.primefaces.org/primeng/#/

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.