CODEWITHSUNDEEP
javascripthtmlangularjsnode.js
Ryan
Ryan

Reputation: 262

Express.js application trying to use angular: Uncaught Error: [$injector:nomod] and Uncaught Error: [$injector:modulerr]

It's been a little while since I set up a web-app to run with Angular. I was retracing my steps through an old project (trying to implement a controller on the page I'm doing, making sure the controller file was set up properly, etc), and everything on my new project matched up with how my old project was set up.

However when I load the page I'm trying to use, there are 2 errors coming up and my GET call to my express server won't fire when I press the button. These errors are:

angular.js:38 Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.6/$injector/nomod?p0=eagledreamApp
    at angular.js:38
    at angular.js:2101
    at b (angular.js:2025)
    at Object.module (angular.js:2099)
    at mainpageController.js:1
    (anonymous) @ angular.js:38
    (anonymous) @ angular.js:2101
    b @ angular.js:2025
    (anonymous) @ angular.js:2099
    (anonymous) @ mainpageController.js:1
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=eagledreamApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.6%2F%24injector%2Fnomod%3Fp0%3DeagledreamApp%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A6%3A412%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A25%3A235%0A%20%20%20%20at%20b%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A24%3A282)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A25%3A20%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A39%3A374%0A%20%20%20%20at%20q%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A7%3A355)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A39%3A222)%0A%20%20%20%20at%20db%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A43%3A246)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A21%3A19)%0A%20%20%20%20at%20Ac%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A21%3A332)
    at angular.js:38
    at angular.js:4630
    at q (angular.js:322)
    at g (angular.js:4591)
    at db (angular.js:4513)
    at c (angular.js:1777)
    at Ac (angular.js:1798)
    at fe (angular.js:1683)
    at angular.js:31018
    at HTMLDocument.b (angular.js:3197)

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="mainpageStyles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="mainpageController.js"></script>
</head>
<body ng-app="xyzApp" ng-controller="mainpageController">
    <div id="search">
        <button type="button" class="searchButton" ng-click="buttonpress()">Search</button>
    </div>
</body>
</html>

Controller:

angular.module('xyzApp').controller('mainpageController', ['$scope', '$http', function($scope, $http){
    $scope.buttonpress = function() {
        $http.get('/buttonpress')
        .then(function(response) {
            alert(response);
        });
    };
}]);

server.js (runs when I use npm server.js on the command line)

var express = require('express');
var app = express();
var fs = require('fs');
app.use(express.static(__dirname + '/Source'));
app.listen(3000, function() {
    console.log("Launch successful. To access app, open your browser and insert the following URL into your address bar: http://localhost:3000/");
});
app.get('/', function (req, res) {
    console.log("Loading Home Page...");
    res.sendFile('/Source/mainpage.html', {root: __dirname });
});
app.get('/buttonpress', function (req, res) {
    res.send("Hello World");
})

and app.js 

angular.module('xyzApp');

(I'm not exactly sure why I have to have this separate file, but it's the way I got my other project to work and that project had it's own app file but the line was angular.module('abcApp', ['ngSanitize']); and I don't think I could get the project to work properly without that app.js file.

Upvotes: 1

Views: 58

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222682

Change your app.js

From

angular.module('eagledreamApp');

to

angular.module('xyzApp',[]);

also refer app.js in the index file

<head>
    <link rel="stylesheet" href="mainpageStyles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="mainpageController.js"></script>
</head>

Upvotes: 1

Related Questions