AngularJS redirecting to another ng-app module

StackOverflow https://stackoverflow.com/questions/20898111

質問

newbie to AngularJS here.

I created one AngularJS application using Yeoman, grunt and bower.

The index page contains some style and ng-app and ng-view.

index.html

<html>
  <head>
      <!-- CSS Imports -->
   </head>
   <body ng-app="MyApp1">
      <div>
          //Some divs here to  have some styles

          <div ng-view></div>
      </div>
    </body>
    <!--importing AgularJS, app.js, controller JS files -->
</html>

app.js

'use strict';

angular.module('MyApp1', [])
  .config(function ($routeProvider,$locationProvider) {
    $routeProvider
        .when('/', {
          redirectTo: '/main'
        })
      .when('/invoice', {
        templateUrl: 'views/invoice.html',
        controller: 'UploadController'
      })
      .when('/main', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/login', {
            templateUrl: 'views/login.html',
          })
      .otherwise({
        redirectTo: '/main'
      });
//    $locationProvider.html5Mode(true);
  });

    angular.module('LoginApp', [])
    .config(function ($routeProvider,$locationProvider) {

    });

The index page has ng-view that will display invoice.html or main.html. Default is main.html. main.html

<div class="hero-unit">
  <a ng-href="views/login.html" target="_self">Login</a>
  <br>
  <a ng-href="#invoice">New Document</a>

</div>

Ok. In this main.html, I have two links. Second is a link to invoice. That anyway will display inside index.html ng-view. The controller UploadController belongs to MyApp1 module. And it has separate JS file. It is working fine.

The first link is to another HTML page. Its login.html. It has another ng-app called LoginApp. Both the modules are independent and in diferent pages.

When I click on the first link, it goes to login.html. But in the URL it shows like http://localhost:9000/views/login.html. But I want it to be shown like http://localhost:9000/login, just like for other main.html (http://localhost:9000/#/main). When I edited the link like <a ng-href="#login">Login</a> it is not working.

And also $locationProvider.html5Mode(true); is not working for me.

役に立ちましたか？

解決

Put the login.html to same folder like index.html.

I think it's not possible to route to another module. However this route rule for login.html will not working for (external) page.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top