Pengertian Angular Js
AngularJS adalah sebuah kerangka framework Javascript bersifat terbuka atau open source yang di kembangkan atau di bangun oleh tim Google. angularjs menggunakan metode MVC (Model View Controller) yang membuat source code aplikasi menjadi rapi dan mudah di kembangkan. sampai saat ini angular.js sudah menjadi salah satu framework javascript yang paling populer dan sangat banyak di gunakan oleh para
developer di seluruh dunia untuk membangun aplikasi. kehandalan dari angular.js sendiri tidak bisa di ragukan lagi, salah satu faktornya karena di kembangkan oleh para tim ahli dari google.
Fitur Umum Angular Js
Angular JS adalah framework yang efisien untuk membangun Rich Internet Applications (RIA).Angular JS memberikan developer pilihan untuk menulis aplikasi pada sisi client dengan javascript dan pendekatan MVC (Model, View, Controller).Aplikasi
dengan menggunakan Angular JS bisa digunakan di segala web browser.Angular JS secara otomatis menghandle javascript supaya cocok dengan web browser yang digunakan.Angular JS adalah open source, gratis! Telah digunakan oleh ribuan developer di seluruh dunia.Fitur Utama Dalam Angular Js
Data binding : sinkronisasi data otomatis antara Model dan View.Scope : objek yang mengacu pada model, sebagai
perekat antara Controller dan View.Controller : kumpulan fungsi-fungsi dari javascript.Services : Angular JS datang dengan beberapa built-in services seperti $http untuk membuat sebuah XMLHttpRequests.Filters : pilihan item dari sebuah array dan mengembalikan sebuah array baru.Directives : marker dari DOM elemen seperti element, attribute, css dan lainnya.Templates :
tampilan yang dirender dengan informasi dari Controller dan Model.Routing : perpindahan tampilan.Model View Whatever : Angular JS tidak mengimplementasikan MVC secara umum, melainkan sesuatu yang lebih dekat sebagai MVVM (Model View View Model).Deep Linking : mengijinkan Anda untuk meng-encode keadaan dari aplikasi pada URL, sehingga bisa dibookmark. Aplikasi bisa direstore dari URL dari keadaan
terakhir.Dependency Injection : terdapat built in dependency injection sehingga membantu developer untuk membuat dan mencoba aplikasi secara mudah.Tiga Komponen Utama Framework Angular.Js
ng-app ։ Petunjuk ini mendefinisikan dan menghubungkan aplikasi AngularJS ke HTML.ng-model ։ Perintah ini mengikat nilai data aplikasi AngularJS ke kontrol masukan HTML.
ng-bind ։ Perintah ini mengikat data aplikasi AngularJS ke tag HTML.Kelebihan AngularJS
Memudahkan developer untuk melakukan pembuatan aplikasi karena mampu melakukan pengelolaan SIngle Page Application secara mudah.Tingkat interaksi dengan HTML tinggi karena memiliki kemampuan melakukan data binding pada HTML.Memiliki komponen yang dapat digunakan kembali.Memiliki sifat Dependency Injection yang membantu
pekerjaan developer dalam melakukan penulisan komponen atau kode yang terpisah satu sama lain.Kemudahan dalam melakukan pembuatan kode sehingga menghasilkan cara yang lebih singkat dan efisien.Kekurangan AngularJS
Tidak Aman – Menjadi kerangka kerja JavaScript saja, aplikasi yang ditulis di AngularJS tidak aman. otentikasi dan otorisasi sisi server harus dijaga agar aplikasi tetap aman.Tidak terdegradasi – Jika pengguna aplikasi Anda
menonaktifkan JavaScript maka pengguna hanya akan melihat halaman dasar dan tidak lebih.Cara Kerja Angular Js
Saat halaman terbuka di browser, berikut hal-hal yang terjadi։
Dokumen HTML dimuat ke browser, dan dievaluasi oleh browser. File AngularJS JavaScript melakukan load, obyek angular global akan dibuat. Selanjutnya, JavaScript yang mendaftarkan fungsi controller untuk menjalankannya.Berikutnya AngularJS akan
melakukan scan melalui HTML untuk mencari aplikasi AngularJS dan view. Setelah view ini terletak, ini menghubungkan view ke fungsi controller yang sesuai.Selanjutnya, AngularJS mengeksekusi fungsi controller. Kemudian menjadikan view dengan data dari model dipunyai oleh controller. Halaman ini sekarang siap untuk menampilkan hasil. This tutorial provides some methods that are used for HTML-encoding a string without an XSS vulnerability.
Here is an example which somehow reduces the XSS chance:
html>
<html>
<head>
<title>Title of the documenttitle>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">script>
head>
<body>
<div id="encoded">div>
<div id="decoded">div>
<script>
let string1 = 'Html & Css & Javascript';
let string2 = "Html & Css & Javascript";
$(document).ready(function() {
$("#encoded").text(htmlEncode(string1));
$("#decoded").text(htmlDecode(string2));
});
function htmlDecode(value) {
return $("").html(value).text();
}
function htmlEncode(value) {
return $('').text(value).html();
}
script>
body>
html>
On the htmlEncode function the innerText of the element is set, and the encoded innerHTML is retrieved. The innerHTML value of the element is set on the htmlDecode function the innerText is retrieved.
html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.min.js">script>
head>
<body>
<textarea rows="6" cols="50" name="normalTXT" id="textId">
textarea>
<button onclick="convert()">Convertbutton>
<br>
<URL>Encoding in URL:
<input width="500" type="text" name="URL-ENCODE" id="URL-ENCODE">
<br>
URL>
<HTML>Encoding in HTML:
<input type="text" name="HTML-ENCODE" id="HTML-ENCODE">
<br>
HTML>
<script>
function htmlEncode(value) {
//create a div in-memory, set it's inner text. Which jQuery automatically encodes.
//then take the encoded contents back out. The div never exists on the page.
return $('').text(value).html().replace(/&/g, '%26');
}
function htmlDecode(value) {
return $('').html(value).text();
}
function convert() {
let text = document.getElementById('textId');
let HTMLencoded = (text.value);
document.getElementById('HTML-ENCODE').value = HTMLencoded;
let urlEncode = htmlEncode(text.value);
$("#URL-ENCODE").val(urlEncode);
}
script>
body>
html>
This method will work fine in many scenarios, but in some cases, you will end up with a XSS vulnerability.
For the function above, consider the following string:
htmlDecode(" Javascript decoding the HTML function htmlDecode(input) {
let doc = new DOMParser().parseFromString(input, "text/html"); return doc.documentElement.textContent; } alert(htmlDecode("<img src='img.jpg'>")); // "" alert(htmlDecode("")); // ""
The function won’t run any JavaScript code as a side-effect. Any HTML tag will be ignored as the text content only will be returned.
Another useful and fast method exists which also encodes quote marks:
function htmlEscape(str) {
return str
.replace(/&/g, '&')
.replace(/'/g, "'")
.replace(/"/g, '"')
.replace(/>/g, '>')
.replace(//g, '>');
}
To escape forward-slash / for anti-XSS safety purposes use the following:
The replace() RegExp method replaces the specified string with another string. The method takes two parameters the first one is the string that should be replaced, and the second one is the string replacing
from the first string. The second string can be given an empty string so that the text to be replaced is removed.