2016-07-22 3 views
2

Ich habe eine einfache eckige App und zwei Links, die ich kantig die URL für mich ändern und zeigen Sie die richtige Ansicht für jeden Link in der gleichen Single-Page-Anwendung. Aber wenn ich Controller-Modul im Hauptmodul hinzufügen - es funktioniert nicht!Ng-Ansicht in AngularJS funktioniert nicht

app.js

'use strict'; 

var app = angular.module('app', ['ngRoute','ngResource','ngSanitize','ui.select','appControllers']) 

.config(['$routeProvider',function($routeProvider){ 
    $routeProvider 
    .when('/roles',{ 
     templateUrl: '/views/roles.html', 
     controller: 'rolesController' 
    }) 
    .otherwise(
     { redirectTo: '/views/index.html'} 
    ); 
}]); 

index.html

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
<title>Spring boot and Angularjs Tutorial</title> 
<link rel="stylesheet" href="/css/app.css"> 
<script src="/js/app.js"></script> 
<script src="/js/controllers.js"></script> 
</head> 
<body> 
<h2>Administrator Panel</h2> 
<div class="home-section"> 
<ul class="menu-list"> 
    <li><a href="#/report">Report</a></li> 
    <li><a href="#/roles">Roles</a></li> 
</ul> 
</div> 
<div ng-view></div> 
</body> 
</html> 

controllers.js

'use strict'; 

var appControllers = angular.module('appControllers'); 

appControllers.controller('rolesController', ['$scope', function($scope) { 
$scope.headingTitle = "Roles List"; 
}]); 

Wenn es keine ‚appC- Die Ansichten von 'ontrollers' in app.js funktionieren, Controller nicht.

var app = angular.module('app', ['ngRoute','ngResource','ngSanitize','ui.select']) 

Mit - nichts funktioniert. Was soll ich machen?

+1

Damit Sie schnell eine Antwort erhalten, sollten Sie zuerst versuchen, das Problem zu lokalisieren, indem Sie versuchen, die einfachste und kürzeste Beispielcodierung zu erhalten, die das Problem anzeigt. Streifen Sie hier alles ab, was für Ihre Frage nicht notwendig ist. –

Antwort

3

ändern

var appControllers = angular.module('appControllers');

zu

var appControllers = angular.module('appControllers',[]);

ist Ihr Code versucht, ein vorhandenes Modul zu holen, der nicht existiert.

From the documentation:

Beachten Sie, dass angular.module mit ('MyModule', []) wird die Modul MyModule und überschreibt alle vorhandenen Modul mit dem Namen MyModule erstellen. Verwenden Sie angular.module ('myModule'), um ein vorhandenes Modul abzurufen.