Are you experiencing difficulty loading ng-view in AngularJs?

I am new to AngularJs. I am currently using a wamp server and have successfully loaded the HTML page, but unfortunately the view is not being displayed. I have added ng-app to the body as well, but still unable to load the view.

    <!DOCTYPE html>
<html>
<head>
    <title>AngularJs | Basic Login Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="angular-route.min.js"></script>
<!--  -->
</head>
<body>
<body ng-app="myApp">
    <div ng-view>

    </div>

<script>
    var myApp = angular.module("myApp",["ngRoute"]);

myApp.config(function($routeProvider){
    $routeProvider
    .when('/', {
        templateUrl: 'page.html'
    })
    .when('/hello',{
        templateUrl:'hello.html'
    })
    .otherwise({
        redirectTo: '/'

    });
});

</script>
</body>
</html>

Answer №1

When using the latest Angular libraries, your code functions properly (router 1.2.23 was not found, as it is outdated). You can see the working code here:

https://plnkr.co/edit/OOSHyNjIIIibeX03pVuB?p=preview

Here are the modifications I made to the code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.10/angular-route.min.js"></script>
<!--  -->
</head>
<body ng-app="myApp">

Additionally, there seems to be a duplicate body tag that should be removed.

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

Calculate the total number of blank input boxes within a specific row of the table

What is the method to count the number of input boxes without a value in a table row using jquery? For instance: <table id="table1"> <tr class="data" id="row5"> <td><input type="text" value="20%" /></td> <td><input ...

Using jQuery UI autocomplete to insert the description of the selected item into a text field

Currently, I have a functional autocomplete text box with the following code: $('#material_number').autocomplete({ source: function(request, response) { $.ajax({ url: "index.cfm?action=leadtime.getmaterialleadtime& ...

Angular is unable to detect the dynamically loaded page when using Extjs

Within my Extjs SPA system, I have integrated Angular along with the necessary modules to be used on a page that is being referred in an external HTML panel in Extjs. While Angular is defined and functioning properly everywhere else, it seems to not work ...

What is the process for adjusting the expiration time of a GitLab accessToken?

I am currently using NextAuth for logging in with GitLab, but I am encountering an issue where my accessToken changes every 2 hours. How can I ensure that it remains valid for a longer period so that I can successfully store it in my database? It's wo ...

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Similar Inquiry: jQuery check if image is loaded I find myself in a scenario where the following HTML structure is utilized: <div class="image"> <img class="" src="content-images/1.jpg"> <span class="slide" rel="content-images/ ...

Manipulating viewport settings to simulate smaller screens on a desktop device

I am working with a parent container that contains Bootstrap div.row elements holding div.col-... child elements. I am using jQuery to adjust the width and height of the container dynamically to replicate mobile device sizes for users to preview different ...

Expanding the boundary with Material-UI: Tips for stretching the margin

I am currently working on creating a navigation bar using Material UI, and the current layout can be seen in the image below. https://i.stack.imgur.com/AOy3v.png While following the template provided by MUI documentation, I encountered an issue with alig ...

Are specific names set aside for JQuery Selectors?

One time, I made a mistake with my selector: $("#cut") Unfortunately, this was not pulling the object correctly even though I had defined an object with that id in the HTML. After changing the object's id (and updating the selector), everything work ...

The $.inArray() function returns a value of false or -1, despite the fact that the variable

My goal is to verify that my currentMedia variable (which exists in the DOM) can be located within my array media, and then return the index i, which should be 0 instead of -1. When I execute console.log(media[0]); and console.log(currentMedia);, the outc ...

Does Three.js come with a default function for generating heightmaps?

Currently, I am engrossed in developing a JavaScript game using Three.js. My interest lies in enhancing the realism of the walls by incorporating a height map (refer to the provided image). View this snapshot of the game design featuring a 2D wall. All th ...

Splitting with Regex - One Time Operation

Here is some of my Jquery code along with Regex: $("[class^=ipsum-img],[class^=ipsum-img-]").each(function(){ var x = $(this).attr("class"); console.log(x.length); if (x.length>8) { var m = x.split(/(\d+)[^-]*$/g); cons ...

A guide to showcasing data within PrimeNG's pie chart component using either JavaScript or Angular

I have utilized the pie chart feature from the PRIMENG CHART PLUGIN My goal is to showcase the values within a pie chart Below, you can find my code for reference **Within app.component.html** <div style="display: block"> <p-chart type="pi ...

Customizing data from AJAX responses

Using PHP, I am receiving data as an object and passing it through a mustache template to create a table. My inquiry is about controlling the row breaks for my data. Is there a way to insert a <tr> after every 3 <td> without using JavaScript? ...

The function for executing the specific command is not recognized and is resulting in a TypeError: client.commands

I'm having an issue with the code below and need a solution. Please help. Error : TypeError: client.commands.get(…).execute is not a function I am encountering difficulty with this specific command in my code: client.command ...

How does Socket.io facilitate a basic web socket connection with a specific URL?

My current project involves a client making a WebSocket request to the following URL: ws://localhost:3000/feed/XBTMUR https://i.sstatic.net/R7H9T.png On my server side, I am utilizing NodeJs with express running. I have decided to implement Socket.io in ...

Tips for tallying the number of records in a data table

I'm struggling to find a solution for counting my data in the table and applying a condition. Despite trying to use the JavaScript function length, I couldn't get it to work. I also attempted using size(), but encountered errors in the web conso ...

How can preselect values/options in Angular UI's select2 multiple feature?

How do I use angular-ui with select2 like this: <select ui-select2 ng-model="search.categories" multiple style="width:300px" data-placeholder="select category"> <option value="open" >open</option> <option value="close" > ...

using JavaScript to send numerous text box values to various views

I have a dilemma with passing values between two views. In View1, there are text boxes for entering basic information. After the customer enters this data and clicks on 'add more details', I want to transfer these details to the text boxes in Vie ...

Updating a MySQL database using jQuery and PHP

I am currently working on updating a database entry using jQuery and AJAX. I have verified that the values being sent over are correct, but I am facing issues in identifying why the database is not getting updated. Below is the code snippet I am using: $ ...

The Vue.JS application encountered an error while making an API request, resulting in an uncaught TypeError: Cannot read properties of undefined related to the 'quote'

<template> <article class="message is-warning"> <div class="message-header"> <span>Code Examples</span> </div> <div class="message-body"> ...