0

I have a simple angular app managed by Grunt.js. I use the angular router for different pages:

index.html

...
<body ng-app="app">
   ...
   <div ng-view></div>
   ...
</div>
...

_users.html

<h1>Users</h1>
...

app.js

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

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'views/_home.html',
            controller: 'HomeCtrl'
        }).
        when('/users', {
            templateUrl: 'views/_users.html',
            controller: 'UsersCtrl'
        }).
        otherwise({ redirectTo: '/' });
}]);

// ... controllers

The routing works fine for client side rendering, e.g requests of the form site.com, site.com/#/users, etc. If I apply $locationProvider.html5Mode({ enabled: true }), a direct call for site.com/users will fail, because there are no users.html or users/index.html files. Is there a smart grunt plugin which knows to render the views inside the layout when building a distribution directory? That is, generate a directory structure like for every nested view:

dist
├── index.html
└── users
│   └── index.html
├── css
│   └── app.css
└── js
    └── app.js

Thanks.

sa125
  • 28,121
  • 38
  • 111
  • 153
  • Why server side rendering ? You just want to have regular URLs with Angular ? Then : http://stackoverflow.com/questions/14771091/removing-the-hashtag-from-angularjs-urls-symbol – enguerranws Nov 25 '14 at 11:14
  • Yeah, and it works fine while navigating inside the app. But say you paste the link `site.com/users` in the browser - assuming a completely static server - you'll get a 404. You need to kickstart the clientside app somehow, and without a static html with some angular code in it, this doesn't happen. No? – sa125 Nov 25 '14 at 11:24
  • So, at the moment, when you copy/paste site.com/#/users in your browser, you get a 404 ? – enguerranws Nov 25 '14 at 11:26
  • Nope, that one works as expected. But using it without the hash doesn't. – sa125 Nov 25 '14 at 11:30
  • 1
    Ok I finally get it :) – enguerranws Nov 25 '14 at 12:49

1 Answers1

1

So, to sum up our discussion in comments :

  1. To get nice urls : you should configure $locationProvider and set html5Mode to true

  2. Then, your server should look at the requested folders (i.e. looking into the folder my-folder for the URL site.com/my-folder/) so it won't work

  3. So you have to make a basic rewrite rule in your htaccess (assuming you're working on Apache server), something like that (assuming index.html is the entry point of your app :

>

RewriteEngine on
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_URI} !\.(gif|jpe?g|png|css|js)$
RewriteRule .* /index.html [L,R=302]

From Angular doc : https://docs.angularjs.org/guide/$location#server-side

Unless if you really want to have static files to serve to the client (for any reason), this is the solution.

enguerranws
  • 8,087
  • 8
  • 49
  • 97