Cara Menggunakan AngularJS di ASP.NET MVC dan Entity Framework

Hari-hari ini, tampaknya seperti semua orang berbicara tentang AngularJS dan ASP.NET MVC. Jadi dalam posting ini kita akan belajar bagaimana menggabungkan yang terbaik dari kedua dunia dan menggunakan kebaikan AngularJS di ASP.NET MVC dengan menunjukkan bagaimana menggunakan AngularJS dalam aplikasi ASP.NET MVC. Kemudian di pos, kita akan melihat bagaimana untuk mengakses data menggunakan database Entity Framework sebagai pendekatan pertama, maka kita akan membahas bagaimana untuk mengakses data di AngularJS dan kemudian lulus ke tampilan menggunakan controller. Singkatnya, posting ini akan menyentuh:

· Menambahkan perpustakaan AngularJS di ASP.NET MVC;
· Referensi AngularJS, bundling dan minification;
· Mengambil data menggunakan database Entity Framework;
· Kembali data JSON dari controller ASP.NET;
· Mengkonsumsi Data JSON di layanan AngularJS;
· Menggunakan layanan AngularJS di AngularJS controller untuk melewatkan data ke tampilan; dan
· Data render pada AngularJS View

Untuk memulai, mari kita membuat aplikasi ASP.NET MVC dan klik kanan pada proyek MVC. Dari menu konteks, klik Manage Nuget Paket. Mencari paket AngularJS dan menginstal ke dalam proyek.

 

Setelah berhasil menambahkan perpustakaan AnngularJS, Anda dapat menemukan file-file di dalam folder Scripts.

Referensi perpustakaan AngularJS

Anda memiliki dua pilihan untuk menambah referensi perpustakaan AngularJS dalam proyek: MVC minification dan bundling atau dengan menambahkan AngularJS di bagian Script dari pandangan individu. Jika Anda menggunakan bundling, maka AngularJS akan tersedia di seluruh proyek. Namun Anda memiliki pilihan untuk menggunakan AngularJS pada pandangan tertentu juga.

Katakanlah Anda ingin menggunakan AngularJS pada pandangan tertentu (Index.cshtml) dari Home kontroler. Pertama, Anda perlu untuk merujuk ke perpustakaan AngularJS dalam bagian script seperti berikut: