I encountered an error when i run it on node server.js. The error says
"Refused to execute script from 'http://localhost:8888/inventoryApp.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."
index.html
<!DOCTYPE html>
<html>
<head>
<title>Inventory App</title>
<!--CSS Bootstrap CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!--Angular CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!--angular ui-router CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<!--inventoryApp module link-->
<script src="inventoryApp.js"></script>
</head>
<body>
<div class="container" ng-app="inventoryApp">
<header ng-include="'nav.html'"></header>
<h1>Dashboard</h1>
<div ng-controller="inventoryCtrl">
<!--searchItem-->
<div>
<label for="searchItemTextField">Search Item</label>
<input id="searchItemTextField" type="text" name="searchItemTextField" ng-model="searchItem">
</div>
<!--inventory table-->
<div>
<table class="table-bordered">
<tr>
<th>index#</th>
<th>Item Name</th>
<th>Quantity</th>
<th>Update Quantity</th>
<th>Quantity Alert</th>
<th>Set Quantity Alert</th>
</tr>
<tbody ng-repeat="item in inventory | filter: searchItem track by $index">
<tr>
<td>{{$index+1}}</td>
<td>{{item.itemName}}</td>
<td>{{item.quantity}}</td>
<td>
<div class="btn-group" role="group" aria-label="Basic example">
<input id="updateQuantityTextField" type="text" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="updateQuantityTextField" ng-model="newQuantity">
<button type="button" class="btn btn-secondary" ng-click="addQuantity(item, newQuantity)">Add</button>
<button type="button" class="btn btn-secondary" ng-click="deductQuantity(item, newQuantity)">Deduct</button>
<button type="button" class="btn btn-secondary" ng-click="setQuantity(item, newQuantity)">Set</button>
</div>
</td>
<td>{{item.quantityAlert}}</td>
<td>
<input id="restockQtyTextField" type="text" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="restockQtyTextField" ng-model="quantityAlert">
<button type="button" class="btn btn-secondary" ng-click="setQuantityAlert(item, quantityAlert)">Set</button>
</td>
<td><button ng-click="deleteItem(item)">Delete Item</button></td>
<td class="alert alert-danger" role="alert" ng-if="item.quantity <= item.quantityAlert">Quantity Alert!</td>
</tr>
</tbody>
</table>
<br>
</div>
<div>
<form ng-submit="addItem()">
<label for="itemName">Item Name</label>
<input id="itemName" type="text" name="itemName" ng-model="newItem.itemName" required="">
<label for="quantity">Quantity</label>
<input id="quantity" type="text" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" name="quantity" ng-model="newItem.quantity" required>
<button type="submit">Add Item</button>
</form>
</div>
</div>
</div>
</body>
</body>
</html>nav.html
<ul class="nav nav-pills pull-right">
<li ui-sref-active="active"><a ui-sref="home">Home</a></li>
<li ui-sref-active="active"><a ui-sref="about">About</a></li>
<li ui-sref-active="active"><a ui-sref="contact">Contact</a></li>
</ul>inventoryApp.js file
var inventoryApp = angular.module('inventoryApp', ['ui.router']);
inventoryApp.controller('inventoryCtrl', ['$scope', function($scope) {
var item1 = new Item("shirt", 1);
var item2 = new Item("phone", 1);
var inventory = [];
inventory.push(item1);
inventory.push(item2);
$scope.inventory = inventory;
$scope.addItem = function() {
if ($scope.newItem.itemName === undefined) {
$scope.newItem.itemName = "";
}
//trim whitespaces
$scope.newItem.itemName = $scope.newItem.itemName.replace(/^\s+/, '').replace(/\s+$/, '');
//validate quantity and itemName
if (parseInt($scope.newItem.quantity) > 0 && $scope.newItem.itemName !== "") {
//convert quantity "01 to 1"
$scope.newItem.quantity = parseInt($scope.newItem.quantity);
$scope.inventory.push($scope.newItem);
$scope.newItem = {};
} else {
alert("invalid item name");
}
};
$scope.deleteItem = function(item) {
var index = $scope.inventory.indexOf(item);
$scope.inventory.splice(index, 1);
$scope.searchItem = "";
}
$scope.addQuantity = function(item, newQuantity) {
if (newQuantity !== undefined && newQuantity !== "") {
item.quantity = parseInt(item.quantity) + parseInt(newQuantity);
this.newQuantity = "";
}
}
$scope.deductQuantity = function(item, newQuantity) {
if (newQuantity !== undefined && newQuantity !== "") {
item.quantity = parseInt(item.quantity) - parseInt(newQuantity);
this.newQuantity = "";
}
}
$scope.setQuantity = function(item, newQuantity) {
if (newQuantity !== undefined && newQuantity !== "") {
item.quantity = parseInt(newQuantity);
this.newQuantity = "";
}
}
$scope.setQuantityAlert = function(item, quantityAlert) {
if (quantityAlert !== undefined && quantityAlert !== "") {
item.quantityAlert = quantityAlert;
this.quantityAlert = "";
}
}
}]);
function Item(itemName, quantity) {
var itemName;
var quantity;
var quantityAlert = -1;
this.itemName = itemName;
this.quantity = quantity;
function getItemName() {
return this.itemName;
}
function getQuantity() {
return this.quantity;
}
function getQuantityAlert() {
return quantityAlert;
}
function setItemName(itemName) {
this.itemName = itemName;
}
function setQuantity(quantity) {
this.quantity = quantity;
}
function setQuantityAlert(quantity) {
this.quantityAlert = quantity;
}
}server.js
var express = require('express');
var app = express();
var port = 8888;
app.get('/', function(req, res, next) {
res.sendFile(__dirname + '/index.html');
});
app.listen(port, '0.0.0.0', function() {
console.log('Server running at port ' + port);
});
