Cara Membuat Arahan CUSTOM di AngularJS dengan Contoh

Apakah Arahan Kustom?

Arahan khusus dalam Angular Js adalah arahan yang ditentukan pengguna dengan fungsi yang anda mahukan. Walaupun AngularJS mempunyai banyak arahan kuat di luar kotak, kadang-kadang arahan khusus diperlukan.

Dalam tutorial ini, anda akan belajar-

• Bagaimana Membuat Arahan Custom?
• Arahan dan Skop AngularJs
• Menggunakan pengawal dengan arahan
• Cara membuat arahan yang boleh digunakan semula
• Arahan dan komponen AngularJS - ng-transclude
• Arahan bersarang
• Mengendalikan acara secara arahan

Bagaimana Membuat Arahan Custom?

Mari kita lihat contoh bagaimana kita dapat membuat arahan khusus.

Arahan khusus dalam kes kami hanya akan menyuntikkan tag div yang mempunyai teks "AngularJS Tutorial" di halaman kami ketika arahan itu dipanggil.

Guru99 Global Event

Penjelasan Kod:

1. Kami mula-mula membuat modul untuk aplikasi sudut kami. Ini diperlukan untuk membuat arahan khusus kerana arahan akan dibuat menggunakan modul ini.
2. Kami sekarang membuat arahan khusus yang disebut "ngGuru" dan menentukan fungsi yang akan mempunyai kod khusus untuk arahan kami.

Catatan:-

Perhatikan bahawa semasa mendefinisikan arahan, kami telah mendefinisikannya sebagai ngGuru dengan huruf 'G' sebagai modal. Dan ketika kita mengaksesnya dari tag div kita sebagai arahan, kita mengaksesnya sebagai ng-guru. Ini adalah bagaimana sudut memahami arahan khusus yang ditentukan dalam aplikasi. Pertama, nama arahan khusus harus dimulakan dengan huruf 'ng'. Kedua, simbol tanda hubung '-' hanya perlu disebut ketika memanggil arahan. Dan ketiga huruf pertama yang mengikuti huruf 'ng' ketika mendefinisikan arahan dapat berupa huruf kecil atau huruf besar.

3. Kami menggunakan parameter templat yang mana parameter yang ditentukan oleh Angular untuk arahan khusus. Dalam hal ini, kami mendefinisikan bahawa setiap kali arahan ini digunakan, maka gunakan nilai templat dan masukkan dalam kod panggilan.
4. Di sini kita sekarang menggunakan arahan "ng-guru" buatan kita. Apabila kami melakukan ini, nilai yang kami tetapkan untuk templat kami "
   Tutorial JS Angular
   " kini akan disuntik di sini.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

• Output di atas jelas menunjukkan bahawa arahan ng-guru khusus kami, yang mempunyai templat yang ditentukan untuk menunjukkan teks khusus akan dipaparkan di penyemak imbas.

Arahan dan Skop AngularJs

Skop ditakrifkan sebagai gam yang mengikat pengawal ke pandangan dengan menguruskan data antara pandangan dan pengawal.

Semasa membuat arahan AngularJs tersuai, mereka secara lalai akan mempunyai akses ke objek lingkup dalam pengawal induk.

Dengan cara ini, menjadi mudah bagi arahan khusus untuk menggunakan data yang dihantar ke pengawal utama.

Mari kita lihat contoh bagaimana kita boleh menggunakan skop pengawal induk dalam arahan khusus kita.

Guru99 Global Event

Penjelasan Kod:

1. Kami mula-mula membuat pengawal yang dipanggil, "DemoController". Dalam ini, kami mendefinisikan pemboleh ubah yang disebut tutorialName dan melampirkannya ke objek lingkup dalam satu pernyataan - $ lingkup.tutorialName = "AngularJS".
2. Dalam arahan khusus kami, kami dapat memanggil pemboleh ubah "tutorialName" dengan menggunakan ungkapan. Pemboleh ubah ini akan dapat diakses kerana didefinisikan dalam pengawal "DemoController", yang akan menjadi induk untuk arahan ini.
3. Kami merujuk pengawal dalam tag div, yang akan bertindak sebagai tag div induk kami. Perhatikan bahawa ini perlu dilakukan terlebih dahulu agar arahan khusus kita dapat mengakses pemboleh ubah tutorialName.
4. Kami akhirnya melampirkan arahan khusus "ng-guru" pada tag div kami.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

• Output di atas jelas menunjukkan bahawa arahan khusus "ng-guru" kami menggunakan tutorialName pemboleh ubah skop dalam pengawal induk.

Menggunakan pengawal dengan arahan

Angular memberi kemudahan untuk mengakses pemboleh ubah anggota pengawal secara langsung dari arahan khusus tanpa memerlukan objek skop.

Ini menjadi mustahak kadang-kadang kerana dalam aplikasi anda mungkin mempunyai banyak objek lingkup milik beberapa pengawal.

Oleh itu, ada kemungkinan besar anda membuat kesalahan ketika mengakses objek skop pengawal yang salah.

Dalam senario seperti itu ada cara untuk menyebut secara khusus mengatakan "Saya ingin mengakses pengawal khusus ini" dari arahan saya.

Mari kita lihat contoh bagaimana kita dapat mencapainya.

Guru99 Global Event

Penjelasan Kod:

1. Kami mula-mula membuat pengawal yang dipanggil, "DemoController". Dalam ini kita akan menentukan pemboleh ubah yang disebut "tutorialName" dan kali ini, bukannya melampirkannya ke objek lingkup, kita akan melampirkannya terus ke pengawal.
2. Dalam arahan khusus kami, kami secara khusus menyebutkan bahawa kami ingin menggunakan pengawal "DemoController" dengan menggunakan kata kunci parameter pengawal.
3. Kami membuat rujukan ke pengawal menggunakan parameter "controllerAs". Ini ditakrifkan oleh Angular dan merupakan cara untuk merujuk pengawal sebagai rujukan.

   Catatan: - Ada kemungkinan untuk mengakses beberapa pengawal dalam arahan dengan menentukan blok pengawal, penyusunA dan pernyataan templat masing-masing.

4. Akhirnya, dalam templat kami, kami menggunakan rujukan yang dibuat pada langkah 3 dan menggunakan pemboleh ubah anggota yang dilampirkan terus ke pengawal pada Langkah 1.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Hasilnya jelas menunjukkan bahawa arahan khusus terutamanya mengakses DemoController dan pemboleh ubah anggotaNota tutorial yang dilampirkan padanya dan memaparkan teks "Angular".

Cara membuat arahan yang boleh digunakan semula

Kami sudah melihat kehebatan arahan khusus, tetapi kami dapat menaikkannya ke tahap seterusnya dengan membina arahan yang boleh digunakan semula.

Katakan, sebagai contoh, bahawa kita ingin memasukkan kod yang selalu menunjukkan tag HTML di bawah di pelbagai skrin, yang pada dasarnya hanyalah input untuk "Nama" dan "usia" pengguna.

Untuk menggunakan semula fungsi ini di beberapa skrin tanpa pengekodan setiap kali, kami membuat kawalan utama atau arahan secara bersudut untuk menahan kawalan ini ("Nama" dan "usia" pengguna).

Jadi sekarang, bukannya memasukkan kod yang sama untuk layar di bawah setiap kali, kita sebenarnya boleh memasukkan kod ini dalam arahan dan menyisipkan arahan itu pada bila-bila masa.

Mari kita lihat contoh bagaimana kita dapat mencapainya.

Guru99 Global Event

Penjelasan Kod:

1. Dalam coretan kod kami untuk arahan khusus, apa yang berubah hanyalah nilai yang diberikan pada parameter templat arahan khusus kami.

   Daripada tag lima teks atau teks, kami sebenarnya memasukkan keseluruhan fragmen 2 kawalan input untuk "Nama" dan "usia" yang perlu ditunjukkan di halaman kami.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Dari output di atas, kita dapat melihat bahawa coretan kod dari templat arahan khusus akan ditambahkan ke halaman.

Arahan dan komponen AngularJS - ng-transclude

Seperti yang telah kami sebutkan sebelumnya, Angular dimaksudkan untuk memperluas fungsi HTML. Dan kita telah melihat bagaimana kita dapat melakukan suntikan kod dengan menggunakan arahan yang boleh digunakan semula.

Tetapi dalam pengembangan aplikasi web moden, terdapat juga konsep mengembangkan komponen web. Yang pada dasarnya bermaksud membuat tag HTML kita sendiri yang boleh digunakan sebagai komponen dalam kod kita.

Oleh itu sudut memberikan tahap kekuatan yang lain untuk memperluas tag HTML dengan memberikan kemampuan untuk memasukkan atribut ke dalam tag HTML itu sendiri.

Ini dilakukan oleh tag " ng-transclude ", yang merupakan semacam pengaturan untuk memberi tahu sudut untuk menangkap semua yang dimasukkan ke dalam arahan dalam markup.

Mari kita ambil contoh bagaimana kita dapat mencapainya.

Guru99 Global Event

Angular JS

Penjelasan Kod:

1. Kami menggunakan arahan untuk menentukan tag HTML khusus yang disebut 'pane' dan menambahkan fungsi yang akan menempatkan beberapa kod khusus untuk tag ini. Dalam output, tag panel khusus kami akan memaparkan teks "AngularJS" dalam bentuk segi empat tepat dengan sempadan hitam padat.
2. Atribut "transclude" harus disebut sebagai benar, yang diperlukan oleh sudut untuk memasukkan tag ini ke DOM kami.
3. Dalam skop, kami menentukan atribut tajuk. Atribut biasanya ditakrifkan sebagai pasangan nama / nilai seperti: name = "value". Dalam kes kami, nama atribut dalam tag HTML panel kami adalah "title". Simbol "@" adalah syarat dari sudut. Ini dilakukan sehingga ketika judul baris = {{title}} dijalankan pada Langkah 5, kod khusus untuk atribut title akan ditambahkan ke tag HTML panel.
4. Kod khusus untuk atribut tajuk yang hanya menarik sempadan hitam yang kukuh untuk kawalan kita.
5. Akhirnya, kami memanggil tag HTML khusus kami bersama dengan atribut tajuk yang telah ditentukan.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

• Hasilnya dengan jelas menunjukkan bahawa atribut tajuk dari tag html5 panel telah ditetapkan ke nilai khusus "Angular.JS".

Arahan bersarang

Arahan dalam sudut boleh bersarang. Seperti modul dalaman atau fungsi dalam bahasa pengaturcaraan apa pun, anda mungkin perlu memasukkan arahan antara satu sama lain.

Anda boleh mendapatkan pemahaman yang lebih baik mengenai perkara ini dengan melihat contoh di bawah.

Dalam contoh ini, kami membuat 2 arahan yang disebut "luar" dan "dalaman".

• Arahan dalaman memaparkan teks yang disebut "Inner".
• Sementara arahan luar sebenarnya membuat panggilan ke arahan dalaman untuk memaparkan teks yang disebut "Inner".

Guru99 Global Event

Penjelasan Kod:

1. Kami membuat arahan yang disebut "luar" yang akan bertindak sebagai arahan ibu bapa kami. Arahan ini kemudian akan memanggil arahan "dalaman".
2. Batasan: 'E' diperlukan oleh sudut untuk memastikan bahawa data dari arahan dalaman tersedia untuk arahan luar. Huruf 'E' adalah bentuk pendek dari kata 'Elemen'.
3. Di sini kita membuat arahan dalaman yang memaparkan teks "Inner" dalam tag div.
4. Dalam templat arahan luar (langkah # 4), kita memanggil arahan dalaman. Jadi di sini kita menyuntik templat dari arahan dalaman ke arahan luar.
5. Akhirnya, kita secara langsung memanggil arahan luar.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Dari output,

• Dapat dilihat bahawa arahan luar dan dalam telah dipanggil, dan teks di kedua-dua teg div ditampilkan.

Mengendalikan acara secara arahan

Acara seperti klik tetikus atau klik butang dapat ditangani dari dalam arahan itu sendiri. Ini dilakukan dengan menggunakan fungsi pautan. Fungsi pautan adalah yang membolehkan arahan itu melekat pada elemen DOM dalam halaman HTML.

Sintaks:

Sintaks elemen pautan adalah seperti yang ditunjukkan di bawah

ng-ulangi

link: function ($scope, element, attrs)

Fungsi pautan biasanya menerima 3 parameter termasuk ruang lingkup, elemen yang dikaitkan dengan arahan, dan atribut elemen sasaran.

Mari kita lihat contoh bagaimana kita dapat mencapainya.

Guru99 Global Event
Click Me

Penjelasan Kod:

1. Kami menggunakan fungsi pautan seperti yang ditentukan dalam sudut untuk memberikan kemampuan arahan untuk mengakses peristiwa di HTML DOM.
2. Kami menggunakan kata kunci 'elemen' kerana kami ingin menanggapi peristiwa untuk elemen HTML DOM, yang dalam kes kami akan menjadi elemen "div". Kami kemudian menggunakan fungsi "bind" dan mengatakan bahawa kami ingin menambahkan fungsi khusus pada peristiwa klik elemen tersebut. Kata 'klik' adalah kata kunci, yang digunakan untuk menunjukkan peristiwa klik pada sebarang kawalan HTML. Sebagai contoh, kawalan butang HTML mempunyai peristiwa klik. Oleh kerana, dalam contoh kami, kami ingin menambahkan kod khusus pada peristiwa klik pada tag "dev" kami, kami menggunakan kata kunci 'klik'.
3. Di sini kami mengatakan bahawa kami ingin mengganti HTML dalaman elemen (dalam kes kami elemen div) dengan teks 'Anda mengklik saya!'.
4. Di sini kami mendefinisikan tag div kami untuk menggunakan arahan khusus ng-guru.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

• Pada mulanya teks 'Klik Saya' akan ditunjukkan kepada pengguna kerana inilah yang pada awalnya telah ditentukan dalam tag div. Apabila anda benar-benar mengklik pada tag div, output di bawah akan ditunjukkan

Ringkasan

• Seseorang juga dapat membuat arahan khusus yang dapat digunakan untuk menyuntikkan kod dalam aplikasi sudut utama.
• Arahan khusus dapat dibuat untuk memanggil anggota yang ditentukan dalam objek lingkup dalam pengawal tertentu dengan menggunakan kata kunci 'Pengawal', 'pengawalAs' dan 'templat'.
• Arahan juga dapat disarang untuk menyediakan fungsi tertanam yang mungkin diperlukan bergantung pada keperluan aplikasi.
• Arahan juga dapat digunakan kembali sehingga dapat digunakan untuk menyuntikkan kod umum yang mungkin diperlukan di berbagai aplikasi web.
• Arahan juga dapat digunakan untuk membuat tag HTML khusus yang akan ditentukan fungsi mereka sendiri sesuai dengan keperluan perniagaan.
• Acara juga dapat dikendalikan dari dalam arahan untuk menangani peristiwa DOM seperti klik butang dan tetikus.