Cara Memasang AngularJs

Diposting pada

Memasang AngularJs

Proses instalasi atau pemasangan AngularJs ke dalam aplikasi yang akan kita bangun sangatlah mudah. Kita hanya perlu meng-include file AngularJs di dalam file HTML menggunakan tag <script> seperti layaknya file JavaScript biasa.

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

Atau jika anda lebih memilih untuk mengunduh filenya terlebih dahulu untuk direferensikan melalui folder lokal maka menjadi seperti di bawah ini.

<html>
<head>
</head>
<body>
<script src=”js/angular.min.js”></script>
</body>
<html>

Hello World

Supaya belajarnya jadi semangat maka akan saya tunjukkan sedikit kesaktian dari AngularJs. Idenya sangat sederhana namun akan membuat kita paham bagaimana flow dari AngularJs.

  1. Buat sebuah file dengan nama index.html dan pasang AngularJs seperti pada contoh di atas.
  2. Buat sebuah folder baru bernama js sejajar dengan file index.html.
  3. Buat file dengan nama app.js di dalam folder js tadi dan isikan kode berikut.

    var app=angular.module(‘FirstApp’,[]);

  4. Include file app.js di dalam file index.html menggunakan tag <script> , letakkan pada bagian atas sebelum tag </body> .
  5. Buat folder baru dengan nama controllers di dalam folder js dan buat file. MainController.js di dalam folder baru ini.
  6. Isikan kode berikut di dalam file MainController.js.

    app.controller(‘MainController’,[‘$scope’, function($scope)
    {$scope.title=’Belajar AngularJs’;}]);

  7. Include file MainController.js di dalam file index.html menggunakan tag <script> , letakkan pada bagian atas sebelum tag </body> .
  8. Edit file index.html menjadi seperti tampak pada kode berikut.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Belajar AngularJs</title>
    </head>
    <body ng-app=”FirstApp”>
    <div ng-controller=”MainController”>
    </div>
    <script src=”js/angular.min.js”></script>
    <script src=”js/app.js”></script>
    <script src=”js/controllers/MainController.js”></ script>
    </body>
    </html>

  9. Jalankan index.html pada browser.

Aplikasi AngularJs yang paling sederhana (seperti di atas) terdiri dari 1 modul dan 1 controller. Apa yang ada pada file app.js adalah modul sedangkan apa yang ada pada file MainController.js adalah controller. Supaya HTML tahu modul apa dan controller apa yang digunakan kita perlu memberitahunya dengan menggunakan directive ng-app untuk modul dan ng-controller untuk controller. Kalau pembaca sudah benar melakukan langkah-langkah di atas maka hasil yang muncul pada browser seharusnya adalah seperti gambar berikut.

Sekarang coba ubah variabel title yang ada pada controller dengan kalimat sesuka pembaca dan kemudian refresh browser dan lihat perubahan yang terjadi. Hal lain yang patut dicoba adalah menambahkan variabel baru dan kemudian coba dimunculkan pada view. Perubahan pada controller

app.controller(‘MainController’,[‘$scope’, function($scope){
$scope.title=’Belajar AngularJs’;
$scope.book={
title: ‘Belajar AngularJs Bersama Fatkhan’,
author : ‘Fatkhan’,
price : 80000
};
}]);

Perubahan pada view

<div ng-controller=”MainController”>
{{title}} </br>
{{book.title}} </br>
{{book.author}} </br>
{{book.price}}
</div>

Sampai sini kita sudah belajar hal paling dasar untuk memahami AngularJs. Demikian postingan dasar-dasar AngularJS semoga bermanfaat. Pada postingan berikutnya InsyaAllah akan saya bahas WorkFlow dalam AngularJS.

Baca Juga:   Cara Menghilangkan Consider Replacing Your Battery/Tanda Silang pada Batrai Laptop

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.