lundi 30 mars 2015

Angular JS and Node routing/wiring - data only showing after a page refresh

I'm using Node and Anugular, and I have created a RESTful api from my application, and created an angular resource to use this. I'm confused as to how the Angular ui-router directive reconciles with the Node Routing system on the server.


At the moment I have set up my routes/states in ui-router like this:



$stateProvier
.state('admin', {
url:'/admin',
templateUrl:'views/admin.html',
controller: 'adminController'
});


And this loads into the ui-view on my homepage, when I navigate to this url from a link on the loaded page.


HOWEVER, when I manually type in localhost/admin I get the route from Node, rather than the state render through angular.


Now I'd like to Angular to handle all the navigation on my app, and my resource to get the information, even if the address is typed manually into the navigation bar.


I've created a route in Node is for index, which contains my index.html page from angular, which effectively contains the whole app angular code, including all the routing.


My question is, how can I get angular redirect if I manually type the url into the address bar, and still have the data from the $resource.


I'm directing my resource to '/admin' - could this be the problem?


Does this mean that I need to add the contents of /routes/appointments' into the base node file (server.js), and then remove the route? If so then how do i direct my resource to the correct REST api?


app structure


public -angular app -app.js //for angular routes index.js appointments.js models views - index.ejs server.js //node server file


here is my code exerpts server.js



//standard routing code
var routes = require('./routes/index');
var appointments = require('./routes/appointments');

var app = express();
//configuring Express
app.set('port', process.env.PORT || 3000);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use('/', routes);
app.use('/', appointments);


routes/index.js



var express = require('express');
var router = express.Router();

// ./routes/index.js
router.get('/', function(req, res) {
res.render('index', { title: 'Homepage' });
});

module.exports = router;


routes/appointments.js - this is the basis of my RESTFUL api



var express = require('express');
var router = express.Router();

var mongoose = require('mongoose');
var Todo = require('../models/Appointments.js');

/* GET /todos listing. */
router.get('/admin', function(req, res, next) {
Todo.find(function (err, todos) {
if (err) return next(err);
res.json(todos);
});
});

module.exports = router;

Aucun commentaire:

Enregistrer un commentaire