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

What is causing the ajax code to malfunction?

I am new to ASP MVC and trying to create a login form using AJAX. I have written a JsonResult in the controller to check the username and password, but for some reason it is not working. Here is my controller code: public ActionResult login() { ...

I pressed the button but the globalCompositeOperation isn't working as expected. How can I make it function correctly to achieve the desired output like the second canvas?

<!DOCTYPE html> <html> <head> <title>Canvas Compositing Tutorial</title> </head> <body> <canvas id="myCanvas" width="200" height="200" style="border: 1px solid"></canvas> <br> <butt ...

Complete guide to Angular currency handling

How can I display a full currency value using Angular.js? <input class="receiptFrom" type="text" ng-model="receiptFrom"></input> <label>{{ receiptValue | currency }}</label> Currently, when I input 1000, it prints as $1,000.00. ...

Transform HTML content into a PDF document with page breaks

Currently, I am developing a function that involves an HTML template. The purpose of this function is to generate a dynamic template and convert it into a PDF. So far, I have been able to achieve this using the following code: var output = ''; ...

Utilizing Angularjs and Symfony2 for Video Uploads

When incorporating AngularJS and Symfony2 with a MongoDB database, what is the optimal method for uploading videos? Is it more efficient to upload directly to the database or store them as application files? ...

Tips to prevent the @click event from firing on a specific child component

When I click on any v-card, it redirects me to a different link. However, if I click on the title "World of the Day", I don't want anything to happen. How can I prevent being redirected when clicking on the title? template> <v-card clas ...

Is there a way to reset the dynamic flexslider when a click event occurs?

Seeking a way to refresh the flexslider on a click event. I have embedded the flexslider in a Bootstrap pop-up and need it to update when the user clicks. The issue arises when I try to refresh the slider as it fails to display properly, likely due to losi ...

Include a new route in the Vue.js router dynamically during runtime

I am in the process of developing an application and I want to incorporate extensions into it. These extensions will have their own Vue components, views, and routes. Instead of rebuilding the entire app, I am looking for a way to dynamically add these new ...

Create dynamic automatic titles in HTML with JavaScript

Below is the code snippet to add an image with a link to the home-page and an h1 with the document name (if there isn't one already). This HTML code includes a JavaScript file reference in the <head> section and uses a <h1> tag for the ti ...

Looking for a solution to toggle the visibility of a div based on whether search results are found or not using JavaScript

Running this code <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Searc ...

AngularJS Large file size

After successfully building the 5 MIN QUICKSTART app, I decided to minify it with webpack following the recommendations in the angularJS docs. To my surprise, the size of the minified AngularJS file turned out to be approximately 700 KB, which is significa ...

Unexpected behavior in AJAX call

I'm currently working on implementing an AJAX call to display a partial view once a radio button is selected. Despite following the recommendations found on Stack Overflow comments, I am encountering difficulties. Upon selecting the radio button, ther ...

Is it possible for an ul to be displayed beneath a white section within an li

I am working on a JQuery carousel that is displaying correctly, but I want to make a small adjustment to the content: <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="float: left; list-style: none ...

jQuery Counter Effect encountering isNaN error when trying to display a number retrieved from a get API object

I am looking to display the numerical data retrieved from an API using JSON. I want to incorporate a counter effect that displays "isNaN" if necessary. The API URL returns an object with the total number saved in data.data. Can anyone assist me with achi ...

Guide on submitting a form through the Angular 2 HTTP post method with JavaScript

Currently working on grasping the concepts of Angular2, but facing challenges when attempting to utilize http.post() for submitting a form to my Web API. ...

Error: Unable to assign the 'schedule' property to a null value

I'm currently developing a scheduling application using React.js and have implemented a draggable scheduling feature for users to indicate their availability. Everything seems to be working smoothly, except for one pesky error message: TypeError: Cann ...

What causes certain images to have unspecified height and width measurements?

Currently, I am in the process of extracting image sizes from a website using a module called scraperjs. Most images have their height and width attributes defined, but some do not, resulting in the returned value being "undefined". How can I retrieve the ...

Can you explain the functionality of isolate scope in angularjs?

I'm having trouble grasping the concept of scope : {}. Here's a snippet of code I've been working on. Why does it always display "strength" in the console instead of the actual array value? // Code goes here var app = angular.module("super ...

Customize Your Calendar: A Guide to Disabling Dates with Pikaday.js

Wondering how to disable specific days on a calendar? Look no further! Here's a solution using the `disableDayFn` option from Github: disableDayFn: callback function that gets passed a Date object for each day in view. Should return true to disable s ...

Babel had trouble transpiling due to an unexpected token while working with Bootstrap 4 and Codekit

Currently attempting to minify and transpile Bootstrap 4 using CodeKit3. However, encountering the following error: Babel: Failed to Transpile: SyntaxError: /bootstrap/carousel.js: Unexpected token (219:8) 217 | _getConfig(config) { 218 | ...