I'm totally new to modern web development and have been learning the MEAN stack from online tutorials. I'm just writing a simple todo app that allows CRUD operations. This is with the MEAN stack (Mongo database via Mongolab) and npm and bower as package managers - no scaffolding tools or cloning an existing app. This is my first time with Node and Angular.
I'm running into problems with displaying my HTML page using Angular. Here are the relevant files:
app.js for the backend (including only the relevant sections):
var express = require('express');
var path = require('path');
var app = express();
var morgan = require('morgan');
var db = require('./db');
var bodyParser = require('body-parser');
app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended' : 'true'}));
require('./backend/todo_rest')(app);
module.exports = app;
todo_rest.js:
var TodoSchema = require('./todo_schema');
var path = require('path');
module.exports = function(_app) {
_app.get('/api/todos', function(req, res) {
TodoSchema.find({}, function(err, todos) {
console.log('API GET; data: ' + todos);
if(err)
return res.status(500).send("The todos could not be retrieved from the database!");
return res.json(todos);
});
});
_app.get('*', function(req, res){
res.sendFile(path.resolve(__dirname + '/../client/views/index.html'));
});
};
app.js for the front end:
var app = angular.module('todosApp', []);
app.controller('todosController', function($scope, $http) {
$scope.todos = {};
$http({
method: 'GET',
url: '/api/todos'
}).then(function (success) {
console.log(success.data);
}, function (error) {
console.log('Angular GET error: ' + error.data);
});
});
and index.html:
<!DOCTYPE html>
<html ng-app="todosApp">
<head>
<meta charset="UTF-8">
<title>Todos App</title>
<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../../bower_components/angular/angular.min.js"></script>
<script src="../app.js"></script>
</head>
<body ng-controller="todosController">
<div>
<span>Total: </span>
<ul ng-repeat="todo in todos">
<li>Name: , </li>
</ul>
</div>
</body>
</html>
Although I do want to support full CRUD, right now I just want the HTML to display all the todos from the database. Here are the current problems:
- When I launch the page via
localhost:3000, I get the HTML but Angular elements like are displayed as is, instead of being replaced by the evaluated values. Basically, when I launch that page, I want all the todos to be displayed as a list by calling the/api/todosendpoint that I've exposed in my backend. I've checked that theconsole.login the frontend'sapp.jsisn't triggered. - When I launch
localhost:3000/api/todos, the JSON result is displayed in the browser instead of any HTML. Do I need to use routing in Angular to display a different view for each end point in the same page?
via Cygnus
No comments:
Post a Comment