Home Article tutorial Tutorial Dekstop

Tutorial menciptakan Route AngularJS

8:00 AM
A+ A- Print Email
Route AngularJS atau mampu di sebut Ngroute AngularJs, ini yaitu metode menciptakan link halaman url seolah-olah 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 tentang Cara ngroute AngularJS, lebih dahulu harus punya dasar-dasar seakan-akan HTML, JavaScript dan CSS mungkin.

Ada beberapa penggunan dasar AngularJS extends di dalam tag HTML, mampu dipelajari dahulu seolah-olah ng-app, ng-model, ng-bind dan lain-lain. Untuk sumber dasar mencar ilmu mampu di link w3school.
Sipakan duluh beberapa file penting, AngularJS :
Untuk tampilan aku memakai Bootstrap saja biar lebih simple dan cepat :
Berikut struktur folder :
 
Tutorial membuat Route AngularJS
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 dibuat dengan nama myApp, ng-controller merupakan controller yang mengatur halaman yang akan di tampilkan, di sini saya 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. menciptakan app config dengan function, serta variable $routeProvider. When merupakan kapan lokasi file tampilan url link ini untuk di panggil, untuk / merupakan default root, kemudian 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 mampu saya gunakan di localhost lewat xampp, mampu juga di gunakan di Node.JS. dan untuk kegagalan mampunya 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 mampu liat di bawah :

, ,