title: Grails - Login page with AngularJS
body: <p>I'd like to build my login page with AngularJS, but I have problem with displaying it.</p>
  
  <p>This is my <code>web-app/apps/loginPage/app.js</code> for login page:</p>
  
  <pre><code>var app = angular.module('login-app', [
      'ngRoute'
  ]);
  
  app.config(function ($routeProvider) {
      $routeProvider.
          when('/', {
              templateUrl: 'apps/loginPage/views/login.html'
          }).
          otherwise({
              redirectTo: '/'
          });
      });
  </code></pre>
  
  <p>And this is my <code>grails-app/views/login/auth.gsp</code> code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta name='layout' content='main'/&gt;
      &lt;script src="${resource(dir: 'js', file: 'jquery-1.9.1.js')}"&gt;&lt;/script&gt;
      &lt;script src="${resource(dir: 'js', file: 'angular.js')}" &gt;&lt;/script&gt;
      &lt;script src="${resource(dir: 'js', file: 'angular-route.js')}"&gt;&lt;/script&gt;
      &lt;script src="${resource(dir: 'apps/loginPage', file: 'app.js')}"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-app="login-app"&gt;
          &lt;div ng-view&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is that when I navigate to <code>http://localhost:8080/myApp/login/auth</code>, page loads angular app, but doesn't load login form from <code>login.html</code> file, because it tries to find it under <code>http://localhost:8080/myApp/login/apps/loginPage/views/login.html</code> instead of <code>http://localhost:8080/myApp/apps/loginPage/views/login.html</code></p>
  
  <p>How can I fix the path? How can I tell angular to use <code>localhost:8080/myApp</code> as a root for resources? 
  (Note that i have *.gsp files in <code>grails-app/views</code> and angular app in <code>web-app/apps/</code>)</p>
  
  <p>I don't know if it's problem with configuring Grails or Angular.</p>