2014-06-15 18 views
9

Ho un bug davvero strano, ho impostato i miei percorsi e i miei controller. Ora ho solo una pagina vuota senza errori?AngularJS: ngRoute, altrimenti non funzionante

index.html;

<!DOCTYPE html> 
<html ng-app="RekenTalent" lang="nl"> 
    <head> 
     <title>Rekentalent.nl: Ben jij een talent in Rekenen?</title> 
     <!-- Stylesheets --> 
     <link rel="stylesheet" type="text/css" href="/app/front/assets/stylesheets/style.css"> 
     <!-- AngularJS --> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.min.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.min.js"></script> 
     <!-- Controllers --> 
     <script src="/app/front/controllers/controller.js"></script> 
     <!-- Router --> 
     <script src="/app/front/router.js"></script> 
    </head> 

    <body ng-view></body> 
</html 

>

Controller.js:

/** 
* RekenTalent 
* 
* Copyright 2014 - Rekentalent.nl 
*/ 
var RekenTalent = angular.module('RekenTalentControllers', []); 

RekenTalent.controller('rekenCtrl', ['$scope', function($scope){ 

}]); 

Router.js:

var RekenTalent = angular.module('RekenTalent', [ 
    'ngRoute', 'RekenTalentControllers' 
]); 

RekenTalent.config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
    when('/index', { 
     templateUrl: '/templates/index.html', 
     controller: 'rekenCtrl' 
    }). 
    otherwise({ 
     redirect: '/index' 
    }); 
}]); 

E /templates/index.html dice solo 'ciao'. Qualcuno sa perché ottengo una pagina vuota? Dovrebbe reindirizzare a /index.html e /index.html dovrebbe usare /templates/index.html come modello. Qual è il problema e la correzione?

UPDATE:

quando vado a/index funziona, in modo che il lavoro altrimenti param doesn `t, perché no?

+0

Penso che sia un errore di riferimento del file, per favore dateci il vostro indice e gli script angolari sul vostro PC – Milad

+0

E potete aggiungere una console.log ('load') nel controller per verificare se il controller viene attivato correttamente o no Ma ancora, penso che il suo errore di refference – Milad

+0

index.html => /app/front/templates/index.html, anche quando metto console .log ('ciao') nel controller non ho accesso alla console. – DazDylz

risposta

16

cambiamento redirect-redirectTo

Ed è meglio usare home.template per evitare tutto questo tipo di problemi, intendo prendere in considerazione:

Hai index.html che contiene il tutto incluso script, come angolare, jquery, ..., e nell'etichetta del corpo c'è ng-view, ok?

Ora, se si dispone di modelli come benvenuto o qualsiasi cosa per indice, scrivere tale modello in un home.html, OK? Come questo:

index.html:

<body ng-app="yourapp"> 
    <div ng-view> 
    </div> 
</body> 

Home.html

<div> 
    Welcome, user. This is index. 
    </div> 

La configurazione app:

yourapp.config(function($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'partials/home.html', 
     controller: 'homeCtrl' 
     }) 
     .otherwise({redirectTo:'/'}); 
} 

Ed è una buona pratica di mettere tutti i tuoi modelli all'interno di una cartella parziali, dove la cartella padre contiene index.html come questo

root 
    yourAppFolder 
     1-Assets 
      Css 
      Js 

     2-Partials 
      home.html 
      login.html 

     3-index.html 
2

Trovato; il reindirizzamento dovrebbe essere redirect To;

var RekenTalent = angular.module('RekenTalent', [ 
    'ngRoute', 'RekenTalentControllers' 
]); 

RekenTalent.config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
    when('/index', { 
     templateUrl: '/app/front/templates/index.html', 
     controller: 'rekenCtrl' 
    }). 
    otherwise({ 
     redirectTo: '/index' 
    }); 
}]); 
1

Ho questo esempio di codice, ad esempio:

.config(['$routeProvider', 
function($routeProvider) { 
    console.log('routeando'); 
    //alert('otherwise' + $routeProvider.route); 
    $routeProvider. 
     when('/', {  templateUrl: 'home'}). 
     when('/route1', { templateUrl: 'route1'}). 

     /*Without the next line, redirectTo doesnt work*/ 
     when('/error', { templateUrl: 'error'}). 
     otherwise({  redirectTo: '/error'}); 
}]);  

Altrimenti è solo andare a lavorare se si dispone già di un "quando" dei parametri per questa strada.

Scusami per il mio inglese e buona giornata.

Problemi correlati