JavaScript - Simple Route Configuration

Submitted by razormist on Wednesday, January 9, 2019 - 08:18.

In this tutorial we will create a Simple Route Configuration using AngularJS. AngularJS is a structural framework for dynamic web apps. It is a kind of template that extends HTML to a new level of coding techniques. It is mostly used by other well known site for creating a template.

Getting started:

First you will need to download & install the AngularJS here's the link https://angularjs.org/. And download & install XAMPP or any local server that run PHP scripts. Here's the link for XAMPP server https://www.apachefriends.org/index.html. Note: To make the angular-route.js work make sure you are running this application to any local server like xamp, etc..

Creating the Main Interface

This code contains the interface of the application. This code will render application and display the form. To do that just kindly write these block of code inside the text editor and save this as shown below. index.html

<!DOCTYPE html>
<html ng-app="app">
        <head>
                <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
                <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
        </head>
<body>
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                        <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class="col-md-3"></div>
        <div class="col-md-6 well">
                <h3 class="text-primary">JavaScript - Simple Route Configuration</h3>
                <hr style="border-top:1px dotted #ccc;"/>
                <ul class="nav nav-pills">
                        <li><a href="#!">Home</a></li>
                        <li><a href="#!about">About us</a></li>
                        <li><a href="#!subject">Subject</a></li>
                </ul>
        
                <hr style="border-top:1px solid #ccc;"/>
                <ng-view></ng-view>
        </div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/script.js"></script>
</body>
</html>

home.html

<h1>Home</h1>

subject.html

<h1>Subject</h1>

about.html

<h1>About us</h1>

Creating the Script

This code contains the main function of the application. This code will create a path that handle the web pages using angular-route.js. To that just kindly copy and write these block of codes inside the text editor, then save it as script.js.

var app = angular.module('app', ['ngRoute']);
 
        app.config(function($routeProvider){
                $routeProvider
                .when('/', {
                        templateUrl: 'home.html'
                })
                .when('/about', {
                        templateUrl: 'about.html'
                })
                .when('/subject', {
                        templateUrl: 'subject.html'
                })
        });

There you have it we successfully created a Simple Route Configuration using AngularJS. I hope that this very simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

Add new comment

37 views