AngularJS Directive vs Service vs Controller

Saya akan mulai menerapkan permintaan perubahan di situs web internal perusahaan saya, yang akan memeriksa banyak bidang dan menyorotnya jika cocok dengan pedoman tertentu. Misalnya, jika tanggal lahir hari ini, bidang itu akan diuraikan dan tooltip akan mengatakan "Semoga mereka selamat ulang tahun!".

Spesifikasi meminta ini untuk dimuat setelah sisa halaman selesai dirender, sehingga tidak akan menambah waktu buka. Karena saya baru di angularJS, saya tidak yakin dengan cara yang 'tepat' yang harus dilakukan.

Masalah:

Karena ini termasuk menambahkan batas dan gambar dan atribut judul (manipulasi DOM), sepertinya saya harus menggunakan arahan.

Namun, ini tidak akan dapat digunakan kembali atau 'pendek' seperti kebanyakan arahan tampaknya.

Setengah dari data yang saya perlu periksa akan dikembalikan dalam panggilan asli di halaman memuat, jadi saya ingin menyimpannya dan tidak membuang panggilan lain untuk mendapatkannya lagi, yang membuat saya berpikir layanan akan bagus untuk menyimpan semua data itu.

Saya tahu bagaimana melakukan ini semua di controller, tapi itu kode buruk: P

Adakah ide tentang cara terbaik ini bisa dilakukan? Pada dasarnya, saya akan memerlukan panggilan http untuk memeriksa semua data, yang akan mengembalikan objek dengan nilai bool untuk setiap jenis 'Panggilan Keluar' yang perlu saya lakukan. Kemudian saya akan menjalankan daftar ini dan jika nilainya benar, tambahkan perbatasan, gambar, dan teks tooltip.

Saya tidak yakin apakah pertanyaan ini cukup jelas, jadi jika Anda ingin saya menambahkan beberapa detail, silakan tanyakan. Terima kasih!

Anda benar, ada banyak opsi yang dimainkan.

Kontroler adalah tempat yang baik untuk mulai menulis sesuatu yang baru dalam sudut. Mengikat pengontrol ke markup memungkinkan Anda menggunakan perpustakaan arahan angular yang sudah ada dengan layanan angular yang sudah ada.

Setelah beberapa saat hidup dengan ini, Anda akan menyadari bahwa controller Anda menjadi terlalu besar. Nah sekarang saatnya untuk refactor. Inilah pedoman umum yang cenderung saya ikuti.

• Controllers: controller melampirkan dan mengelola nilai / fungsionalitas yang terkait dengan $ scope. Pada akhirnya $ scope cenderung didorong oleh presentasi . Yaitu model tampilan.
• Layanan: layanan cenderung terkait dengan infrastruktur, backend, atau fitur browser lainnya
• Arahan: arahan memungkinkan Anda untuk berintegrasi dengan acara / fungsi DOM yang tidak ditangani oleh penangan yang ada.

Jadi, Anda ingin mendorong kode di salah satu dari tiga arah:

1. Kode dari controller saya benar-benar secara logis sepotong data presentasi / logika dan harus dipecah menjadi controller lain . Catatan ketika bekerja dengan item pada $ scope, yang terbaik untuk memisahkan bagian-bagian yang bertanggung jawab masing-masing controller ke objek mereka sendiri pada $ scope. Misalnya $ scope.creditCard. [Blah] untuk satu controller vs $ scope.billingAddress. [Blah] untuk controller lain. Ini membantu mencegah masalah dengan penggunaan sudut prototipe dari warisan pada $ scope.

2. Kode dari pengontrol saya adalah bagian dari infrastruktur aplikasi atau kode utilitas, yang mungkin perlu dibagikan melalui aplikasi, dan harus dipecah menjadi sebuah layanan

3. Kode dari pengontrol saya sangat peduli dengan presentasi / organisasi DOM, dan karena itu harus dipisahkan menjadi arahan sendiri

Contoh 1. mungkin untuk menangani memasukkan / memvalidasi kartu kredit yang terpisah dari sisa formulir pembayaran. Anda akan memiliki banyak logika kartu kredit dalam pengontrol yang terpisah dari logika untuk membiarkan pengguna memasukkan alamat, sehingga mereka akan menjadi pengontrol yang terpisah secara logis.

Contoh 2 mungkin untuk memindahkan bagian yang berkomunikasi dengan layanan backend kartu kredit untuk menerima / menolak pembayaran. Atau contoh lain mungkin modul yang berbicara ke backend untuk menangani API pembuatan pengguna.

Contoh dari 3 adalah membuat semacam fungsi tab otomatis yang menggerakkan kursor di antara 4 kotak edit setelah 4 angka dimasukkan untuk kartu kredit.

Pisahkan aplikasi Anda sesuai.