Tutorial Menciptakan Route Angularjs
Route AngularJS atau dapat di sebut Ngroute AngularJs, ini yaitu metode menciptakan link halaman url menyerupai shorcut, tanpa reload melaksanakan halaman penuh. Ini merupakan kelebihan dari AngularJS. Link url tadi biasa ditandai dengan tanda # lalu nama url yang akan dituju.
Okeh, sebelum membahas ihwal cara ngroute AngularJS, lebih dahulu harus punya dasar-dasar menyerupai HTML, JavaScript dan CSS mungkin.
Ada beberapa penggunan dasar AngularJS extends di dalam tag HTML, dapat dipelajari dahulu menyerupai ng-app, ng-model, ng-bind dan lain-lain. Untuk sumber dasar berguru dapat di link w3school.
Sipakan duluh beberapa file penting, AngularJS :
- Angular.min.js dan file Angular-route.min.js
Berikut struktur folder :
 |
| Tutorial menciptakan Route AngularJS |
View merupakan beberapa file tampilan about.php, contact.php dan home.php
Custom.js merupakan file coding yang di sisipkan javascript eksternal
Index.php harus di letakan di root folder
Berikut file index.php
<!DOCTYPE html> <html lang="en"> <head> <title>Ngroute AngularJS</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> <script src="custom.js"></script> </head> <body ng-app="myApp" ng-controller="homeController"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#/about">About</a></li> <li><a href="#/contact">Contact</a></li> </ul> </div> </nav> <div ng-view></div> </body> </html>
ng-app merupakan modul yang dibentuk dengan nama myApp, ng-controller merupakan controller yang mengatur halaman yang akan di tampilkan, di sini aku buat default tampilan yaitu homeController. Dan ng-view merupakan halaman yang akan di tampilakan di tag HTML tadi.
Berikut file custom.js
var app = angular.module('myApp', ['ngRoute']); app.config(function($routeProvider) { $routeProvider .when('/', { templateUrl : 'view/home.php', controller : 'homeController' }) .when('/about', { templateUrl : 'view/about.php', controller : 'aboutController' }) .when('/contact', { templateUrl : 'view/contact.php', controller : 'contactController' }); }); app.controller('homeController', function($scope) { $scope.pesan = 'ngroute angularjs home'; }); app.controller('aboutController', function($scope) { $scope.pesan = 'ngroute angularjs about'; }); app.controller('contactController', function($scope) { $scope.pesan = 'ngroute angularjs contact'; }); Di file custom.js buat variable app dengan modul myApp, dan ngRoute untuk memanggil fungsinya. Membuat app config dengan function, serta variable $routeProvider. When merupakan kapan lokasi file tampilan url link ini untuk di panggil, untuk / merupakan default root, lalu templateUrl file dimana lokasi url link tadi dan buat controller untuk masing-masing url link.
Kemudian memanggil file controller dengan variable app dan function $cope untuk menampilkan kalimat ke file url nantinya.
<div class="container"> <h3>Basic Ngroute</h3> <p>{{pesan}}</p> </div> Pada file about.php, home.php dan contact.php untuk menampilkan kalimat dari function $cope tadi memakai expression yaitu tanda {{ }}.
Ngroute AngularJS ini dapat aku gunakan di localhost lewat xampp, dapat juga di gunakan di Node.JS. dan untuk kegagalan bisanya antara versi angular.min.js dan angular-route.min.js belum sinkron atau setara. File diatas sudah aku sesuaikan versi dan sudah tested by me.
Untuk tutorial video dapat liat di bawah :