Perkenalan Angular The Superhero Javascript

Angular

Anda pasti tidak asing dengan javascript-framework yang satu ini.

Pengertian Angular adalah struktural framework untuk aplikasi web dinamis. Ini memungkinkan Anda menggunakan HTML sebagai bahasa template Anda dan memungkinkan Anda memperluas sintaks HTML(maksudnya anda bisa membuat kostum tag sesuai dengan kebutuhan anda). contoh: <div foo>.

Pada Artikel kali ini kita akan membicarakan W4H(what,when,who,why,how).

Hal yang pertama kita bicarakan adalah (What?)
Apa itu angular, secara simple kita bisa bilang angular adalah framework. Namun, Secara konsep Angular tidak mencakup dari hulu sampai hilir, dengan kata lain angular tidak bisa berdiri sendiri. Angular membutuhkan applikasi lain untuk memasukkan ke database, bisa applikasi seperti, lumen, sinatra, laravel, rails, atau native.

Kenapa?(Why)

Angular tidak dapat berdiri sendiri di karenakan angular adalah client side framework.Masih banyak perdebatan sebenarnya konsep apa yang di gunakan oleh angular, apakah MVC, MVVM, atau MV*(MV whatever).

reference: link1, link2, link3

Alasan kenapa harus menggunakan Angular.

Untuk membuat SPA(Single Page Application) Anda bisa menggunkan Jquery, Ajax, atau script yang lain akan tetapi anda akan menghadapi

Apa yang di maksud?

case 1: (Jquery)

Anda menggunakan Jquery untuk membuat SPA(Single Page Application). Apa yang akan terjadi?
untuk scope kecil anda bisa menggunakan jquery tanpa masalah. Namun, jika applikasi anda bertambah besar apa yang terjadi? kode anda susah di maintain, bisa terjadi konflik code.

case 2:(Ajax)

Anda bisa menggunakan Ajax, namun dengan ajax akan kurang flexible, apa yang bisa di lakukan oleh ajax sangat terbatas, ajax hanya terbatas untuk satu event. (contoh: on click get data). Bayangkan jika di dalam satu page banyak sekali event,apa yang terjadi selanjutnya?. pasti untuk memantain ke depan atau anda memberikan kepada orang yang baru, mereka akan mengalami kesulitan.

case 3: (Angular)
Angular di desain untuk menjadi SPA framework. Jika menggunakan Angular anda bisa lebih flexiable dan lebih maintainable. Mengapa seperti itu?

Mari kita ulas lebih lanjut tentang angular. Bagaimana konsep dan cara menggunakannya.(How)

Angular adalah full feature SPA(Single Page Application) framework. Berikut adalah komponen angular

angular feature

Jika anda bingung itu wajar, Pasti ada beberapa pertanyaan anda contoh:

Apa Pentingnya komponen di atas
Apa fungsinya komponen ini
Apa yang membedakan Angular dengan SPA lain

Berikut ini adalah contoh penggunaan Angular Secara Simple.

Jika anda membuat code sederhana seperti di bawah ini

picture from angular in 60 minutes

Kode diatas akan menghasilkan SPA, jika anda mengubah input secara serentak kolom {{name}} akan berubah. Sebelum lebih jauh ada baiknya anda mengerti istilah directive dan data binding expression. saya beri perumapaan yang mudah, deirective adalah tag yang di gunakan untuk mengubah DOM. seperti ng-model yang menandakan <div> ataupun tag yang di pasang ng-model berlaku fungsi angular yang di buat. sedangkan Data Binding Expression adalah tag seperti <% %> pada rails atau {{ }} pada angular dan laravel. Jika di php native bisa di samakan dengan tag <?php ?> pada html.

Oke kita bahas apa yang sebenarnya terjadi dengan proses simple di atas. Proses terjadi di applikasi men-difine proses seperti di bawah ini

Kita bisa bilang $scope berfungsi sebagai glue(lem) yang menghubungkan antara view dan controller. Ini sebabnya ketika kita memasukkan input maka kita tidak perlu merefresh page untuk mendapatkan data yang kita input.

Gambar yang di atas Menggambarkan sebagian proses. Gambar di bawah mengambarkan keseluruhan.

Applikasi dari konsep di atas seperti di bawah ini

=========================|| HTML ||===========================

<!doctype html>
<html ng-app="todoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoListController as todoList">
<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
[ <a href="" ng-click="todoList.archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<label class="checkbox">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</label>
</li>
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</body>
</html>

=========================|| App.js ||===========================

angular.module('todoApp', [])
.controller('TodoListController', function() {
var todoList = this;
todoList.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];
todoList.addTodo = function() {
todoList.todos.push({text:todoList.todoText, done:false});
todoList.todoText = '';
};
todoList.remaining = function() {
var count = 0;
angular.forEach(todoList.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
todoList.archive = function() {
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) todoList.todos.push(todo);
});
};
});

contoh koding di atas di ambil dari https://angularjs.org/

Modul

secara pengertian bahasa modul pemisahan komponen menjadi unit-unit kecil. Pengertian selengkapnya anda bisa baca di sini. Ada baiknya anda juga membaca Pengertian modular programming

Salah satu aspek penting dalam angular adalah modul. Modul adalah container. Maksudnya di sini modul bisa berisi custom config, custom filter, custom directive, custom controller dan lain-lain.

Contoh dalam bentuk kodingan seperti di bawah ini

gambar di atas di ambil dari video

Pertanyaan Terakhir(Who)

Siapakah sebenarnya yang membutuhkan Angularjs. Jika project anda membutuhkan SPA atau anda membuat sesuatu dengan project yang banyak menggunakan SPA, Maka angularjs sangat berguna untuk Anda. Atau untuk anda yang ingin reserch/

Untuk lebih lengkapnya anda bisa melihat video di bawah.

Penjelasan di atas mengenai angular 1, karena sekarang ada angular 2 yang belum saya telusuri lebih lanjut. Untuk perbandingan mana yang lebih bagus apakah angular atau reactjs. Masih banyak perdebatan walaupun banyak yang mengatakan reactjs lebih unggul. Mungkin akan kita bahas masalah reactjs di article selanjutnya..

Note:

directive

https://code.tutsplus.com/tutorials/mastering-angularjs-directives--cms-22511

digest,watch, and apply

service and factory

stateProvider

component

ui-angular

http://weblogs.asp.net/dwahlin/building-an-angularjs-modal-service

controller

http://stackoverflow.com/questions/12008908/angularjs-how-can-i-pass-variables-between-controllers

Transclusion

Reference:

Note: Jika ada yang ingin menulis ulang di blog, forum,social media dll sebaiknya di cantumkan sumbernya yaitu https://muhammadyasin89.blogspot.com/

Comments

Unknown4 March 2020 at 04:37
This is how my friend Wesley Virgin's biography begins with this shocking and controversial VIDEO.

Wesley was in the military-and soon after leaving-he revealed hidden, "MIND CONTROL" tactics that the CIA and others used to get whatever they want.

As it turns out, these are the same secrets lots of celebrities (notably those who "come out of nowhere") and the greatest business people used to become rich and famous.

You probably know that you only use 10% of your brain.

That's because most of your brainpower is UNTAPPED.

Maybe that expression has even occurred INSIDE OF YOUR own brain... as it did in my good friend Wesley Virgin's brain around seven years ago, while riding an unlicensed, trash bucket of a vehicle with a suspended driver's license and with $3.20 in his bank account.

"I'm so frustrated with living paycheck to paycheck! When will I finally succeed?"

You took part in those conversations, ain't it right?

Your own success story is going to start. You need to start believing in YOURSELF.

CLICK HERE TO LEARN WESLEY'S METHOD

Search This Blog

The Power of Sharing

Perkenalan Angular The Superhero Javascript

Comments

Post a Comment

Popular posts from this blog

10 CMS untuk Forum

11 Website yang Membayar Anda untuk Meng-upload File

10 Soal Ujian dari Perusahaan untuk Web Programmer