Angular UI-Router Error 500

I'm trying to refactor some presentation logic in a MEAN stack application and am running into some UI router issues. I'm still new to Angular, so I think my problem might be something really simple that I'm missing.

I'm trying to accept some of the things I found here on Stack Overflow, but for some reason I keep getting internal server errors (500). Can anyone take a look?

My code below tries to emulate this .

Pointing route in my index.js:

router.get('/', function (req, res, next) res.render('index.html'); });

View engine settings in app.js:

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

app.config 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 application and go to localhost: 5000 / I get the following error:

GET http://localhost:5000/hi.html 500 (Internal Server Error)

      

Let me know if I need to provide more information.

UPDATE (RESOLVED): So, I finally fixed it all with the help of Edward Knowles in his answer below, but it wasn't exactly the right solution since my files are in different locations.

He mentions the use of the "partials" folder. I already have a "views" folder that 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 / where all my html files are located.

"angularApp.js" is my client side Angular file. 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 if we go to '/' Angular will make a request to node to get the file in views / hi.html. My problem was that I was not processing 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 works as expected :)

+3


source to share


1 answer


This is because your partial files are not delivered by the server. You need to set up an express route.

It's better to clarify 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 yours hi.html

is inside a directory in partials

both angular and server, in which case you must also set a static parameter for express .

+1


source







All Articles