Kata pengantar
Pertama -tama, jangan bicara tentang membuat proyek dasar AngularJS. Yang terbaik adalah menggunakan alat perancah yeoman untuk menghasilkannya secara langsung. Jika tidak ada lingkungan seperti itu, tentu saja, Anda juga dapat memperkenalkan proyek dengan mengunduh file AngularJS sendiri.
Contoh Penjelasan Detail
Main.js adalah file JS utama dari proyek. Semua JS ditulis dalam file ini. Setelah inisialisasi, kode JS file adalah sebagai berikut
Angular .module ('CalculatorApp', ['Nganimate', 'Ngcookies', 'NgreSource', 'Ngroute', 'Ngsanitize', 'NgTouch']) .controller ('Mainctrl', function ($ scope) {$ scope.Result = "; $ scope. "1": ["AC", "+/-", "%", "÷"], "2": ["7", "8", "9", "×"], "3": ["4", "5", "6", "-"], "" "" "", "" "" "" "" "" "" "" "" "" ""Hasilnya di sini digunakan untuk mengikat hasil perhitungan dalam pengikatan dua arah, dan data adalah angka dan simbol pada keyboard kalkulator.
Semua kode CSS yang terkait dengan proyek ini adalah sebagai berikut:
*{margin: 0; padding: 0;} body {padding-top: 20px; padding-bottom: 20px;} h1 {text-align: center; Warna:#3385ff;}. Main {margin: 20px auto; Perbatasan: 1px Solid #202020; Border-Bottom: tidak ada; Lebar: 60%; Tinggi: 600px;}. Hasil {display: blok; Lebar: 100%; Tinggi: 30%; Latar Belakang:#202020; Ukuran kotak: kotak perbatasan; Perbatasan: Tidak Ada; Padding: 0; Margin: 0; Ubah Ukuran: Tidak Ada; Warna: #fff; Ukuran font: 80px; Teks-Align: Benar; Line-Height: 270px; meluap: tersembunyi; latar belakang-klip: boord-box;}. Row {height: 14%; Latar Belakang: #D7D8DA; Ukuran kotak: kotak perbatasan; Border-Bottom: 1px Solid #202020; overflow: tersembunyi;}. col {height: 100%; Ukuran kotak: kotak perbatasan; Border-Right: 1px Solid #202020; float: kiri; Warna: #202020; Ukuran font: 28px; Teks-Align: tengah; line-height: 83px;}. Normal {width: 25%;}. END-NO {width: 25%; Border-Right: Tidak ada; Latar Belakang: #F78E11; warna: #fff;}. Zero {width: 50%;}. History {latar belakang: #3385ff; Warna: #fff; Ukuran font: 22px; Teks-Align: tengah;}Maka tata letak HTML adalah sebagai berikut:
<body ng-app="calculatorApp" ><h1>calculator for ios8</h1> <hr/> <p>{{ history.join(" ") }}</p><div> <textarea ng-model="result" ></textarea> <div ng-repeat="item in data"> <div ng-repeat="a in item" ng-class = "showclass ($ index, a)" ng-click = "showResult (a)"> {{a}} </div> </div> </div> </body> Di sini, tag p dari riwayat kelas digunakan untuk menampilkan catatan input, yang berarti bahwa semua kunci yang Anda tekan akan ditampilkan di atasnya agar mudah dilihat hasilnya. Sejarah adalah array di bawah ruang lingkup saat ini, yang akan dijelaskan nanti. Di sini sebuah TextArea digunakan sebagai layar tampilan untuk hasil perhitungan, terutama untuk menggunakan fitur pengikatan dua arah. Pada saat yang sama, setiap elemen kunci dan antarmuka kalkulator dihasilkan dengan melingkarkan objek data. Metode showClass adalah metode di bawah cakupan, yang digunakan untuk mendapatkan atribut kelas dari elemen tampilan antarmuka yang tidak teratur. Itu akan dijelaskan nanti. Metode showResult adalah metode utama untuk menanggapi kunci. Semua tanggapan kami terhadap kunci diperoleh melalui metode ini, dan kami akan menjelaskan secara rinci nanti.
Kode metode showclass adalah sebagai berikut:
// tunjukkan gaya kalkulator $ scope.showclass = function (index, a) {if (a == 0) {return "zero"; } return index == 3 || a == "="? "end-no": "normal"; };Metode ini terutama berkaitan dengan kolom terakhir dari setiap baris yang akan ditampilkan sebagai oranye dan kunci yang ditampilkan 0 harus menempati dua sel untuk pemrosesan khusus.
Sejauh ini, antarmuka kalkulator telah sepenuhnya diimplementasikan
Rendering adalah sebagai berikut:
Berikut ini perlu mewujudkan respons terhadap kunci. Kunci termasuk tombol numerik, kunci operator, dan tombol AC. Setiap tombol tekan akan memiliki respons yang berbeda dan ada koneksi antara kunci.
Untuk membuat kode lebih mudah dijelaskan, metode digunakan untuk memberikan kode metode showResult di segmen dan kemudian menjelaskannya secara rinci.
Pertama -tama, kita perlu menambahkan beberapa variabel untuk kontrol dan penyimpanan.
// tumpukan angka yang digunakan untuk perhitungan $ scope.num = []; $ scope.history = []; // operator stack $ scope.opt = []; // Hasil perhitungan dari kalkulator $ scope.result = ""; // hasil kalkulator $ scope.result = ""; // itu berarti apakah akan mulai menampilkan lagi. Benar berarti tidak ditampilkan lagi. Salah berarti untuk menghapus output saat ini dan menampilkan kembali angka $ scope.flag = true; // itu berarti apakah operator dapat dimasukkan sekarang. Jika itu bisa benar, jika tidak, itu salah $ scope.isopt = true;
Array NUM sebenarnya adalah tumpukan, digunakan untuk menerima angka yang dimasukkan oleh pengguna. Penggunaan spesifik akan dijelaskan nanti. Array riwayat adalah semua kunci yang dimasukkan oleh pengguna. Setiap kali Anda menekannya, simbol atau angka pada kunci dimasukkan ke dalam tumpukan, dan kemudian ditampilkan pada antarmuka secara real time menggunakan ikatan. Array opt adalah tumpukan lain yang digunakan untuk menerima input operator oleh pengguna. Penggunaan spesifik akan dijelaskan nanti. Bendera adalah bendera. Ketika benar, itu berarti bahwa angka yang ditekan selama penekanan nomor adalah bagian dari nomor yang ditampilkan saat ini dan perlu ditampilkan di belakangnya. Misalnya, antarmuka saat ini ditampilkan 12, dan kemudian tekan 3 akan dinilai. Jika benar, 123 akan ditampilkan. Kalau tidak, antarmuka akan dibersihkan dan 3. ISOPT adalah bendera lain. Ini terutama untuk mencegah pengguna dari input operator ilegal selama proses input. Misalnya, pengguna memasukkan 1+ 2+ berturut -turut. Ketika input dimasukkan di sini, input di bawah ini harus menjadi angka, tetapi pengguna memasuki operator. Dengan menilai bendera ini, kalkulator akan mengabaikan operator ilegal ini dan menjaga input tetap 1+2+.
Kode berikut diberikan dalam segmen, dan kode lengkapnya adalah menghubungkannya bersama.
$ scope.init = function () {$ scope.num = []; $ scope.opt = []; $ scope.history = []; $ scope.flag = true; $ scope.isopt = true; }; $ scope.showResult = function (a) {$ scope.history.push (a); var reg = // d/ig, regdot = //./ig, regabs = /// ig; // Jika mengklik nomor if (reg.test (a)) {// hilangkan pembekuan if ($ scope.isopt == false) {$ scope.isopt = true; } if ($ scope.result! = 0 && $ scope.flag && $ scope.result! = "error") {$ scope.result += a; } else {$ scope.result = a; $ scope.flag = true; }} Metode init digunakan untuk menginisialisasi beberapa variabel dan bendera untuk mengembalikannya ke keadaan semula. Metode showResult adalah metode utama menampilkan antarmuka untuk menanggapi operasi pengguna. Kode di atas adalah cabang IF dalam metode ini, menunjukkan bahwa jika input operator dimasukkan, maka jika input ke operator telah dibekukan (operator saat ini tidak diizinkan untuk dimasukkan, dan akan diabaikan setelah input), maka ketika memasuki nomor berikutnya, status pembekuan tidak diblokir sehingga operator stack akan masuk ke nomor berikutnya. Jika hasil yang saat ini ditampilkan tidak kosong dan nomor yang ditekan adalah bagian dari nomor yang ditampilkan saat ini dan tidak ada kesalahan yang terjadi, maka hasil yang ditampilkan adalah bahwa nomor yang saat ini ditekan terhubung ke akhir nomor yang saat ini ditampilkan. Kalau tidak, itu berarti bahwa nomor yang Anda masukkan waktu berikutnya perlu ditampilkan setelah nomor ini saat redisplaying.
Kode JS (lanjutan)
// Jika Anda mengklik AC lain jika (a == "ac") {$ scope.result = 0; $ scope.init (); }Jika AC yang diklik, itu berarti inisialisasi, biarkan hasil tampilan menjadi 0, dan semua negara dibersihkan.
Kode JS (lanjutan)
// Jika Anda mengklik titik desimal lain jika (a == ".") {If ($ scope.result! = "" &&! Regdot.test ($ scope.result)) {$ scope.Result+= a; }}Jika yang diklik adalah titik desimal, biarkan titik desimal dihubungkan ke ujung layar saat ini jika tampilan saat ini tidak kosong dan tidak ada titik desimal dalam hasil tampilan saat ini.
Kode JS (lanjutan)
// Jika Anda mengklik operator terbalik lagi jika (regabs.test (a)) {if ($ scope.result> 0) {$ scope.result = "-"+$ scope.result; } else {$ scope.result = math.abs ($ scope.Result); }}Jika yang diklik adalah operasi terbalik, hasil tampilan saat ini akan berbanding terbalik
Kode JS (lanjutan)
// Jika Anda mengklik tanda persentase lain jika (a == "%") {$ scope.result = $ scope.format (angka ($ scope.result)/100); } Jika Anda mengklik tanda persen, bagi hasil yang ditampilkan saat ini dengan 100 dan kemudian tampilkan. Berikut adalah fungsi format
Kodenya adalah sebagai berikut:
// Format hasil output $ scope.format = function (num) {var regnum =/. {10,}/ig; if (regnum.test (num)) {if (//./. test (num)) {return num.toExponential (3); } else {return num.toExponential (); }} else {return num; }}} else {return num; }}Fungsi utamanya adalah bahwa kalkulator yang dilengkapi dengan iOS8 tidak akan menampilkan banyak digit tanpa batas. Jika melebihi 10 digit (termasuk titik desimal), perhitungan ilmiah akan digunakan untuk ditampilkan. Untuk kesederhanaan, saat menggunakan perhitungan ilmiah untuk hasil tampilan yang mengandung titik desimal dan melebihi 10 digit, biarkan mempertahankan tampilan 3 digit setelah titik desimal.
Kode JS (bagian ShowResult terhubung)
// Jika operator yang diklik dan hasil tampilan saat ini tidak kosong dan kesalahan lain jika ($ scope.checkoperator (a) && $ scope.result! = "" && $ scope.result! = "Error" && $ scope.isopt) {$ scope.flag = false; $ scope.num.push ($ scope.Result); $ scope.Opererasi (a); // Setelah mengklik operator sekali, Anda harus mengabaikan situasi di mana operator diklik lagi. $ scope.isopt = false; }Cabang ini adalah cabang paling kompleks, yang berarti bahwa jika input adalah operator, maka operasi harus dilakukan. Untuk memasuki cabang ini, Anda perlu mengatur flag ke false terlebih dahulu, yaitu untuk memasukkan nomor lain kali, yaitu untuk memasukkan kembali nomor alih-alih memasukkan hasil tampilan saat ini.
Kemudian, biarkan nomor yang ditampilkan saat ini ditampilkan sebagai nomor yang dihitung untuk memasukkan tumpukan nomor terlebih dahulu. Metode operation adalah metode operasi. Karena operator telah diklik kali ini, lain kali Anda mengkliknya, Anda harus mengabaikan operator ini dan mengatur ISOPT menjadi false.
Kode operasi adalah sebagai berikut
// Bandingkan prioritas operator input saat ini dan operator operator teratas operator // Jika prioritas operator teratas kecil, operator saat ini diletakkan di tumpukan dan tidak menghitungnya. // Jika tidak, operator teratas diletakkan di atas tumpukan, dan jumlah tumpukan diletakkan di tumpukan untuk dua elemen berturut -turut, dan menghitung // Kemudian operator saat ini diletakkan di atas tumpukan. $ scope.operation = function (saat ini) {// Jika tumpukan operator kosong, langsung letakkan operator saat ini di stack if (! $ scope.opt.length) {$ scope.opt.push (saat ini); kembali; } var operator, kanan, kiri; var lastopt = $ scope.opt [$ scope.opt.length-1]; // Jika prioritas operator saat ini lebih besar dari operator terakhir, hanya tumpukan yang dimasukkan jika ($ scope.ispri (saat ini, lastopt)) {$ scope.opt.push (saat ini); } else {operator = $ scope.opt.pop (); kanan = $ scope.num.pop (); kiri = $ scope.num.pop (); $ scope.calculate (kiri, operator, kanan); $ scope.Opererasi (saat ini); }};Metode ini menerima operator input saat ini sebagai parameter. Gagasan intinya adalah bahwa operator saat ini diterima. Jika tumpukan operator kosong, operator saat ini akan diletakkan di tumpukan, dan kemudian tidak perlu melakukan hal lain dalam kasus ini. Jika tumpukan operator saat ini tidak kosong, maka elemen teratas dari tumpukan operator saat ini muncul, sehingga operator yang saat ini diterima dan operator teratas diberi prioritas (prioritas perkalian dan pembagian lebih besar daripada penambahan dan pengurangan, dan operator teratas diberikan prioritas prioritas yang sama karena pertama kali dimasukkan). Metode ISPRI digunakan untuk menentukan prioritas dan menerima dua parameter. Yang pertama adalah operator yang saat ini diterima dan yang kedua adalah operator teratas di tumpukan. Jika operator saat ini memiliki prioritas yang lebih tinggi sesuai dengan aturan yang disebutkan di atas, maka operator akan langsung diletakkan di tumpukan. Jika prioritas operator saat ini lebih kecil dari bagian atas operator tumpukan, maka Anda perlu melakukan perhitungan dan mengubah tampilan kalkulator. Dua elemen di bagian atas tumpukan nomor operasi muncul pada gilirannya, karena dua nomor operasi untuk satu operasi, dan kemudian bagian atas tumpukan tumpukan operator muncul sebagai operator untuk operasi ini, dan metode perhitungan dipanggil untuk metode perhitungan untuk operasi.
Kode Metode adalah sebagai berikut
// Bertanggung jawab untuk menghitung fungsi hasil $ scope.calculate = fungsi (kiri, operator, kanan) {switch (operator) {case " +": $ scope.result = $ scope.format (angka (kiri) + angka (kanan)); $ scope.num.push ($ scope.Result); merusak; case " -": $ scope.result = $ scope.format (angka (kiri) - angka (kanan)); $ scope.num.push ($ scope.Result); merusak; case "×": $ scope.result = $ scope.format (angka (kiri) * angka (kanan)); $ scope.num.push ($ scope.Result); merusak; case "÷": if (right == 0) {$ scope.result = "error"; $ scope.init (); } else {$ scope.result = $ scope.format (angka (kiri) / angka (kanan)); $ scope.num.push ($ scope.Result); } merusak; default: break; }};Metode ini menerima tiga parameter, nomor operasi kiri, operator tengah dan nomor operasi yang tepat, dan mengubah hasilnya untuk menampilkan hasil setelah menambahkan, mengurangi, perkalian dan operasi pembagian, dan memasukkan hasil perhitungan ke dalam tumpukan nomor perhitungan. Di sini perlu dicatat bahwa jika perhitungannya adalah pembagian dan pembagi adalah 0, kesalahan terjadi, tampilan kesalahan, dan semua negara dibersihkan, jika tidak perhitungannya normal.
Setelah satu operasi selesai, negara -negara di tumpukan operator dan tumpukan angka akan diubah, dan nilai saat ini saat ini tidak dimasukkan ke dalam tumpukan. Oleh karena itu, proses di atas harus diulang untuk perbandingan prioritas dan kemudian operasi dilakukan. Faktanya, ini adalah proses rekursif sampai tumpukan operator kosong atau prioritas operator saat ini lebih tinggi daripada operator atas tumpukan operator. Metode ISPRI digunakan untuk menentukan prioritas operator.
Kodenya adalah sebagai berikut:
// menilai apakah operator saat ini memiliki prioritas lebih tinggi dari yang terakhir, jika dikembalikan true // sebaliknya, mengembalikan false $ scope.ispri = fungsi (saat ini, terakhir) {if (saat ini == terakhir) {return false; } else {if (current == "×" || current == "÷") {if (last == "×" || last == "÷") {return false; } else {return true; }} else {return false; }}};Aturan penilaian telah dijelaskan sebelumnya.
Selain itu, ada metode checkOperator , yaitu untuk menentukan apakah simbol input adalah empat simbol operator penambahan, pengurangan, perkalian dan pembagian.
Kodenya adalah sebagai berikut:
// menilai apakah simbol saat ini adalah simbol yang dapat dioperasikan $ scope.checkoperator = fungsi (opt) {if (opt == "+" || opt == "-" || opt == "×" || opt == "÷") {return true; } return false; }Jika demikian, kembalikan true, jika tidak, kembalikan salah.
Sejauh ini, masih ada cabang dengan input yang sama dengan angka yang belum
Kode ini adalah sebagai berikut (Metode Tersambung ke ShowResult)
// Jika yang diklik adalah tanda yang sama lain jika (a == "=" && $ scope.result! = "" && $ scope.result! = "Error") {$ scope.flag = false; $ scope.num.push ($ scope.Result); while ($ scope.opt.length! = 0) {var operator = $ scope.opt.pop (); var right = $ scope.num.pop (); var left = $ scope.num.pop (); $ scope.calculate (kiri, operator, kanan); }}};Jika input adalah tanda yang sama, set bendera pertama ke false, memungkinkan antarmuka untuk redisplay saat berikutnya Anda memasukkan nomor, dan nomor yang saat ini ditampilkan harus dimasukkan ke dalam tumpukan sebagai nomor perhitungan. Maka Anda perlu melakukan operasi penumpukan berkelanjutan sampai tumpukan operator kosong sebelum dapat berhenti.
Meringkaskan
Di atas adalah kode utama dan proses implementasi. Karena ada banyak kode cabang, semua cabang diberikan sekaligus dan tidak dapat dijelaskan secara rinci. Oleh karena itu, metode showResult dipisahkan, yang mungkin tidak mudah beradaptasi. Karena tulisannya terburu -buru dan tidak membutuhkan terlalu banyak waktu untuk menguji, mungkin ada beberapa bug, tolong tunjukkan. Pada saat yang sama, karena level yang terbatas, metode ini mungkin bukan yang terbaik. Selamat datang untuk memberikan rencana yang lebih baik untuk berkomunikasi dan belajar bersama ~~ di atas adalah seluruh konten artikel ini. Saya berharap ini akan membawa bantuan untuk belajar atau bekerja semua orang.