AngularJS Sebuah Panduan Singkat

Posted on by libetg
AngularJS
Spread the love

 AngularJS  adalah kerangka kerja JavaScript yang dikembangkan oleh Google untuk membangun aplikasi web satu halaman (SPA – Single Page Applications). Salah satu fitur utamanya adalah two-way data binding, yang memungkinkan perubahan di antarmuka pengguna langsung mempengaruhi data aplikasi tanpa perlu menulis logika tambahan.

Jenis-jenis AngularJS

Angular JS: Ini adalah versi pertama dari Angular yang dikenal dengan nama “Angular 1.x”.
Angular 2+: Setelah AngularJS, versi berikutnya dikenal dengan nama “Angular” tanpa “JS”. Versi ini mencakup Angular 2, 3 (versi 3 dilewati), 4, 5, dst. Setiap versi memiliki peningkatan dan perubahan dari versi sebelumnya.

Contoh Codingan AngularJS (1.x)

html
<!DOCTYPE html>
<html>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js”></script>
<body>

<div ng-app=”myApp” ng-controller=”myCtrl”>

<h1>{{ greeting }}</h1>a

</div>

<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.greeting = ‘Halo Dunia!’;
});
</script>

</body>
</html>
Pada contoh di atas, kita menggunakan Angular JS untuk menampilkan pesan “Halo Dunia!”. ng-app mendefinisikan aplikasi Angular JS, ng-controller mendefinisikan kontroler, dan {{ greeting }} adalah ekspresi Angular JS yang menampilkan nilai dari variabel “greeting”.

Contoh Codingan Angular (2+)

Untuk contoh Angular 2+, kita akan membutuhkan lebih dari satu file dan pengaturan yang lebih kompleks karena menggunakan TypeScript dan sistem modul. Berikut adalah struktur dasar:

  • app.module.ts – Definisi modul utama

{ NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { AppComponent } from ‘./app.component’;

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

  • app.component.ts – Komponen utama

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
template: `<h1>{{ title }}</h1>`
})
export class AppComponent {
title = ‘Halo Dunia!’;
}

  • main.ts – Titik masuk aplikasi

import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { AppModule } from ‘./app/app.module’;

platformBrowserDynamic().bootstrapModule(AppModule);

Langkah-langkah untuk kombinasi AngularJS dan Angular 2+:

  • Persetujuan Lingkungan: Pastikan Anda memiliki semua dependensi yang diperlukan untuk menjalankan Angular 2+ (seperti Angular CLI, Node.js, dll.)
  • Bootstrap Kedua Aplikasi: Anda akan memiliki AngularJS dan Angular 2+ berjalan bersama dalam aplikasi yang sama. Anda bisa melakukan ini dengan meng-bootstrap Angular 2+ dalam aplikasi AngularJS yang ada.
  • Migrasi Komponen: Mulailah dengan memigrasikan komponen yang paling sederhana. Gunakan ngUpgrade untuk memudahkan migrasi komponen dari AngularJS ke Angular 2+. Modul ngUpgrade memungkinkan komponen dari kedua versi berfungsi bersama dalam harmoni.
  • Integrasi Layanan: Setelah komponen, Anda mungkin ingin memigrasikan layanan. ngUpgrade juga memberikan mekanisme untuk menyuntikkan layanan dari AngularJS ke Angular 2+ dan sebaliknya.
  • Router: Jika Anda menggunakan ngRoute atau ui-router di AngularJS, Anda harus mempertimbangkan bagaimana mengintegrasikannya dengan sistem routing Angular 2+. Ada solusi untuk ui-router yang memungkinkan Anda menjalankan routing AngularJS dan Angular 2+ bersama-sama.
  • Pertimbangan Kinerja: Dengan kedua kerangka kerja berjalan bersama, Anda mungkin melihat penurunan kinerja. Pastikan Anda mengoptimalkan aplikasi Anda dan menghapus kode AngularJS saat Anda memigrasikannya.
  • Pembersihan: Setelah semua komponen dan layanan telah dimigrasikan, Anda dapat menghapus AngularJS dari proyek Anda sepenuhnya dan menjalankan Angular 2+ sepenuhnya.

Untuk menjalankan Angular 2+, Anda memerlukan pengaturan tambahan dengan alat seperti Angular CLI, Node.js, dan lainnya.

Kesimpulan

AngularJS dan versi Angular selanjutnya adalah kerangka kerja yang kuat untuk pengembangan aplikasi web modern. Meskipun masih digunakan di beberapa tempat, versi Angular yang lebih baru (2+) menawarkan performa yang lebih baik, fitur yang lebih kaya, dan pendekatan yang lebih modular. Untuk pengembangan baru, disarankan menggunakan versi terbaru Angular.

 

Related Posts