<div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> ngular adalah framework javascript digunakan untuk membangun sebuah aplikasi <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">client-side</em> yang dikembangkan oleh Angular Team Google. Angular yang diumumkan oleh google melalui <a href="https://ngeurope.org/" style="border: 0px; box-sizing: inherit; color: #0085b2; font: inherit; margin: 0px; padding: 0px; text-decoration-line: none;">ng-Europe conference</a> pada oktober 2013 menggunakan <a href="https://www.typescriptlang.org/" style="border: 0px; box-sizing: inherit; color: #0085b2; font: inherit; margin: 0px; padding: 0px; text-decoration-line: none;">Typescript</a> sebagai bahasa pemrograman. Hingga saat artikel ini ditulis angular telah mencapai versi 7 dengan berbagai fitur yang powerfull.</div> <h4 style="background-color: snow; border: 0px; box-sizing: inherit; clear: both; color: #333333; font-family: "Open Sans Condensed"; font-size: 1.672em; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-weight: 300; line-height: 1.3; margin: 1em 0px 0.5em; padding: 0px;"> Perbedaan AngularJs dan Angular</h4> <div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> Mungkin masih banyak yang menganggap angularJs dan angular sama, padahal keduanya berbeda. Angular adalah nama untuk framework angular yang merujuk pada versi 2 dan seterusnya, sedangkan angujarJs merujuk pada versi 1. AngularJs ditulis dengan javascript dan menggunakan konsep MVC (Model View Controller), sedangkan angular menggunakan typescript dengan konsep <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">component-based-architecture </em>dimana setiap elemen pada angular terdiri dari sebuah <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">component</em>.</div> <div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> Berikut adalah beberapa hal yang membedakan angular dengan angularJs.</div> <ul style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; list-style-image: initial; list-style-position: outside; margin: 0px 0px 1em 2em; padding: 0px;"> <li style="border: 0px; box-sizing: inherit; font: inherit; margin: 0px; padding: 0px;">AngularJs ditulis dengan javascript, dapat langsung diakses karena dikenali oleh browser, sedangkan angular ditulis dengan typescript yang tidak dikenali oleh browser, sehingga perlu dicompile dan diconvert ke javascript terlebih dahulu.</li> <li style="border: 0px; box-sizing: inherit; font: inherit; margin: 0px; padding: 0px;">Angular tidak mengenal konsep <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">scope</em> dan <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">controller</em>, melainkan menggunakan <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">component-based</em> sebagai arsitektur utamanya.</li> <li style="border: 0px; box-sizing: inherit; font: inherit; margin: 0px; padding: 0px;">Angular memiliki sintaks yang berbeda dengan angularJs, lebih menekankan pada “[ ]” untuk <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">property binding</em> dan “( )” untuk <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">event binding</em>.</li> <li style="border: 0px; box-sizing: inherit; font: inherit; margin: 0px; padding: 0px;">Modularity, angular dapat tersusun dari beberapa <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">module</em> dan memeliki banyak <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">core functional</em>.</li> </ul> <h4 style="background-color: snow; border: 0px; box-sizing: inherit; clear: both; color: #333333; font-family: "Open Sans Condensed"; font-size: 1.672em; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-weight: 300; line-height: 1.3; margin: 1em 0px 0.5em; padding: 0px;"> Angular CLI</h4> <div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> Angular CLI adalah singkatan dari Angular Command Line Interface yang merupakan seperangkat <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">command line</em> yang digunakan untuk mengembangkan sebuah aplikasi angular. Dengan cli, programmer tidak perlu menghabiskan waktu untuk melakukan install dan setup kebutuhan dasar yang terlalu banyak, cukup dengan menjalankan beberapa command cli saja. Tutorital tentang cara menginstall angular cli dapat anda baca di tulisan saya Cara menginstall angular cli.</div> <div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> Berikut beberapa command line cli yang sering digunakan dalam mengembangkan aplikasi angular.</div> <ul style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; list-style-image: initial; list-style-position: outside; margin: 0px 0px 1em 2em; padding: 0px;"> <li style="border: 0px; box-sizing: inherit; font: inherit; margin: 0px; padding: 0px;"><em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">ng new</em>, digunakan unutk membuat project baru</li> <li style="border: 0px; box-sizing: inherit; font: inherit; margin: 0px; padding: 0px;"><em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">ng serve</em>, digunakan unutk menjalankan sebuah project angular</li> <li style="border: 0px; box-sizing: inherit; font: inherit; margin: 0px; padding: 0px;"><em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">ng generate</em>, untuk men-generate beberapa kebutuhan seperti <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">component</em>, <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">module</em>, <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">service</em>, <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">pipe</em> dan lain-lain.</li> <li style="border: 0px; box-sizing: inherit; font: inherit; margin: 0px; padding: 0px;"><em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">ng build</em>, untuk build dan deploy.</li> <li style="border: 0px; box-sizing: inherit; font: inherit; margin: 0px; padding: 0px;"><em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">ng test</em>, untuk melakukan testing pada aplikasi angular</li> </ul> <div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> Untuk cara menginstall angular cli anda dapat membaca tulisan saya di Cara menginstall angular 6.</div> <h4 style="background-color: snow; border: 0px; box-sizing: inherit; clear: both; color: #333333; font-family: "Open Sans Condensed"; font-size: 1.672em; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-weight: 300; line-height: 1.3; margin: 1em 0px 0.5em; padding: 0px;"> Single Page Application (SPA)</h4> <div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> Single Page Application adalah sebuah aplikasi yang berbeda dengan website tradisional pada umumnya. Seperti namanya, SPA adalah sebuah aplikasi yang dapat dijalankan di browser hanya dengan satu halaman saja.</div> <div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> Salah satu framework yang mendukung SPA adalah angular. Jika anda menjalankan sebuah aplikasi angular di laman browser dan melakukan navigasi dari satu halaman ke halaman lain maka anda akan melihat bahwa browser tidak memuat ulang halaman tersebut.</div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9K1ljitEPmWdb06Pnl_dhTElbcGT2hgMu_u9-wSTigtxgNmR4Egkpb4BLUVWIKOJgXx5wd7k3CNtR4JXu1OQ2nbMMERqVHJpSX-S86QAOK0ewR3VotFq4SzV0SWP010WizgE69dS9wQaE/s1600/Screen-Shot-2018-10-20-at-2.05.58-PM-628x275.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="275" data-original-width="628" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9K1ljitEPmWdb06Pnl_dhTElbcGT2hgMu_u9-wSTigtxgNmR4Egkpb4BLUVWIKOJgXx5wd7k3CNtR4JXu1OQ2nbMMERqVHJpSX-S86QAOK0ewR3VotFq4SzV0SWP010WizgE69dS9wQaE/s320/Screen-Shot-2018-10-20-at-2.05.58-PM-628x275.png" width="320" /></a></div> <div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> <br /></div> <div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> SPA memuat keseluruhan content ketika aplikasi pertama kali di jalankan, selebihnya komuniasi antara <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">client</em> dan <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">server</em> melalui <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">ajax</em> dan <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">server</em> mengirimkan balikan dalam format <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">json</em> ke <em style="border: 0px; box-sizing: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px;">client-side</em>. Sehingga tampak seolah-olah laman website tidak dimuat ulang ketika berpindah-pindah halamn.</div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj00aKxPgnYI663VLbtl7aE-ajJHD68wsRMgcJK5io_8dfNsgtmBDk2F5XQ13Q0QTiKvOnOFaatwg96iimJXe4jfpRoigyR3bhaw6WjXjf0DAhXdU9MnfWRxIjo4NGwtSqwD51BoAZf08el/s1600/Screen-Shot-2018-10-20-at-2.11.36-PM-628x244.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="244" data-original-width="628" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj00aKxPgnYI663VLbtl7aE-ajJHD68wsRMgcJK5io_8dfNsgtmBDk2F5XQ13Q0QTiKvOnOFaatwg96iimJXe4jfpRoigyR3bhaw6WjXjf0DAhXdU9MnfWRxIjo4NGwtSqwD51BoAZf08el/s320/Screen-Shot-2018-10-20-at-2.11.36-PM-628x244.png" width="320" /></a></div> <div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> <br /></div> <div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> Semoga bermanfaat. Salam.</div> <div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> <br /></div> <div style="background-color: snow; border: 0px; box-sizing: inherit; color: #333333; font-family: "Open Sans"; font-size: 20px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px;"> sumber : <a href="http://serial.id/angular/pengertian-angular-cli-dan-single-page-application/" style="background-color: transparent;">http://serial.id/angular/pengertian-angular-cli-dan-single-page-application/</a></div>