Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 2

Halo teman teman pada tutorial kali ini saya akan membahas tentang Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 2, pada Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 2, ini saya akan membahas tentang cara menampilkan data dari controller menggunakan Angular JS.

Oke teman teman kita langsung saja berikut Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 2, untuk menampilkan data menggunakan controller,

Buatlah sebuah folder baru yang bernama AngularJS didalam folder AngularJS buatlah sebuah file dengan nama index.html yang berisi struktur dari html seperti dibawah ini,

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 2</title>
</head>

<body>
</body>
</html>

Buatlah sebuah folder baru yang bernama “js” di dalam folder AngularJS
Jika sudah berikutnya buatlah sebuah file dengan nama app.js dan silahkan masukan script dibawah ini

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

Include file app.js didalam index.html yang telah kita buat menggunakan tag <script>, dan letakkan pada bagian atas antara tag </head> dan <body>
Buatlah sebuah folder baru dengan nama controller didalam folder js yang telah kita buat sebelumnya, dan buat sebuah file baru dengan nama MainController.js di dalam folder controller
Kemudian silahkan teman teman masukan script dibawah ini didalam file MainController.js

app.controller('MainController',['$scope', function($scope){
  $scope.title='Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 2';
}]);

Jika sudah silahkan include file MainController.js didalam file index.html menggunakan tag <script> yang diletakan pada bagian atas antara tag </head> dan <body>
Untuk lebih jelasnya silahkan lihat script di bawah ini, yang telah kita include atau kita hubungkan

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar AngularJs</title>
  </head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script  type="text/javascript" src="js/controllers/MainController.js"></script>
  <body ng-app="FirstApp">
    <div ng-controller="MainController">
	{{title}}
    </div>
  </body>
</html>

Oke teman teman pada materi kali ini kita hanya menggunakan 1 modul dan 1 controller, script yang berada didalam app.js itu merupakan sebuah modul yang akan kita gunakan, dan script yang berada didalam MainController.js merupakan sebuah controller yang akan kita tampilkan pada browser.

Untuk menampilkan hasil yang telah kita buat pada app.js dan MainController.js pada script HTML nya kita juga harus menambahkan directive ag-app untuk modul dan ng-controller untuk controller, dan “{{nama variable scope.title yang ada pada MinController}} ”

jika dijalankan pada browser maka hasilnya seperti dibawah ini,

Bagai mana teman teman cukup mudah bukan

Sekian tutorial saya kali ini mengenai Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 2

Terimakasih.

Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 2

Kategori