Apa perbedaan antara layanan, direktif dan modul?


151

Saya telah membaca banyak dokumen, dan saya semakin bingung. Saya pada dasarnya tidak tahu perbedaan antara a

  • layanan
  • pengarahan
  • modul

Saya melihat banyak komponen khusus. Terkadang mereka menggunakan arahan, terkadang layanan. Itu selalu dimulai dengan modul. Bisakah seseorang menjelaskan dengan contoh apa perbedaan antara ketiga jenis ini?

Jawaban:


123

Anggap sebuah modul sebagai tempat untuk memasang sejumlah hal lain, seperti arahan, layanan, konstanta, dll. Modul dapat disuntikkan ke modul lain yang memberi Anda tingkat penggunaan kembali yang tinggi.

Saat menulis aplikasi bersudut, Anda akan memiliki modul tingkat atas yang merupakan kode aplikasi Anda (tanpa templat).

Layanan terutama merupakan cara untuk berkomunikasi antar pengendali, tetapi Anda dapat menyuntikkan satu layanan ke yang lain. Layanan sering digunakan sebagai cara untuk sampai ke penyimpanan data Anda dan orang-orang akan membungkus API sudut, seperti ngResource. Teknik ini bermanfaat karena membuat pengujian (terutama mengejek) cukup mudah. Anda dapat memiliki layanan untuk melakukan hal-hal lain seperti otentikasi, masuk, dll.

Arahan digunakan untuk membuat widget atau membungkus hal-hal yang ada seperti plugin jquery. Membungkus plugin yang ada bisa menjadi tantangan dan alasan Anda melakukan ini adalah untuk membuat data dua arah yang mengikat antara plugin dan angular. Jika Anda tidak membutuhkan pengikatan data dua arah maka Anda tidak perlu membungkusnya.

Arahan juga merupakan tempat untuk melakukan manipulasi DOM, menangkap peristiwa DOM, dll. Anda tidak boleh melakukan hal-hal terkait DOM di pengontrol atau layanan. Membuat arahan bisa menjadi sangat kompleks. IMHO, saya sarankan pertama-tama melihat API untuk sesuatu yang dapat melakukan apa yang Anda cari ATAU minta saran Google Grup Angular.


234

Dari catatan pribadi saya sendiri (sebagian besar cuplikan dari dokumen, pos grup google, dan posting SO):

Modul

  • menyediakan cara untuk layanan namespace / grup, arahan, filter, informasi konfigurasi dan kode inisialisasi
  • membantu menghindari variabel global
  • digunakan untuk mengkonfigurasi $ injector, memungkinkan hal-hal yang didefinisikan oleh modul (atau seluruh modul itu sendiri) untuk disuntikkan di tempat lain (Dependency Injection stuff)
  • Modul sudut tidak terkait dengan CommonJS atau Require.js. Berbeda dengan modul AMD atau Require.js, modul Angular tidak mencoba untuk menyelesaikan masalah pemuatan skrip atau pembuatan skrip malas. Sasaran-sasaran ini bersifat ortogonal dan kedua sistem modul dapat hidup berdampingan dan memenuhi tujuan mereka (demikian klaim dokumen).

Jasa

  • adalah lajang, jadi hanya ada satu contoh dari setiap layanan yang Anda tetapkan. Sebagai lajang, mereka tidak terpengaruh oleh cakupan, dan karenanya dapat diakses oleh (dibagi dengan) beberapa tampilan / pengontrol / arahan / layanan lainnya
  • Anda dapat (dan mungkin harus) membuat layanan khusus kapan
    • dua atau lebih hal memerlukan akses ke data yang sama (tidak menggunakan lingkup root) atau Anda hanya ingin merangkum data Anda dengan rapi
    • Anda ingin merangkum interaksi dengan, katakanlah, server web (tambah $ resource atau $ http di layanan Anda)
  • Layanan bawaan mulai dengan '$'.
  • Untuk menggunakan layanan, injeksi ketergantungan diperlukan pada dependen (misalnya, pada pengontrol, atau layanan lain, atau arahan).

Arahan (beberapa item di bawah ini pada dasarnya mengatakan hal yang sama, tetapi saya menemukan bahwa kadang-kadang kata yang sedikit berbeda banyak membantu)

  • bertanggung jawab untuk memperbarui DOM ketika keadaan model berubah
  • memperpanjang kosa kata HTML = mengajarkan HTML trik baru.
    Angular dilengkapi dengan serangkaian petunjuk (misalnya, ng-* stuff) yang berguna untuk membangun aplikasi web, tetapi Anda dapat menambahkan sendiri sehingga HTML dapat diubah menjadi Deklaratif Domain Specific Language (DSL). Misalnya, elemen <tab> dan <pane> pada demo halaman beranda Angular "Membuat Komponen".
    • Arahan bawaan yang tidak jelas (karena tidak diawali dengan "ng"): a, form, input, script, select, textarea. Di bawah Angular, semua ini berfungsi lebih dari biasanya!
  • Arahan memungkinkan Anda untuk "membuat HTML komponen". Arahan sering lebih baik daripada ng-include. Misalnya, ketika Anda mulai menulis banyak HTML dengan terutama data-binding, refactor HTML itu menjadi arahan (dapat digunakan kembali).
  • Kompiler Angular memungkinkan Anda untuk melampirkan perilaku ke elemen atau atribut HTML apa pun dan bahkan membuat elemen atau atribut HTML baru dengan perilaku khusus. Angular menyebut arahan ekstensi perilaku ini .
    • Ketika Anda merebus semuanya, arahan hanyalah fungsi yang dijalankan ketika kompiler Angular menemukannya di DOM.
  • Arahan adalah perilaku atau transformasi DOM yang dipicu oleh kehadiran atribut, nama elemen, nama kelas, atau nama dalam komentar. Arahan adalah perilaku yang harus dipicu ketika konstruksi HTML tertentu ditemukan dalam proses kompilasi (HTML). Arahan dapat ditempatkan dalam nama elemen, atribut, nama kelas, serta komentar.
    • Kebanyakan arahan dibatasi hanya untuk atribut. Misalnya, DoubleClick hanya menggunakan arahan atribut khusus.
  • lihat juga Apa itu arahan sudut?

Tentukan dan kelompokkan Hal sudut (ketergantungan injeksi) dalam modul.
Bagikan data dan bungkus interaksi server web dalam layanan.
Perluas HTML dan lakukan manipulasi DOM dalam arahan.
Dan buat Pengendali setipis mungkin.


1
@ Mark Rajcok - Jawaban yang bagus, saya sudah memberi Anda +1, tetapi akan lebih baik untuk mengklarifikasi lebih banyak item 3 di bawah Modul, yaitu "konfigurasikan $ injector" Orang-orang mengerti layanan injecting tetapi bagaimana hubungannya dengan modul?
whitneyland

2
@LeeWhitney, lihat docs.angularjs.org/guide/module#dependencies : "Modul dapat membuat daftar modul lain sebagai dependensinya. Tergantung pada modul yang menyiratkan bahwa modul yang diperlukan perlu dimuat sebelum modul yang membutuhkan dimuat. Dengan kata lain konfigurasi blok dari modul yang diperlukan dijalankan sebelum blok konfigurasi dari modul yang membutuhkan. "
Mark Rajcok

@MarkRajcok Link sekarang rusak
Michael Smith
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.