J'utilise node.js, express et angular.js pour créer un blog personnel. Il y a un lien sur la page d'index: <a href="/">Home</a>. (C'est dans le fichier layout.jade comme suit)

Tout va bien lorsque j'ai chargé la page d'index en utilisant l'adresse http://localhost:8000/, ng-view a chargé mon contenu correctement. Mais lorsque j'ai cliqué sur le lien Home, tout le contenu de ng-view a tout simplement disparu, je fouille depuis longtemps, mais je n'arrive toujours pas à comprendre pourquoi.

Mes codes sont les suivants.


app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var api = require('./routes/api');
var fs = require('fs');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__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')));

app.use('/', routes);
app.use('/api', api);

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

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}


// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});
module.exports = app;

routes / index.js (il s'agit de routes express, pas angular.js)

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

/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index', { title: 'My Blog' });
});

module.exports = router;

routes.js (angular.js)

angular.module('blogApp', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/index',
        controller: IndexCtrl
      });
  }]);

index.jade

extends layout

block content
    #main
        #content
            .ng-view
        #side
            ...(omitted)

block scripts
        link(rel='stylesheet', type='text/css', href='/stylesheets/index.css')

layout.jade

doctype html
html(ng-app='blogApp')
    head
        title=title
        base(href='/')
        link(rel='stylesheet', type='text/css', href='/stylesheets/vendors/bootstrap.min.css')
        link(rel='stylesheet', type='text/css', href='/stylesheets/vendors/bootstrap-theme.css')
        link(rel='stylesheet', type='text/css', href='/stylesheets/layout.css') 
        script(src='/javascripts/vendors/jquery-1.11.3.min.js')
        script(src='/javascripts/vendors/jquery.form.js')
        script(src='/javascripts/vendors/angular.js')
        script(src='/javascripts/vendors/angular-route.js')
        script(src='/javascripts/vendors/bootstrap.js')
        script(src='/javascripts/vendors/satellizer.js')
        script(src='/javascripts/views/login.js')
        script(src='/javascripts/angular/controllers.js')
        script(src='/javascripts/angular/routes.js')
    body
        #container
            hgroup.header
                h1 My Blog
            #menu
                ul
                    li
                        a(href='/') Home  //Here is the link
                    li.nav-login
                        a(href='login') Login
            block content
        block scripts
3
Searene 23 juil. 2015 à 08:30

2 réponses

Meilleure réponse

Vous pouvez essayer de remplacer l'attribut href de l'élément par ng-href.

<a href = "http://localhost:8000/"> Home </a>

À

<a ng-href="#/"> Home </a>

Je pense que cela résoudra votre problème.

Et si vous rencontrez toujours le même problème, vous pouvez faire une astuce pour le rendre possible en modifiant votre routes.js comme suit,

angular.module('blogApp', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/index',
        controller: IndexCtrl
      })
      .otherwise('/');
  }]);

Puis essayez avec n'importe quel lien dans href;)

3
LINTUism 23 juil. 2015 à 07:43

Faites correspondre votre href pour votre lien d'accueil avec l'URL de votre hôte local.

`<a href = "http://localhost:8000/"> Home </a>
0
Justin E. Samuels 23 juil. 2015 à 05:33