Memahami data dua hala yang mengikat di sudut

Penjelasan terperinci dan penerapan AngularJS mengikat data dua hala: Generator Kad Perniagaan Dinamik

mata teras

• mengikat data bidirectional AngularJS membolehkan perubahan untuk mengemas kini pandangan dan sebaliknya. Ini dicapai melalui arahan terbina dalam AngularJ seperti ng-model dan ng-bind.
• Objek $scope dalam AngularJS memainkan peranan penting dalam mengikat data bidirectional, bertindak sebagai jambatan antara pengawal dan pandangan, menyimpan data dan fungsi model.
• AngularJS menggabungkan peristiwa dan atribut mengikat dan mencerna mekanisme tempoh untuk melaksanakan pengikatan data dua arah untuk memantau dan mengemas kini pandangan apabila perubahan data.
• Walaupun pengikatan data dua arah dapat memudahkan pembangunan dengan secara automatik menyegerakkan pandangan dan model, jika digunakan secara tidak wajar, ia juga boleh memberi kesan negatif terhadap prestasi kerana penambahan monitor untuk setiap mengikat.

Tutorial ini akan menunjukkan bagaimana pengikatan data bidirectional berfungsi di AngularJS dengan membina penjana kad perniagaan yang dinamik. Penjana ini membolehkan anda membuat kad perniagaan maya anda sendiri yang anda boleh memperibadikan dengan nama, kerjaya, e -mel, logo syarikat, dan pautan ke laman web laman utama dan media sosial anda. Anda boleh menyesuaikan latar belakang dan warna teks kad menggunakan input warna HTML5 dan melihat sebarang perubahan yang dibuat dalam masa nyata. Kesan akhir adalah seperti berikut:

Mula

Kami akan menggunakan Bower untuk menguruskan kebergantungan projek. Bower adalah pengurus pakej web yang boleh dipasang menggunakan NPM (yang bermaksud anda perlu memasang Node.js). Jika anda memerlukan bantuan memasang Node.js (atau NPM), lihat artikel SitePoint baru -baru ini mengenai topik ini. Jika anda memerlukan bantuan memasang Bower, anda boleh melihat arahan di laman utamanya. Ketergantungan projek ini akan menjadi rangka kerja bootstrap (untuk gaya dan komponen akordion), font hebat (untuk ikon), dan jQuery (bootstrap bergantung kepadanya) dan angularjs. Dengan mengandaikan bahawa anda telah memasang Bower dan dikonfigurasi, membuat direktori baru, pergi ke direktori itu, dan memulakan projek dengan Bower:

mkdir ACG && cd ACG
bower init

Bower kemudian akan membuat fail

dalam direktori root projek. Ia juga akan bertanya kepada anda beberapa soalan seperti nama projek, nama pengarang, keterangan, dll. Masukkan "ACG" di bawah nama (untuk penjana kad sudut) dan isi selebihnya seperti yang diperlukan (atau hanya terima nilai lalai). Fail JSON yang dihasilkan sepatutnya kelihatan seperti ini: bower.json

{
  "name": "ACG",
  "version": "0.0.0",
  "authors": [
    "Tanay Pant <tanay1337>"
  ],
  "description": "Card Generator",
  "keywords": [
    "AngularJS"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Seterusnya, jalankan arahan berikut di terminal:

bower install bootstrap --save
bower install font-awesome --save
bower install angular --save

Ini akan memasang semua kebergantungan yang diperlukan untuk projek dalam direktori bernama

dan simpan kebergantungan ke fail bower_components. Adalah lebih baik untuk menambah bower.json ke bower_components kerana anda tidak mahu memuat naik folder ini ke repositori GitHub anda, kerana mana -mana penyumbang boleh memasang yang sama dengan menjalankan .gitignore dalam akar kebergantungan projek anda. bower install

Struktur aplikasi AngularJS

Dalam folder ACG, buat fail bernama index.html dan fail lain bernama style.css. Tambahkan kod berikut ke index.html:

mkdir ACG && cd ACG
bower init

kami akan melancarkan laman web dengan menambah dan ng-app="myApp" ke tag ng-controller="BusinessCardController". Arahan ng-app adalah perlu untuk memberitahu sudut keseluruhan halaman untuk menjadi aplikasi AngularJS, manakala Arahan ng-controller melampirkan kelas pengawal ke pandangan kami. Kami kemudian menggunakan arahan ng-bind dalam tajuk supaya tajuk halaman tetap disegerakkan dengan model kami, dan kemudian masukkan fail CSS yang berkaitan (dalam ) dan fail JS (sebelum tag akhir ). Fail -fail ini (kecuali style.css) semuanya terletak di folder bower_components. Akhirnya, kami menentukan myApp (modul utama kami, yang dimuatkan pada boot aplikasi), dan BusinessCardController di mana kami akan menetapkan keadaan awal objek $scope (cara pengawal dan melihat data saham kami).

(langkah -langkah berikut, disebabkan oleh batasan ruang, kod terperinci komponen akordion dan kod pengawal berikutnya, kod gaya, dan lain -lain ditinggalkan di sini. Kod lengkap boleh didapati di CodePen atau GitHub.) Sila rujuk pautan asal untuk kod lengkap.

Ringkasan

Saya harap penjana kad perniagaan ini dapat membantu anda mempelajari konsep asas data yang mengikat di AngularJS. Anda boleh mencari demo kod penuh pada Codepen, atau anda boleh mengklon kod untuk artikel ini dari GitHub. Saya menggalakkan anda untuk mengikat repositori, cuba kod, dan lihat apa yang boleh anda buat.

(bahagian FAQ yang disediakan dalam teks asal juga telah ditinggalkan, tetapi kandungan teras telah diringkaskan dalam perkara utama.)

Atas ialah kandungan terperinci Memahami data dua hala yang mengikat di sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!