2016-04-27 15 views
0

Meine eckige Routing-Funktion funktioniert nicht - Es gibt eine Seite laden, aber ohne die 'home.html' Datei. Dies ist mein Code:AngularJS Routing-Funktion funktioniert nicht

Index.HTML

<html ng-app="App" class="no-js" lang="en" > 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script> 
    <script src="app.js"></script>  
    </head> 

    <body ng-cloak> 
    <div ng-controller="main"> 
     <div ng-view></div> 
    </div> 
    </body> 
</html> 

app.js

(function() { 
'use strict'; 

angular 
    .module('App', ['ngRoute']) 
    .controller('$routeProvider', router) 
    .controller('main', main); 

function router($routeProvider) { 

    $routeProvider. 
      when('/', { 
      templateUrl: '_pages/home.html', 
      controller: 'main' 
      }); 

}; 
function main ($scope) { 
console.log("done"); 
} 
+0

Sind Sie sicher, dass die Verzeichnisstruktur korrekt ist? EDIT: befindet sich diese Knotendatei im selben Verzeichnis wie der Ordner _pages? – Olly

+0

Verzeichnis sollte in Ordnung sein - home.html ist in einem Unterordner (Datei oben: index.html ist eine Ordner-Ebene höher) –

+2

die Router-Sachen sollten in '.config' Aufruf sein, Sie haben es in einem Controller – reptilicus

Antwort

3

Angular $ Anbieter arbeiten nur in Config-Zustand. Beispiel:

angular 
.module('App', ['ngRoute']) 
.config(['$routeProvider', router]); 
function router($routeProvider) { 

    $routeProvider. 
     when('/', { 
     templateUrl: '_pages/home.html', 
     controller: 'main' 
     }); 

}; 
+0

Vielen Dank - Dies funktioniert mit dem [] um den $ routeprovider ... –

+0

Gern geschehen. –

3

Die Route Konfiguration in Config erfolgt und nicht-Controller. Ändern Sie den Code wie folgt:

(function() { 
    'use strict'; 

    angular 
    .module('App', ['ngRoute']) 
    .config(router) 
    .controller('main', main); 

    function router($routeProvider) { 

    $routeProvider. 
     when('/', { 
     templateUrl: '_pages/home.html', 
     controller: 'main' 
     }); 

    }; 

    function main ($scope) { 
    console.log("done"); 
    } 
}); 
+0

Hoppla! Wir haben in derselben Zeit geantwortet. Deine Lösung ist großartig. :) –

+0

Es ist in Ordnung. Ihre Lösung funktioniert auch :) –