简体   繁体   中英

Angular ng-view not working with express

I'm trying work open page home of directory partials/home using ng-view and ng-view not working with express. A new page opens with render when acess http://localhost:3000/home . All routes defined for angular has no effect. I would like to know how to render my page partials/home.html in index.html using ng-view with express.

app.js

//módulos
var express = require('express');
var load = require('express-load');
var bodyParser = require('body-parser');
var app = express();
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var server = require('http').Server(app);
var io = require('socket.io')(server);


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');


//uncomment after placing your favicon in /public
app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

load('routes').then('controllers').into(app);

server.listen(3000);
console.log('Site no ar ...');

module.exports = app;

Routes Express - index.js

module.exports = function (app) {

app.get('/', function(req, res){
    res.render('index');
});

app.get('/:name', function(req, res){
    var name = req.params.name;
    res.render('partials/' + name);
});

app.get('*', function(req, res){
    res.render('index');
});

};

Routes Angular - Location: public/app/app.js

var app = angular.module('appSiteFio',['ngRoute']);

app.config(function($routeProvider, $locationProvider){

// remove o # da url
$locationProvider.html5Mode(true);

$routeProvider

    .when('/', {
        templateUrl : 'index.html',
        controller  : 'mainController',
    })


    .when('/home', {
        templateUrl : 'partials/home.html',
        controller  : 'homeController',
    })


    .otherwise ({ redirectTo: '/' });
});

I would suggest changing the index.js file to something like:

module.exports = function (app) {
app.use(express.static('/partials')); //here you can write your partials directory. 
app.get('*', function(req, res){
    res.render('index');
});

};

(Also change your templateUrl inside angular file with the partials prefix.);

that way angular will allways will be loaded and angular router will deal with all the views fetching from the static partials folder

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM