Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 2
Halo teman teman di panduan kali ini saya akan membahas mengenai Basic-Basic yang Dipelajari di Pada Angular JS Part 2, di Basic-Basic yang Dipelajari di Pada Angular JS Part 2, ini saya akan membahas mengenai cara menampilkan data dari controller menggunakan Angular JS.
Oke teman teman kita seketika saja berikut Basic-Basic yang Dipelajari di Pada Angular JS Part 2, bagi 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>Basic-Basic yang Dipelajari di Pada Angular JS Part 2</title>
</head>
<body>
</body>
</html>
- Buatlah sebuah folder baru yang bernama “js” di pada folder AngularJS
- Sekiranya telah 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 bikin menggunakan tag <script>, dan letakkan di bagian atas antara tag </head> dan <body>
- Buatlah sebuah folder baru dengan nama controller didalam folder js yang telah kita bikin sebelumnya, dan bikin sebuah file baru dengan nama MainController.js di pada folder controller
- Kemudian silahkan teman teman masukan script dibawah ini didalam file MainController.js
app.controller('MainController',['$scope', function($scope){
$scope.title='Basic-Basic yang Dipelajari di Pada Angular JS Part 2';
}]);- Sekiranya telah silahkan include file MainController.js didalam file index.html menggunakan tag <script> yang diletakan di bagian atas antara tag </head> dan <body>
- Bagi 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 di bahan kali ini kita hanya menggunakan 1 modul dan 1 controller, script yang berada didalam app.js itu adalah sebuah modul yang akan kita gunakan, dan script yang berada didalam MainController.js adalah sebuah controller yang akan kita tampilkan di browser.
Bagi menampilkan hasil yang telah kita bikin di app.js dan MainController.js di script HTML nya kita pun mesti menambahkan directive ag-app bagi modul dan ng-controller bagi controller, dan “{{nama variable scope.title yang terdapat di MinController}} ”
bila dijalankan di browser karenanya hasilnya seperti dibawah ini,
Bagai mana teman teman lumayan gampang bukan
Sekianlah panduan saya kali ini mengenai Basic-Basic yang Dipelajari di Pada Angular JS Part 2
Terimakasih.
Sumber https://kursuswebsite.org
