2016-08-05 92 views
0

Dies ist sehr einfach und doch meine categories.view.html innerhalb meiner Ansichten-Ordner (die aus lorum ipsum besteht) wird nicht innerhalb des Containers div angezeigt.App View Controller funktioniert nicht

Dies ist die HTML

<!DOCTYPE html> 
    <html lang="en" ng-app="kB"> 
     <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 


    <title>Mwiki</title> 

    <!-- Bootstrap core CSS --> 
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <!-- Custom styles for this template --> 
    <link href="stylesheets/style.css" rel="stylesheet"> 

    </head> 

    <body> 

    <nav class="navbar navbar-inverse"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Knowledgebase</a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 

     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 

    <div class="container"> 
     <div ng-view></div> 
    </div> 
    <footer> 
    <p> &copy; 2016 Wiki App</p> 
    </footer> 

    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="bower_components/angular/angular.min.js"></script> 
    <script src="bower_components/angular-route/angular-route.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
    <script src="controllers/articles.controller.js"></script> 
    <script src="controllers/categories.controller.js"></script> 
    <script src="app.js"></script> 
    </body> 
</html> 

Dies ist die app.js Datei, die als meine index.html

var app = angular.module('kB', ['ngRoute']); 

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/categories', { 
    templateUrl: 'views/categories.view.html', 
    controller: 'CategoriesCtrl' 
    }); 
}]); 

.controller('CategoriesCtrl', [function($scope) { 
console.log($scope); 
}]); 
+0

erhalten Sie einen Fehler in der Konsole? –

Antwort

0

Entfernen Sie das Semikolon nach der Config-Funktion direkt im gleichen Ordner (oder App vor deinem Controller hinzufügen). Achten Sie auch darauf, zu kommentieren.

var app = angular.module('kB', ['ngRoute']); 

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/categories', { 
    templateUrl: 'views/categories.view.html', 
    controller: 'CategoriesCtrl' 
    }); 
}]) 

.controller('CategoriesCtrl', ['$scope', function($scope) { 
console.log($scope); 
}]); 

Ich habe dies nicht getestet, aber es sollte funktionieren.