title: AngularJS different ng-app on differnet pages
body: <p>I am new to Angular JS. I am trying to learn. I have created a project which uses grunt and bower.</p>
  
  <p>This is my project struture</p>
  
  <pre><code>MyApp
  |
  |__app
     |
     |__bower_components
     |
     |__scripts
     | |
     | |__ app.js
     | |
     | |__contollers -- main.js, invoice.js, register.js
     | |
     | |__service -- service.js
     | |
     | |__styles -- CSS files
     | |
     | |__views -- main.html, invoice.html, register.html
     |
     |__ index.html, favicon.ico
  </code></pre>
  
  <p>It contains grunt and karma files also.
  Following are my html and js files. (only needed parts)
  my <strong>index.html</strong></p>
  
  <pre><code>&lt;body ng-app="MyAppInvoice"&gt;
  &lt;div class="container" ng-view=""&gt;&lt;/div&gt;
  &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>main.html</strong></p>
  
  <pre><code>&lt;div class="hero-unit"&gt;
    &lt;a href="views/registration.html" target="_self"&gt;Register&lt;/a&gt;
    &lt;a href="#invoice"&gt;Invoice&lt;/a&gt;
    &lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>invoice.html</strong> has one form inside a div. And it will come in <strong>div ng-view</strong> of <strong>index.html</strong>.</p>
  
  <p><strong>register.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="../bower_components/angular/angular.js"&gt;&lt;/script&gt;
  &lt;script src="../scripts/app.js"&gt;&lt;/script&gt;
  &lt;script src="../scripts/controllers/register.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="myAppRegister"&gt;
  &lt;div ng-controller="registerContoller"&gt;
  &lt;form&gt;
  &lt;!-- Form Components --&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>'use strict';
  
  angular.module('MyAppInvoice', [])
    .config(function ($routeProvider,$locationProvider) {
      $routeProvider
          .when('/', {
            redirectTo: '/main'
          })
        .when('/invoice', {
          templateUrl: 'views/invoice.html',
          controller: 'FileUploadController'
        })
        .when('/main', {
          templateUrl: 'views/main.html',
          controller: 'MainCtrl'
        })
        .otherwise({
          redirectTo: '/main'
        });
      /*$locationProvider.html5Mode(true);*/
    });
  
  angular.module('myAppRegister', [])
  .config(function ($routeProvider,$locationProvider) {
    /*$routeProvider
          .when('/', {
            redirectTo: '/signUp'
          })
      .when('/signUp', {
        templateUrl: 'views/registration.html',
        controller: 'SignUpController'
      })
      .otherwise({
        redirectTo: '/signUp'
      });*/
  });
  </code></pre>
  
  <p>All other JS are working fine.</p>
  
  <p><strong>1.</strong> In the main page I am putting <code>&lt;a href="views/registration.html" target="_self"&gt;Register&lt;/a&gt;</code> so that the entire page will change instead of ng-view only. But in URL it is displaying like <code>http://localhost:9000/views/registration.html</code>. I want to display it as <code>http://localhost:9000/signUp</code> only. How can I do that?</p>
  
  <p><strong>2.</strong> When I click on invoice link it is viewing the invoice page and working fine. But when I add the <code>$locationProvider.html5Mode(true);</code> (You can see I have commented it) the link URL becomes <code>http://localhost:9000/main#invoice</code> instead of <code>http://localhost:9000/#invoice</code></p>
  
  <p><strong>How can I solve these problems?</strong></p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>As gab suggested, I did that. And it is working fine. But the problem is, when I type </p>
  
  <p><code>http://localhost:9000/login</code>, then it shows</p>
  
  <pre><code>Cannot GET /login
  </code></pre>
  
  <p>It only works when I click on link. Then I have to start form  <code>http://localhost:9000/</code> </p>