Menu
I'm attempting to refactor some view logic in a MEAN stack application and running into some issues with UI-router. I'm still sort of new to Angular so I think my issue might be something really simple that I'm missing.
I'm trying to adopt some things I've found here on stack overflow but for some reason I keep getting internal server errors (500). Would anyone be able to take a look?
My code below is trying to mimic this.
Index route in my index.js:
router.get('/', function (req, res, next)
res.render('index.html');
});
View engine setup in app.js:
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.config method in my angular app js script:
app.config ([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('common', {
templateUrl: 'common.html', // exists in views folder
abstract: true
})
.state('hi', {
url:'/',
templateUrl:'/hi.html' // also in views folder
});
$locationProvider.html5Mode(true);
}]);
My index.html:
<!DOCTYPE html>
<html data-ng-app="djq">
<head>
<title>Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="/javascripts/youtube.js"></script>
<base href="/">
</head>
<body>
<div data-ui-view="">
</div>
</body>
</html>
My common.html
<section class="content-wrapper">
<div class="main-content" data-ui-view></div>
</section>
My hi.html
<div>Hi there!</div>
When I start my app and navigate to localhost:5000/, I receive the following error:
GET http://localhost:5000/hi.html 500 (Internal Server Error)
Let me know if I should provide more information.
UPDATE (RESOLVED): So I finally got this all fixed with Edward Knowles' help in his answer below, but it wasn't exactly the correct solution since my files are in different spots.
He mentions use of a "partials" folder. I already have a "views" folder which acts the same. In my node app.js I have:
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
/* ... */
app.use(express.static(path.join(__dirname, 'public')));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
So I have both views/ and bower_components/ has static directories. views/ is where all my html files reside.
"angularApp.js" is my angular file used on the client-side. I edited it to have the following:
app.config ([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('common', {
templateUrl: 'views/common.html',
abstract: true
})
.state('hi', {
url: '/',
parent: 'common',
templateUrl: 'views/hi.html'
});
/* ... */
$locationProvider.html5Mode(true);
}]);
So so if we navigate to '/', angular will make a request to node to get the file at views/hi.html. My problem was that I wasn't handling this request.
In my index.js, which is my router for these types of requests, I added:
router.get('/views/:name', function(req, res) {
var name = req.params.name;
res.render(name);
});
And now everything is working as expected :)
454
This is because your partials aren't being delivered by the server. You need to set up a route in express.
It is better explained here http://fdietz.github.io/recipes-with-angular-js/backend-integration-with-node-express/implementing-client-side-routing.html
Effectively you want something like
app.get('/partials/:name', function (req, res) {
var name = req.params.name;
res.render('partials/' + name);
});
And your hi.html to be inside the partials directory both in angular and the server, in this case you should also set the static option for express.
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
