3 Alasan untuk Memilih AngularJS untuk Project Anda Selanjutnya

AngularJS adalah framework JavaScript yang dibuat oleh Google, yang dirancang untuk membuat pengembangan front-end Anda semudah mungkin. Ada banyak framework dan plugin yang tersedia. Karena itu, kadang-kadang terbukti sulit untuk menyaring semua kebisingan untuk menemukan alat yang berguna.

Baca Juga : Angular vs React 7

Berikut adalah tiga alasan mengapa Anda dapat memilih AngularJS untuk proyek Anda berikutnya.

1 - Dikembangkan oleh Google

    Angular dibangun dan dikelola oleh Google engineers yang berdedikasi.

Ini mungkin tampak jelas, tetapi penting untuk diingat bahwa banyak (tidak semua) framework dibuat oleh penggemar di komunitas open source. Sementara semangat dan dorongan telah membentuk framework, seperti Cappucino dan Knockout, Angular dibangun dan dikelola oleh para engineers Google yang berdedikasi (dan sangat berbakat). Ini berarti Anda tidak hanya memiliki komunitas terbuka yang luas untuk belajar, tetapi Anda juga memiliki engineers yang terampil dan sangat siap bertugas untuk membantu Anda menjawab pertanyaan Angular Anda

Baca Juga : Framework Laravel
                   Framewok Codeigniter

Ini bukan upaya pertama Google pada framework JavaScript; mereka pertama kali mengembangkan Web Toolkit komprehensif mereka, yang mengkompilasi Java ke JavaScript, dan digunakan oleh tim Google Wave secara luas. Dengan munculnya HTML5, CSS3, dan JavaScript, sebagai bahasa front-end dan back-end, Google menyadari bahwa web tidak dimaksudkan untuk ditulis murni di Java.

    AngularJS muncul untuk membakukan struktur aplikasi web dan menyediakan template masa depan untuk bagaimana aplikasi sisi klien harus dikembangkan.

Versi 1.0 dirilis tepat per Desember, 2012 dan sedang digunakan oleh sejumlah aplikasi, mulai dari hobi hingga produk komersial. Adopsi AngularJS sebagai framework yang layak untuk pengembangan sisi klien dengan cepat dikenal oleh seluruh komunitas pengembangan web.

Karena AngularJS dibangun oleh Google, Anda dapat yakin bahwa Anda berurusan dengan kode yang efisien dan andal yang akan ditingkatkan dengan proyek Anda. Jika Anda mencari framework dengan fondasi yang kokoh, Angular adalah pilihan Anda!


2 - Ini Komprehensif

    Jika Anda terbiasa dengan proyek, seperti QUnit, Mocha atau Jasmine, maka Anda tidak akan kesulitan mempelajari API pengujian unit Angular.


Baca Juga : Menguji Components di Angular Menggunakan Jasmine

Angular, mirip dengan Backbone atau JavaScriptMVC, adalah solusi lengkap untuk pengembangan front-end yang cepat. Tidak ada plugin atau kerangka kerja lain yang diperlukan untuk membangun aplikasi web berbasis data. Berikut ini ikhtisar fitur menonjol Angular:

• REST Easy. Tindakan tenang dengan cepat menjadi standar untuk berkomunikasi dari server ke klien. Dalam satu baris JavaScript, Anda dapat dengan cepat berbicara ke server dan mendapatkan data yang Anda butuhkan untuk berinteraksi dengan halaman web Anda. AngularJS mengubah ini menjadi objek JavaScript sederhana, sebagai Model, mengikuti pola MVVM (Model View View-Model).

• MVVM to the Rescue! Model berbicara dengan objek ViewModel (melalui sesuatu yang disebut objek $ scope), yang mendengarkan perubahan pada Model. Ini kemudian dapat dikirimkan dan disajikan oleh Views, yang merupakan HTML yang mengekspresikan kode Anda. Tampilan dapat dirutekan menggunakan objek $ routeProvider, sehingga Anda dapat menaut-dalam dan mengatur Tampilan dan Pengontrol Anda, mengubahnya menjadi URL yang bisa dinavigasi. AngularJS juga menyediakan pengontrol stateless, yang menginisialisasi dan mengontrol objek $ scope.

• Data Binding and Dependency Injection. Segala sesuatu dalam pola MVVM dikomunikasikan secara otomatis di seluruh UI setiap kali ada perubahan. Ini menghilangkan kebutuhan untuk wrappers, getter / setter atau deklarasi class. AngularJS menangani semua ini, sehingga Anda dapat mengekspresikan data Anda sesederhana dengan JavaScript primitif, seperti array, atau serumit yang Anda inginkan, melalui tipe khusus. Karena semuanya terjadi secara otomatis, Anda dapat meminta dependensi Anda sebagai parameter dalam fungsi layanan AngularJS, daripada satu panggilan giant main () untuk mengeksekusi kode Anda.

• Extends HTML. Sebagian besar situs web yang dibangun hari ini adalah serangkaian tag <div> raksasa dengan sedikit kejelasan semantik. Anda perlu membuat CSS classes yang luas dan lengkap untuk mengekspresikan maksud dari setiap objek di DOM. Dengan Angular, Anda dapat mengoperasikan HTML seperti XML, memberi Anda kemungkinan tak terbatas untuk tag dan atribut. Angular menyelesaikan ini, melalui kompiler HTML dan penggunaan arahan untuk memicu perilaku berdasarkan sintaks yang baru dibuat yang Anda tulis.

• Makes HTML your Template. Jika Anda terbiasa dengan Mustache atau Hogan.js, maka Anda dapat dengan cepat memahami sintaks braket mesin templating Angular, karena itu hanya HTML. Angular melintasi DOM untuk templat ini, yang menampung arahan yang disebutkan di atas. Templat kemudian diteruskan ke kompiler AngularJS sebagai elemen DOM, yang dapat diperluas, dieksekusi atau digunakan kembali. Ini kuncinya, karena, sekarang, Anda memiliki komponen DOM mentah, daripada string, memungkinkan untuk manipulasi langsung dan ekstensi DOM tree.

• Enterprise-level Testing. Seperti yang dinyatakan di atas, AngularJS tidak memerlukan framework atau plugin tambahan, termasuk pengujian. Jika Anda terbiasa dengan proyek, seperti QUnit, Mocha atau Jasmine, maka Anda tidak akan kesulitan mempelajari API pengujian unit dan Skenario Runner Angular, yang memandu Anda melalui melaksanakan pengujian Anda sedekat mungkin dengan keadaan sebenarnya dari aplikasi produksi Anda mungkin.

Ini adalah prinsip dasar yang memandu AngularJS untuk menciptakan front-end codebase yang efisien, didorong oleh kinerja, dan dapat dipelihara. Selama Anda memiliki source untuk menyimpan data, AngularJS dapat melakukan semua pekerjaan berat pada klien, sambil memberikan pengalaman yang kaya dan cepat bagi pengguna akhir.


3 - Memulai dalam hitungan Menit

Memulai dengan AngularJS sangat mudah. Dengan beberapa atribut yang ditambahkan ke HTML Anda, Anda dapat memiliki aplikasi Angular sederhana dalam waktu kurang dari 5 menit!

•     Tambahkan direktif ng-app ke tag <html> sehingga Angular tahu untuk berjalan di halaman:

1:  <html lang="en" ng-app>  

• Tambahkan tag <script> Angular ke akhir tag <head> Anda:

1:  <head>  
2:  ...meta and stylesheet tags...  
3:   <script src="lib/angular/angular.js"></script>  

• Tambahkan HTML biasa. Arahan AngularJS diakses melalui atribut HTML, sementara ekspresi dievaluasi dengan notasi braket ganda:

1:  <body ng-controller="ActivitiesListCtrl">  
2:   <h1>Today's activities</h1>  
3:   <ul>  
4:    <li ng-repeat="activity in activities">  
5:     {{activity.name}}  
6:    </li>  
7:   </ul>  
8:  </body>  
9:  </html>  

Arahan ng-controller mengatur namespace, di mana kita dapat menempatkan JavaScript Sudut kita untuk memanipulasi data dan mengevaluasi ekspresi dalam HTML kita. ng-repeat adalah objek pengulang Angular, yang menginstruksikan Angular untuk terus membuat elemen daftar selama kita memiliki aktivitas untuk ditampilkan, dan menggunakan elemen <li> ini sebagai templat untuk bagaimana kita ingin semuanya terlihat.

    Saat Anda ingin mengambil sesuatu dari Angular, ambil data Anda dengan file JavaScript yang berisi fungsi yang namanya sesuai dengan pengontrol yang telah Anda uraikan dalam HTML Anda:

 function ActivitiesListCtrl($scope) {  
  $scope.activities = [  
   { "name": "Wake up" },  
   { "name": "Brush teeth" },  
   { "name": "Shower" },  
   { "name": "Have breakfast" },  
   { "name": "Go to work" },  
   { "name": "Write a Nettuts article" },  
   { "name": "Go to the gym" },  
   { "name": "Meet friends" },  
   { "name": "Go to bed" }  
  ];  
  }  

Seperti yang disebutkan sebelumnya, kita membuat fungsi dengan nama yang sama dengan direktif ng-controller, sehingga halaman kita dapat menemukan fungsi Angular yang sesuai untuk menginisialisasi dan mengeksekusi kode kita dengan data yang ingin kita ambil. Kita memberikan parameter $ scope untuk mengakses daftar aktivitas template yang kita buat di tampilan HTML kita. Kita kemudian memberikan serangkaian kegiatan dasar dengan kunci, nama, sesuai dengan nama properti aktivitas yang kita cantumkan dalam notasi braket ganda, dan nilai, yang merupakan string yang mewakili aktivitas yang ingin kita capai hari ini.

Meskipun aplikasi ini selesai, itu tidak terlalu praktis. Sebagian besar aplikasi web menampung banyak data yang disimpan di server jarak jauh. Jika data Anda disimpan di server di suatu tempat, kita dapat dengan mudah mengganti array dengan panggilan dari Angular's AJAX API:

 function ActivitiesListCtrl($scope) {  
  $http.get('activities/list.json').success(function (data) {  
   $scope.activities = data;  
  }  
 }  

Kita hanya mengganti objek array JavaScript hash asli dengan fungsi HTTP GET khusus, yang disediakan oleh Angular API. Kita meneruskan nama file yang kita lihat untuk diambil dari server (dalam hal ini, file aktivitas JSON) dan kita dikembalikan promise dari Angular, banyak dengan cara yang sama seperti promise pattern works di jQuery.

   Promise ini kemudian dapat menjalankan success function kita ketika data telah dikembalikan, dan semua yang harus kita lakukan adalah bind data pengembalian ke aktivitas kita, seperti yang dinyatakan sebelumnya, disediakan oleh dependency injection, melalui parameter $ scope.

Static to-do list itu bagus, tetapi kekuatan sebenarnya berasal dari betapa mudahnya kita dapat memanipulasi halaman tanpa harus mengatur banyak fungsi JavaScript untuk mendengarkan dan menanggapi interaksi pengguna. Bayangkan kita perlu mengurutkan daftar kegiatan kita berdasarkan abjad. Yah, kita cukup menambahkan pemilih drop-down untuk memungkinkan pengguna mengurutkan daftar:

 <h3>Sort:</h3>  
 <select>  
   <option   

Tambahkan model direktif ke drop down:

 <select ng-model="sortModel">  

Terakhir, kita memodifikasi tag <li> untuk mengenali sortModel sebagai cara untuk order daftar kita:

 <li ng-repeat="activity in activities | orderBy: sortModel">  

Semua pengangkatan berat dilakukan secara cerdas oleh AngularJS.

Dan itu dia! Rahasianya adalah filter yang telah kita tambahkan ke arahan ng-repeat dalam daftar item. Filter orderBy mengambil input array (daftar aktivitas kita), menyalinnya, dan reorders yang menyalin oleh properti yang diuraikan dalam tag select. Bukan kebetulan bahwa atribut nilai dari tag opsi adalah nama, nilai yang sama yang disediakan oleh file JSON kita sebagai properti dari suatu aktivitas. Inilah yang memungkinkan AngularJS untuk secara otomatis mengubah nilai opsi HTML kita menjadi keyword yang kuat untuk menyortir templat aktivitas kita.

Perhatikan bagaimana kita tidak mendengarkan user interaction events. Kode kita tidak diliputi panggilan balik dan penangan event untuk berurusan dengan objek yang telah kita klik, pilih, sentuh atau aktifkan. Semua pengangkatan berat dilakukan secara cerdas oleh AngularJS untuk menemukan the controller function, membuat dependency antara templat dan controller, dan mengambil data untuk membuatnya di layar.

AngularJS menyediakan tutorial lengkap dan kuat, yang menciptakan aplikasi web yang sangat mirip dan memperluasnya lebih banyak - semua dalam hitungan menit!

Kesimpulan

AngularJS dengan cepat menjadi framework JavaScript yang dominan untuk pengembangan web profesional. Anda dapat menemukan banyak skrip dan aplikasi AngularJS di github misalnya untuk membantu Anda mencapai lebih banyak dengan Angular JS, seperti cropping tools, online store templates, rating apps, dan banyak lagi.


Dalam tutorial ini:

• Kita telah meninjau bagaimana Google datang untuk mengembangkan framework ini sebagai cara untuk memaksimalkan HTML.
• Kita telah memeriksa basic core features dan fungsionalitas yang membuat Angular begitu menyenangkan untuk bekerja dengannya.
• Akhirnya, kita telah mengembangkan demo yang dinamis dan berfungsi penuh dalam hitungan menit untuk menunjukkan kekuatan sebenarnya dari betapa mudahnya untuk beralih dari yang tidak ada, ke aplikasi yang lengkap.

Jika Anda mencari framework yang tangguh dan terawat baik untuk proyek berukuran apa pun, saya sangat menyarankan agar Anda melihat AngularJS. Ini dapat diunduh secara gratis di AngularJS.org, yang juga berisi banyak informasi, termasuk dokumentasi API lengkap, serta berbagai contoh dan tutorial yang mencakup setiap segi pengembangan web front-end. Semoga berhasil!