Issues with the functionality of AngularJS router implementation

I have searched through various resources like Stack Overflow and other blogs, but unfortunately, I haven't been able to fix the routing issue in my AngularJS code. Although there are no error messages, the routing functionality doesn't seem to be working at all. Can anyone offer some guidance on how to resolve this problem? You can find the main index.html file below:

<!DOCTYPE html>

<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>

<body data-ng-app="sampleApp">
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <ul class="nav">
                <li><a href="#AddNewOrder"> Add New Order </a></li>
                <li><a href="#ShowOrders"> Show Order </a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div data-ng-view></div>
        </div>
    </div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>

For those interested, you can access the complete code on Plunker here.

Your assistance in resolving this issue would be highly appreciated.

Thank you, Smitha

Answer №1

The issue with the Plunker is due to the absence of angular-route.js. Additionally, it seems that you have overlooked adding the angular dependency - ngRoute.

var sampleApp = angular.module('sampleApp', ['ngRoute']);

This official tutorial provides guidance on using the router https://docs.angularjs.org/tutorial/step_07

I have made some updates to your Plunker to address these issues and now it works properly.

http://plnkr.co/edit/BBG3XH3akxfAKMzjT71E?p=preview

The main problem was a version mismatch - Angular uploaded as 1.3.x, angular-route as 1.2.x, and linked angular in html as 1.0.7.

I have corrected this by using CDN for version 1.3.3.

Another issue was incorrect links to templates - even if they worked locally, Plunker does not support the use of "/" at the beginning of template names.

I have also updated the links to start with "#" in ng-href.

These changes should resolve the issues you were facing.

Answer №2

Make sure to remove the forward slash / from the templateUrl attribute.

sampleApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/AddNewOrder', {
    templateUrl : 'add_order.html',
    controller : 'AddOrderController'
}).when('/ShowOrders', {
    templateUrl : 'show_orders.html',
    controller : 'ShowOrdersController'
}).otherwise({
    redirectTo : '/AddNewOrder'
});

} ];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to testing window.pageYoffset in webdriverIO using chai assertions

When conducting a selenium test using WebDriverIO and Chai, I encountered the need to capture the position of window.pageYoffset. Unfortunately, I was unable to find a direct way to do this in WebDriverIO. My initial attempts involved: browser.scroll(0, 2 ...

Angular - Dividing Functionality into Multiple Modules

I am currently working with two separate modules that have completely different designs. To integrate these modules, I decided to create a new module called "accounts". However, when I include the line import { AppComponent as Account_AppComponent} from &a ...

Sending information to a single component among several

I'm developing a custom DownloadButton component in VueJS that features an animation when clicked and stops animating once the download is complete. The DownloadButton will be utilized within a table where it's replicated multiple times. I intend ...

Error: The function exec in matchExpr[type] is not defined

I made some changes to Object.prototype and now I'm running into errors with jQuery's methods on selectors. The error message I'm getting is: Uncaught TypeError: matchExpr[type].exec is not a function Additionally, when trying to use $.po ...

Personalized FullCalendar header title

Is there a way to display a unique header title for each calendar in my collection of 16? I've been trying various modifications to the code snippet below with no success: firstDay: <?php echo $iFirstDay; ?>, header: { left: 'prev,next ...

Ways to access information from doc.data()

<template> <div> {{ id }} {{ title }} </div> </template> <script> import { useRoute } from 'vue-router' import 'firebase/firebase-firestore' import { db } from '@/fdb' export default ...

Having trouble with your custom AngularJS directive not functioning correctly?

I am facing an issue with my custom directive implementation. I have a custom directive that contains a table which references a controller. The ProjectController part works fine when it is not included in the code, but as soon as I put everything into the ...

DreamFactory's REST API POST request for rest/user/session consistently encounters errors in Internet Explorer 9

In Firefox, Chrome, and Safari, the initial POST rest/user/session request works perfectly fine. However, in Internet Explorer 9, it consistently returns an error. When the dataType is specified as "json," IE9 encounters a 'no transport' error w ...

Make simultaneous edits to multiple cells in IGX GRID for Angular

Is it feasible to edit multiple cells in the same column simultaneously within igx grid Angular? I would like for the changes made within each cell to be displayed at the same time. Editing many cells all at once is a valuable feature! ...

How to deactivate the <a> tag with Ant Design UI Library

Is there a method in the antd UI library to disable a link? The disabled attribute is not supported by the a tag according to MDN. This code snippet works in React but the link remains clickable when using Next.js. <Tooltip title={tooltip}> <a ...

Node.js encountered an error: TypeError - req.end does not have a function

Encountering an error stating that req.end is not a function, even though it works elsewhere in the code. Upon researching, some sources suggest that the global req variable might have been misplaced or lost. However, I haven't used any other variabl ...

I'm experiencing some strange symbols on my page that look like ''. It appears to be a problem occurring between the servlet and the Javascript. How can I resolve this issue?

After retrieving a CSV file from my servlet, I noticed that characters like 'é', 'á' or 'õ' are not displaying properly on my page. Strangely, when I access the servlet directly via browser, everything appears fine. I atte ...

Puppeteer exhibiting unexpected behavior compared to the Developer Console

My goal is to extract the title of the page using Puppeteer from the following URL: Here's the code snippet I am working with: (async () => { const browser = await puppet.launch({ headless: true }); const page = a ...

Utilizing the Power of Mui Datatable to Enhance User Experience with Repeatable Edit and Delete

Hey Everyone, I'm currently trying to implement edit and delete buttons in ReactJS using Mui Datatable. However, I am facing a recurring issue due to the Map function since I am relatively new to ReactJS. Below is my image and code snippet: Here is a ...

How can I incorporate the "onClick()" function within an ajax call, while still utilizing the data returned in the success message?

After successfully making an Ajax call, I would like to implement an on-click function while still utilizing the original data retrieved. $.ajax({ URL: ......, type: 'GET', success: function (res) { var Ob ...

Submitting an array using AngularJS after converting it to a JSON string

I need to send 3 parameters to my PHP web service using the POST method. One of these parameters is an array, so I decided to use JSON.stringify() to convert it into a string before adding it as a parameter. However, the issue is that PHP is not receiving ...

Unable to utilize ES6 syntax for injecting a service

I am encountering some issues while trying to implement a service into a controller using ES6 syntax. CategoriesService.js export default class CategoriesService { constructor() { this.getCategories = function ($q) { var deferred ...

Unexpected Issue Encountered in JQuery Integration

I recently added jQuery to my HTML file: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> After that, I included a link to my JavaScript file: <script src="public/javascripts/new_javascript.js" type ...

Guide to resolving a blank webpage issue post running 'npm run build'

I am currently in the process of working on a project that involves Vue and Firebase. Unfortunately, I have encountered an issue where my development server is no longer rendering new routes from my Vue router after building and deploying to production. F ...

The PHP table fails to show up on the screen

I've implemented a PHP script that connects to a MySQL database and is supposed to generate an HTML table. To achieve real-time updates, I've set up a long-polling AJAX script that polls the PHP script every second. Although everything seems to b ...