2015-09-06 12 views
5

Ho lavorato un po 'con Angular e ho cercato di implementare il routing semplice. Ho un codice HTML di base che contiene un riferimento a tutti gli script richiesti e un tag ng-view.ng-view non visualizza il modello

Per qualche motivo, quando la pagina viene caricata, il modello non viene mostrato nella posizione ng-view. Perché non viene mostrato e come risolverlo?

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script> 
    <script src="routCtrl.js"></script> 
</head> 
<body ng-app='ngRouteTest'> 
    <div ng-view></div> 
</body> 

e il file di script:

var ngRouteTest = angular.module('ngRouteTest',['ngRoute']); 
ngRouteTest.config(function($routeProvider){ 
    $routeProvider 
.when('/', 
    {templateUrl : '/routView1.html'}) 
}); 
+0

Che cosa dice la Console per gli sviluppatori dire? Eventuali errori/avvertenze? –

+0

Il seguente errore: "Impossibile caricare il modello". –

+0

Quindi il problema è che stai fornendo un percorso errato al file html. dov'è il tuo routView1.html? Come appare la struttura della tua cartella? –

risposta

0

Prima di tutto è necessario eseguire il codice da un server, quindi per testarlo localmente utilizzare http-server che è davvero facile da preparare.

Poi è necessario modificare il percorso TemplateURL da:

{templateUrl : '/routView1.html'} 

a:

{templateUrl : './routView1.html'} 
2

È necessario reindirizzare a quella pagina in modo che il routing verrà a sapere quale pagina di rendere all'interno ng-view direttiva.

Ci sono diversi modi per farlo.

  1. Definire un altro altrimenti per reindirizzare a /.

    $routeProvider.otherwise({redirectTo: '/'}) 
    
  2. Aggiungi ancoraggio alla pagina che reindirizza a /.

    <body ng-app='ngRouteTest'> 
        <a href="#/">Home Page</a> 
        <div ng-view></div> 
    </body> 
    
  3. Avere URL predefinito sulla pagina in <head> tag.

    <base href="/"/> 
    
+0

Grazie per la risposta, nessuna delle opzioni ha aiutato. Vedo il routing preformato dopo aver aggiunto "altrimenti", ma la visualizzazione di ng non carica il modello. Accedendo alla console come indicato sopra, viene visualizzato il seguente errore: "Impossibile caricare il modello". Suppongo che il problema sia che i file sono archiviati localmente e comportano problemi di sicurezza: avvierò un server e vedrò se ottengo un risultato diverso. –

+1

è necessario ospitare il proprio codice sul server .. il modello non funzionerà altrimenti .. –

0

Dopo l'avvio di un host locale e rovinando il codice da lì ha funzionato perfettamente bene.

Il problema era con la sicurezza relativa al cromo quando si effettuano chiamate locali Ajax.

Quindi uno ha questo problema dovrebbe fare una delle seguenti cose:

1.Disable web-sicurezza in cromo. 2.Avviare un host locale da testare.