2013-06-28 11 views
9

Ho un modello AngularJS incredibilmente semplice, sto cercando di far funzionare il routing ma quando carico la pagina visualizzo il tag H1 dal mio index.html.Instradamento sottodirectory AngularJS non funzionante, con tag applicato

La mia app si trova in una sottodirectory, /angular-route/, e so che esistono i partial, posso visitare /angular-route/partials/interest.html e la pagina viene visualizzata correttamente.

Ho perso qualcosa di veramente semplice qui?

<html> 
<head ng-app="myApp"> 
    <title>AngularJS Routing</title> 
    <base href="/angular-route/" /> 
</head> 
<body> 

<h1>AngularJS Routing</h1> 

<div ng-view></div> 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 

<script> 
    'use strict'; 

    var myApp = angular.module('myApp', []). 
     config(['$routeProvider', function($routeProvider) { 
     $routeProvider. 
      when('/interest', { 
       templateUrl: 'partials/interest.html', 
       controller: 'InterestCtrl' 
      }). 
      when('/catalogue', { 
       templateUrl: 'partials/catalogue.html', 
       controller: 'CatalogueCtrl' 
      }). 
      otherwise({redirectTo: '/interest'}); 
    }]); 

    myApp.controller('InterestCtrl', function($scope, $routeParams) { 
     console.log('InterestCtrl'); 
    }); 
    myApp.controller('CatalogueCtrl', function($scope, $routeParams) { 
     console.log('CatalogueCtrl'); 
    }); 
</script> 

+0

Sede [Come set posizione principale per router AngularJS ?] (http://stackoverflow.com/questions/17319715/how-to-set-root-location-for-angularjs-router/17321184#17321184) – Stewie

+0

Questo non fa alcuna differenza, se aggiungo '' –

risposta

26

Accanto al tag base, che si sarà bisogno, hai anche messo la direttiva ng-app sull'elemento sbagliato (head). Nel tuo codice, l'applicazione viene inizializzata solo all'interno dell'intestazione. Il resto dell'HTML viene ignorato da Angular.

WORKING PLUNKER

<html ng-app="myApp"> 
<head> 
    <title>AngularJS Routing</title> 
    <script> 
    document.write('<base href="' + document.location + '" />'); 
    </script> 
    <script type="text/ng-template" id="partials/interest.html"> 
    <h2>Inereset</h2> 
    </script> 
    <script type="text/ng-template" id="partials/catalogue.html"> 
    <h2>Catalogue</h2> 
    </script> 
</head> 
<body> 

    <h1>AngularJS Routing</h1> 

    <ul> 
    <li><a href="#/interest">Interest</a></li> 
    <li><a href="#/catalogue">Catalogue</a></li> 
    </ul> 

    <div ng-view></div> 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 

    <script> 
     'use strict'; 

     var myApp = angular.module('myApp', []). 
     config(['$routeProvider', function($routeProvider) { 
      $routeProvider. 
      when('/interest', { 
       templateUrl: 'partials/interest.html', 
       controller: 'InterestCtrl' 
      }). 
      when('/catalogue', { 
       templateUrl: 'partials/catalogue.html', 
       controller: 'CatalogueCtrl' 
      }). 
      otherwise({redirectTo: '/interest'}); 
     }]); 

     myApp.controller('InterestCtrl', function($scope, $routeParams) { 
     console.log('InterestCtrl'); 
     }); 
     myApp.controller('CatalogueCtrl', function($scope, $routeParams) { 
     console.log('CatalogueCtrl'); 
     }); 
    </script> 
</body> 
</html 
+0

Ottimo! Ricorda solo le risorse che utilizzano il percorso relativo come "your_asset_path/asset". E in ngRoutes, inizia la tua corrispondenza con '/', dovresti sapere che ngRoute gestisce il trasferimento dell'URL, se base = '/ admin /', quindi '/index.html' in route risulterà in '/admin/index.html' – hao

+0

Mi chiedo davvero come 'document.location' sia in grado di restituire una stringa ... –

+0

@RomainBruckert perché no? –

5

Seguendo la configurazione lavorato per me!

Diciamo che vuole accedere la nostra applicazione utilizzando http://localhost:8000/app/

enter image description here

Then avere il tag base con la seguente highlighted

enter image description here

Problemi correlati