The ng-view directive appears to be missing in the AngularJS framework

I am attempting to create a route using AngularJS, but when I launch my application, the ng-view does not display anything. I am new to AngularJS.

index :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CRUD</title>
</head>
<body ng-App="myAPP">
  <a href='#/'/>List</a>
  <a href='#/addData'/>Add Data</a>

  <div>
    <div ng-view></div>
  </div>

  <script src="js/angular.js"></script>
  <script src="js/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="controller/controller.js"></script>
</body>
</html>

app.js :

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

route.js :

app.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/',{
        templateURL : 'crud/pages/list.html',
        controller : 'controller'
    })
    .when('/addData',{
        templateURL : 'crud/pages/coba.html',
        controller : 'controller'
    })
    .otherwise({
        redirectTo : '/'
    })
}])

Answer №1

Make sure to close the js/angular-route.js tag properly

  <script src="js/angular.js"></script>
  <script src="js/angular-route.js"></script>
  <script src="js/app.js"></script>

Check out the DEMO

Answer №2

There seems to be a small typo in your code - it should be "templateUrl" instead of "templateURL". Other than that, everything looks good.

Also, don't forget to close the brackets with <script></script>.

Just a reminder: templateURL should be written as templateUrl.

Answer №3

To ensure your scripts run smoothly, it is advisable to place all script tags within the head tag and remember to close each one properly.

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

Tips on how to send Mongoose response variable in NodeJS Express router res.render?

I just finished setting up a basic Express NodeJS server. My goal is to save the value of the setting returned from mongoose.find() as a variable in res.render, but every time I try, it throws an error saying Cannot read property of undefined. Here' ...

Validation with Javascript can trigger the display of a hidden element

Hello there, I could really use some assistance with the JavaScript part of this code. I have two JavaScript functions: one for validating if a radio checkbox is selected, and another for revealing the "answer". Currently, an alert pops up if no selections ...

Tips for setting React state using variables as keys or values

Although I managed to achieve the desired result, I'm still puzzled as to why my more straightforward approaches didn't work. Can someone help me understand what's going on here? Basically, I needed to set nested state at different levels u ...

Sending an array through an AJAX request to a Java class using Struts2

Issue with Javascript-AJAX Call function assignTask(){ var formdata = "xyz"; var taskList = []; $.each($("input[name='taskname']:checked"), function(){ taskList.push($(this).val()); }); $.ajax({ type: "post", data: {taskList:taskList ...

divide an array into two separate arrays depending on whether the index position is odd or even

Here is an example array: Arr1 = [1,1,2,2,3,8,4,6]. I'm trying to divide this array into two new arrays based on the odd or even position of elements. Can anyone provide a solution? New Array 1 (odd positions): [1,2,3,4] New Array 2 (even positions) ...

Attempting to make initials fade and slide out upon mouseover using jQuery

I've been experimenting with jQuery to create a unique effect where hovering over my initials in the header expands the containing div and reveals my full name letter by letter. However, I'm facing some challenges and could use some guidance on t ...

Guide to Updating Store State with API Data

My goal is to update my component state with data retrieved from an API using a getter in the store. Within the mounted() lifecycle hook, I call the getProducts() getter which is defined as: export const getters = { async getProducts() { axios.ge ...

tips for extracting data from a json array

Hello everyone, I have a question that I could use some help with. I have a set of data that looks like this: var data = { "values":[[1,2,3],[2,4,3],[3,6,7],[1,4],[6,4,3,4],[6,7,3,5]] } Currently, I am trying to create a multiple line chart usi ...

Exploring the possibility of designing custom pageload tooltips inspired by jQuery validationEngine's visual style and interface

My website incorporates the jQuery.validationEngine plugin to ensure the accuracy of user input. The tooltips that accompany this validation feature are particularly appealing; they gracefully fade in and vanish when users interact with them. To visualize ...

Gulp encountered an issue - Module 'sigmund' not found

After installing browser-sync, my previously working Gulp encountered an error: Error: Cannot find module 'lru-cache' To resolve this issue, I utilized the following solution: npm link lru-cache as suggested in this thread However, upon atte ...

What could be causing the absence of the ID definition?

Whenever I send a DELETE request, I receive an error message stating ReferenceError: id is not defined at Object.removeOne (...\services\user.js:16:38. I am unsure about the role of 'id' in \services\user.js and why it is not ...

"Troubleshooting Issue: JavaScript and jQuery onClick Event Not Functioning Properly

Whenever I try to click on the "php1" div, nothing happens. The location.reload() function is only a placeholder used for testing if the onClick event is functioning properly. <div class="php-task"> <h1>PHP</h1> ...

Is it possible to utilize a JS script generated within the body or head of an HTML file directly within CSS code?

As a beginner in webpage development, I have a query regarding the technical aspect. Is it possible to utilize variables from a JavaScript function, which is placed either in the head or body of an HTML file, directly in CSS code to make modifications such ...

- The click function is failing to work after an ajax call [Potential event delegation problem]

I have a webpage where I update the contents of an unordered list using $.get() every 5 seconds. The issue I am facing is that the click function for the list items is not working properly. Even though the list items are being updated correctly, there se ...

Node server quickly sends a response to an asynchronous client request

Apologies for my lack of writing skills when I first wake up, let me make some revisions. I am utilizing expressjs with passportjs (local strategy) to handle my server and connect-busboy for file uploads. I believe passport will not have a role in this pr ...

Why is the value of the select element in AngularJS an object?

Here is a JSON object: { "9000A": { "LOCname":"A Place", "LOCid":"9000A" }, "2700C": { "LOCname":"C Place", "LOCid":"2700C" }, "7600B": { "LOCname":"B Place", "LOCid":"7600B" } } To ...

Inserting data into a JavaScript database

When attempting to add a new row to a datatable and submit it to a JSP for database insertion, an error is encountered. The error message reads: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the r ...

Tips for sending routeparams value to model window in AngularJS

In the current project, I am working on implementing a modal window for the edit screen functionality. The process involves displaying a list of items on the screen, from which users can select one row and then click on the modify button to open the edit s ...

Can one showcase a php content using an ajax event?

I’m having trouble asking the right question because I’m not sure what I’m doing. I have a form that includes a default PHP script that creates three different lines: <form method="GET" name="NewDeliveryNote" action="ItemPosts_INSERT.php"> < ...

What are the steps to resolving an issue with importing a css file in next.js?

Error: ./node_modules/quill-emoji/dist/quill-emoji.css ModuleParseError: Module parse failed: Unexpected character '�' (1:0) You may need a suitable loader for handling this file type, as there are currently no configured loaders to process it. ...