unable to import angular js script into ejs template

Having trouble including a JavaScript file in my EJS page while using the Express.js framework.

//Below is the code for my index.ejs page

<!DOCTYPE html>
<html>
 <head>
  <script type='text/javascript' src= "order.js"></script>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
 </head>
<body ng-app="myApp" ng-controller="orderCtrl">
 <div class="container">

   <table class="table table-striped">
    <thead><tr>
      <th>Item Name</th>
      <th>Price</th>
    </tr></thead>
    <tbody><tr ng-repeat="user in users">
      <td>{{ user.fName }}</td>
      <td>{{ user.lName }}</td>
    </tr></tbody>
   </table>
 </div>

 </body>

 </html>

//And here is my JavaScript page, order.js which should connect to index.ejs

var app = angular.module('myApp', []);
 angular.module('myApp', []).controller('orderCtrl', function($scope) {
  $scope.message = 'Hello World!';  
   $scope.fName = '';
    $scope.lName = '';
    $scope.passw1 = '';
    $scope.passw2 = '';
    $scope.users = [
    { fName:'Hege',lName:"Pege" },
    { fName:'Kim',lName:"Pim" },
    { fName:'Sal',lName:"Smith" },
    { fName:'Jack',lName:"Jones" },
    { fName:'John',lName:"Doe" },
    { fName:'Peter',lName:"Pan" }
    ];
 })

Struggling to display the data with {{ user.fName }}. Any assistance would be appreciated.

Answer №1

To incorporate Angular into your HTML, place the following script tag within the head section:

<script type='text/javascript' src= "anularpath/angular.js"></script>

If you do not have the Angular file locally, you can use the Angular CDN by including this in your head section:

<head>
   <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
   <title><%= title %></title>
   <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

Make sure to move the script tag for your order.js file to the bottom of the body section before closing the body tag like this:

    <script type='text/javascript' src= "order.js"></script>
  </body>
</html>

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

Dealing with unhandled exceptions while passing promises into pg-promise batch transactions

Currently, I am diving into the realm of learning express and pg promise. However, during this journey, I have encountered a puzzling issue that I suspect stems from my somewhat shaky understanding of promises. Essentially, I have crafted some functions f ...

What is the best method to assign a property to a model within AngularJS by utilizing an attribute parameter?

I am in the process of creating a custom directive in AngularJS for a UI slider that can be used multiple times. Each slider should be able to bind to a specific property. My idea was to use an attribute called "property" which would automatically update w ...

Having trouble with Javascript files failing to load while hosting a website on digital ocean?

Recently, I developed a web application using an express backend and the ejs view engine. Everything works perfectly fine when tested on my local machine. However, I encountered issues when trying to host it on a digitalocean droplet (Ubuntu 22.10 x64). Af ...

Refresh the page with cleared cache using window.location.reload

Is there a way to reload a page using JavaScript and still clear the cache, ensuring that the refreshed page shows the latest content from the server? It seems that other browsers are not displaying the most up-to-date versions of the content. Anyone have ...

What steps are necessary to activate javascript in HTML for WebView?

I recently discovered that when my HTML/JavaScript site is visited via an Android webview, JavaScript is disabled by default. This causes a pricing list on my page to not display properly because it requires a JavaScript class to be added for it to open. I ...

Multiple card displays not working with Javascript Fetch API

I wrote a script that retrieves data from a URL and then organizes it into tables for display to the user. Initially, the script functioned correctly. However, I decided to enhance its flexibility by introducing two parameters - name and HTML div name wher ...

Retrieve all items pertaining to a specific week in the calendar

I'm trying to obtain a list of week ranges for all data in my MongoDB. When a week range is clicked, only the records for that specific week range should be displayed. By clicking on the week range, the ID of the week (let's say 42, representing ...

Having issues passing parameters with Ajax, Python Bottle, Jquery, and JSON collaboration

Every time I make an AJAX request POST, the newUser() function seems to be ignoring any arguments being passed even though I have filled out both userInput and passInput fields. Here's the JS/JQ/AJAX code snippet: var userInput = document ...

What is the best way to show input choices once an option has been chosen from the 'select class' dropdown menu?

When it comes to displaying different options based on user selection, the following HTML code is what I've been using: <select class="form-control input-lg" style="text-align:center"> <option value="type">-- Select a Type --</opti ...

Unexpected Disconnection of AJAX Response Moments Before Rebooting the Raspberry Pi

I currently have a LAMP server set up on my Raspberry Pi 4, where a web page is utilizing an AJAX call to trigger a php script that initiates a reboot of the pi. The php script echoes a JSON string response back to the web page indicating that it is prepar ...

Looking to convert files like text or images into binary format using Node.js?

I'm struggling to find a solution for converting any type of file (text, image, etc) into binary format using Node. Can anyone provide some guidance on how to accomplish this task? ...

Having trouble retrieving JSON response from URL with javascript

I've been struggling to retrieve a JSON response from the Kraken API for currency conversion. Despite trying various methods, including those from sources like cryptonator and Yahoo, I haven't had any success with Kraken's API. The URL appea ...

Is it possible to alter the video dynamically according to the state in Vuex?

I am working on a small web application that mimics the appearance of FaceTime. My goal is to switch between video elements by clicking a "Next" button, which will update a value in Vuex and swap out the video accordingly. I initially attempted this appr ...

How can I generate a dummy JSON response using Backbone Fetch?

Exploring Backbone and looking for a way to simulate the response of a .fetch() call within a model without using a testing library or connecting to an external service. If the setting in the model is this.options.mock === true, I'd like to use an in ...

Combine the promises from multiple Promise.all calls by chaining them together using the array returned from

I've embarked on creating my very own blogging platform using node. The code I currently have in place performs the following tasks: It scans through various folders to read `.md` files, where each folder corresponds to a top-level category. The dat ...

Can one integrate another logic component into a "@hapi/joi" schema object?

const Joi = require('@hapi/joi'); function validateInput(input)({ const schema = Joi.object({ username: Joi.string().alphanum().min(3).max(30).required(), numApples: Joi.number().min(1).max(5).required(), numOranges: ...

Avoid inputting characters and triggering a new event

I am facing an issue with capturing the "keydown" event and then changing the focus to the last active element. Whenever I try to set the focus to a specific element within the function that captures the event, either the "input" element receives a "char" ...

Is There a Way to Abandon a route and Exit in Express during a single request?

In order to ensure proper access control for the application I was developing, I structured my routing system to cascade down based on user permissions. While this approach made sense from a logical standpoint, I encountered difficulties in implementing it ...

Discovering the clicked button in a partial view during an onSuccess Ajax call

Within my partial view, I have implemented two buttons: Save and Preview. Both buttons are functioning as expected, with Preview enabling widget preview and Save saving data to the database. However, I am encountering two issues: I am unable to determine ...

Efficiently Extracting Information from JSON Objects

Currently, I am in the process of parsing a JSON file. Let's assume that the JSON data looks like this: {"data" : [ {"ID":12, country: "UK"}, {"ID":13, country: "USA"}, {"ID":14, country: "BRA"}, ]} Instead of just having three entries as show ...