AngularJS - Failed to instantiate module when passing parameters in url - angularjs

Question

I have the following URL defined in my routes.js file:
app.get('/animal/:id', function(req, res, next) {
res.sendfile('./public/views/animal.html')
});
This is app.js:
var app = angular.module('adote', ['ngCookies', 'ngResource', 'ngRoute', 'ngAnimate', 'flow', 'ngTagsInput', 'ngSanitize', 'mgcrea.ngStrap'])
app.config(function($locationProvider, $routeProvider, $httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
})
This is the link for index.html (there's not much here): https://gist.github.com/larissaleite/6280ca1bcd9886e7b253
This is where I do all the configuration on my application:
app.use(cookieParser('appsecret'));
app.use(session({ secret: 'appsecret', saveUninitialized: true, cookie: { secure: true, maxAge: new Date(Date.now() + 3600000) } }));
// configuration ===============================================================
var db = mongoose.connect('mongodb://127.0.0.1:27017/Routing');
// connect to mongoDB database
mongoose.connection.once('connected', function(error){
if (error) {
console.log("Error: " + error);
} else {
console.log("Connected to the database");
}
});
app.use(express.static(__dirname + '/public')); // set the static files location /public/img will be /img for users
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());
app.use(passport.initialize());
app.use(passport.session());
app.use(flash());
require('./app/routes.js')(app, passport);
This is routes.js complete:
var Animal = require('./models/animal');
var User = require('./models/user');
module.exports = function(app, passport) {
require('../config/passport')(passport); // pass passport for configuration
app.get('/home', function(req, res, next) {
console.log(req.isAuthenticated());
res.sendfile('./public/views/home.html');
});
app.get('/cadastro', function(req, res, next) {
res.sendfile('./public/views/cadastro.html');
});
app.get('/animal/:id', function(req, res, next) {
res.sendfile('./public/views/animal.html')
});
app.get('/api/animals', function(req, res, next) {
console.log("GET - api/animals");
Animal.find({}, function(err, animals) {
if (err) {
console.log("erro");
res.send(err);
}
if (!animals.length) {
res.send("not found");
} else {
res.json(animals);
}
});
});
app.get('/api/animal/:id', function(req, res, next) {
//changed from query to params after removing angularjs routing
console.log("GET - api/animal/id = "+req.params.id);
Animal.findById(req.params.id, function(err, animal) {
if (err) {
console.log("erro");
res.send(err);
} else {
res.json(animal);
}
});
});
app.post('/api/animal', function(req, res, next) {
console.log("POST - api/animal");
console.log(req.body.tags);
//console.log(req.body.localizacoes);
var animal = new Animal({
nome: req.body.nome,
tipo: req.body.tipo,
tags: req.body.tags,
localizacoes: req.body.localizacoes,
descricao: req.body.descricao,
usuario_nome: "Maria Joaquina",
eventos: req.body.eventos
});
animal.save(function(err) {
if (err)
res.send(err);
res.send("success");
});
});
// =====================================
// FACEBOOK ROUTES =====================
// =====================================
// route for facebook authentication and login
app.get('/auth/facebook', passport.authenticate('facebook', { scope : 'email' }));
// handle the callback after facebook has authenticated the user
app.get('/auth/facebook/callback',
passport.authenticate('facebook', {
successRedirect : '/home',
failureRedirect : '/login'
}));
// route for logging out
app.get('/logout', function(req, res) {
console.log("logout");
req.session.regenerate(function(){
req.logout();
res.redirect('/login');
});
});
app.get('*', function(req, res) {
res.sendfile('./public/index.html');
});
}
I also have a controller called AnimalCtrl, which makes a GET request to my Express API:
$http({url: '/api/animal/:id', method: 'GET', params : { id: $routeParams.id } })
.success(function(response) {
...
}).error(function(response){
console.log("erro "+response);
});
However, I get the following error when I type in the url http://localhost:8080/animal/5429d6fa20348a6178cb1890
Uncaught SyntaxError: Unexpected token < app.js:1
Uncaught SyntaxError: Unexpected token < animal.js:1
Uncaught Error: [$injector:modulerr] Failed to instantiate module adote due to:
Error: [$injector:nomod] Module 'adote' is not available! You either misspelled the module name or forgot to load it.
If registering a module ensure that you specify the dependencies as the second argument.
What is a bit strange that I noticed that the id 5429d6fa20348a6178cb1890 is interpreted as if it was a file
This is my complete file structure:
Can someone help me with this?
Thank you!

Answer 1

Based on your code on github (https://github.com/larissaleite/Routing), here is an updated answer.
The issue is in your index.html file, replace:
<script src="js/app.js"></script>
by (see the leading /)
<script src="/js/app.js"></script>
Do not forget to add all your controllers to your index.html:
<script src="/js/controllers/animal.js"></script>
<script src="/js/controllers/home.js"></script>
<script src="/js/controllers/cadastro.js"></script>
Your index.html 'asks' for javascript files but receives your index.html because your server cannot 'resolve' the path your provide in your index.html. Using Chrome Dev Tools, if you look at the response from the server when asked for js/apps.js you should see it receives index.html
It is due to these lines:
app.get('*', function(req, res) {
res.sendfile('./public/index.html');
});
Define a view folder (see http://expressjs.com/api.html#app.set)
app.set('views', __dirname + '/public/views');
and remove these lines from your route.js:
app.get('/home', function(req, res, next) {
console.log(req.isAuthenticated());
res.sendfile('./public/views/home.html');
});
app.get('/cadastro', function(req, res, next) {
res.sendfile('./public/views/cadastro.html');
});
app.get('/animal/:id', function(req, res, next) {
res.sendfile('./public/views/animal.html')
});
Some other advices:
Add a .gitignore file. You do not have to track node_modules and bower_components folders
I would recommend you to use a router for your frontend app: see ngRoute or uiRouter