AngularJS ng-view not loading

我正在爲我的網站使用AngularJS路線，但NG-VIEW不會加載任何東西。我只是測試「關於」鏈接。當我從導航欄中點擊「關於我」時，我希望NG-VIEW顯示about.html。AngularJS ng-view not loading

這裏是index.html：

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 
     <link href="/css/style.css" rel="stylesheet"> 

    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script> 

    <script src="/js/parallax.js-1.4.2/parallax.js"></script> 

    <title>##</title> 
</head> 

<body ng-app="AgendaApp"> 

    <div class="header"> 
     <div class="container"> 
      <ul id="topnav"> 
       <li><a href="/">Home</a></li> 
       <li><a href="#/about">About Me</a></li> 
       <li><a href="#">GitHub</a></li> 
       <li><a href="#">Resume</a></li> 
       <li><a href="#">Facebook</a></li> 
      </ul> 
     </div> 
    </div> 

    <div class="main"> 
     <div class="container"> 
      <div ng-view></div> 
     </div> 
    </div> 



</body> 

<script src="js/app.js"></script> 
<script src="js/controllers/AgendaController.js"></script> 
<script src="js/controllers/ScheduleController.js"></script> 
<script src="js/services/schedules.js"></script>

和app.js是：

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

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/', { 
     controller: 'MainController', 
     templateUrl: 'views/main.html' 
    }) 
    .when('/about', { 
     controller: 'AgendaController', 
     templateUrl: 'views/about.html' 
    }) 
    .when('/detail', { 
     controller: 'ScheduleController', 
     templateUrl: 'views/schedule.html' 
    }) 
    .otherwise({ 
     redirectTo: '/' 
    }); 
});

和控制器：

app.controller("AgendaController", ['$scope', 'schedules', function($scope, schedules) { 
    schedules.success(function(data){ 
     $scope.schedules = data; 
    }); 
}]);

我controlle r還沒有做任何事情。

來源

2017-01-10 H.Bae

試試這個，

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-12"> 
     <div class="nav"> 
     <a href="#home" class="button">Home</a> 
     <a href="#about" class="button">About</a> 
     <a href="#detail" class="button">Detail</a> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="container"> 
    <div ng-view=""></div> 
</div>

DEMO

來源

2017-01-10 04:16:19 Sajeetharan

非常感謝！現在效果很好 –

AngularJS ng-view not loading

回答

相關問題