SPA με angular και express δεν φορτωνει περιεχομενο

slevinkelevra · 3 Αυγούστου 2015

Καλησπερα

Φτιαχνω μια SPA πανω σε node/express server. Η λογικη λεει οτι επειδη ειναι SPA χρειαζεσαι μονο ενα index και τα υπολοιπα φορτωνονται εκει μεσα. Οποτε εχουμε στον σερβερ, στο app.js

var routes = require('./routes/index');
app.use('/', routes.list);

το οποιο περιεχει

exports.list = function(req, res){
res.render('index')
};

για να ρενταρει το index.ejs

<!DOCTYPE html>
    <html ng-app="sp">
    <head>
    <script src="./public/javascripts/angular.min.js"></script>
    <script src="./public/javascripts/angular-route.min.js"></script>
    <script>
    var sp= angular.module('sp', ['ngRoute']);

    sp.config(function ($routeProvider) {
        // configure the routes

        $routeProvider
        .when('/', {
        // route for the home page
            templateUrl: './views/home.html',
            controller: 'homeController'
        })

        .when(' /about', {
        // route for the about page
            templateUrl: './views/about.html',
            controller: 'aboutController'
        })
)}

    app.controller('homeController', function ($scope) {
        $scope.message = 'Welcome to my home page!';
    });

    sp.controller('aboutController', function ($scope) {
        $scope.message = 'Find out more about me.';
    });
    </script>


    <div ng-view></div>
     <li><a href="/">Home</a></li>
     <li><a href="about">About</a></li>

Στο config οριζεις τι φορτωνει και καθε ενα εχει κ εναν controller για να κολλησει ενα κειμενακι στο message. Τα home και about ειναι της μορφης

<h1>Home Page ή About</h1>
<p>{{ message }}</p>

Αυτα τα μικρα html φορτωνουν μεσα στο <div ng-view></div>

Παμε

1- δεν μου φορτωνει με τιποτα τα angular.min.js και angular-route.min.js. Μου δινει λαθος "angular is not defined" για το var app = angular.module('app', ['ngRoute']); και "Unexpected token <" για το <!DOCTYPE html> (και τα 2 λαθη ειναι στο index.ejs)

2- τα home.html και about.html δε φορτωνουν (duh!)

3- Δεν μπορω να χρησιμοποιησω τον χαρακτηρα # στα links. Βαζω app.use('/#', routes.list); στο route και <a href="#"> <a href="#about"> στα links του index.ejs και μου βγαζει error404

4- Μηπως πρεπει να βαλω routes και για τις υπολοιπες περιπτωσεις ? Σε στιλ var about = require('./routes/about'); και app.use('/about', about.list); ? Αλλα αυτο θα προκαλεσει page loads (?)

5- Γιατι ολα σε μενα πια?

Σορρυ για την τεραστια ερωτηση.

Ευχαριστω εκ των προτερων

vadou · 3 Αυγούστου 2015

Για το 1 φαντάζομαι ότι έχεις γράψει λάθος το path του src.

Δεν έχω ιδέα από angular αλλά υποθέτω ότι το index.ejs είναι κάποιο template (?) και στο src θα πρέπει να γράψεις το path από το αρχείο index.ejs στο js.

Δηλαδή αν το index.ejs είναι πχ στο root και το angular.min.js στον φάκελο /public/javascripts/angular.min.js τότε θα πρέπει να γράψεις

src="public/javascripts/angular.min.js" ή και src="/public/javascripts/angular.min.js" ώστε με το 2ο τρόπο να μην το πας σχετικά με τη θέση του ejs αλλά σαν ακριβές path

Αν το ejs αρχείο είναι πχ στο /public/templates/index.ejs πρέπει να γράψεις src="../javascripts/angular.min.js"

ή src="/public/javascripts/angular.min.js"

Με 2 τελείες πάμε ένα φάκελο πάνω, η μονή τελεία σημαίνει "εδώ που είμαι".

Αυτά με κάθε επιφύλαξη καθώς όπως είπα δεν έχω ιδέα από angular και απλά μου χτύπησε περίεργα το path που έχεις δώσει, οπότε μπορεί να λέω και @@

slevinkelevra · 3 Αυγούστου 2015

Thanks για την προσπαθεια, αλλα τελικα λογο αυτου Site: εδω πρεπει απλα να

1- περασεις τα home.html και about.html στον public φακελο του node/express [επειδη ειναι στατικα, καλυτερα να μπουν εκει]

2- προσθεσεις αυτο στο app.js του node/express

app.use(express.static('public'));

3- να αλλαξεις τις αναφορες στα javascript αρχεια ως εξης

<script src="http://localhost:4800/javascripts/angular.min.js"></script>
<script src="http://localhost:4800/javascripts/angular-route.min.js"></script>

4- και για να βρισκει τα home/about.html

	.when('/', {
	// route for the home page
		templateUrl: 'http://localhost:4800/home.html',
		controller: 'homeController'
	})
	
	.when('/about', {
	// route for the about page
		templateUrl: 'http://localhost:4800/about.html',
		controller: 'aboutController'
	})

vadou · 3 Αυγούστου 2015

Ψάχτο αυτό με τα urls λίγο γιατί πρέπει να υπάρχει καλύτερος τρόπος. Αν αλλάξεις domain (πχ από τον development server σου το πας σε production) θα πρέπει να αλλάξεις όλα τα urls με το χέρι;

ZAKKWYLDE · 8 Αυγούστου 2015

βγάλε το http://localhost:4800, απλά ξεκίναι τα urls σου με '/' και θα είναι absolute....δηλαδή θα ξεκινάνε πάντα απο το http://<host>:<port>/<context-path>

slevinkelevra · 9 Αυγούστου 2015

Απο το βημα 2 και κατω, οτι ειπε ο ZAKKWYLDE

Σύνδεση

SPA με angular και express δεν φορτωνει περιεχομενο

Προτεινόμενες αναρτήσεις

slevinkelevra

vadou

slevinkelevra

vadou

ZAKKWYLDE

slevinkelevra

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση