AngularJS控制器的工作原理，但不加載HTML頁面

我有一些意想不到的問題，我的控制器，這在建設第一個角度項目，就像在這裏發生：https://www.youtube.com/watch?v=8-ZQHv70BCw&t=2119s 問題是我的主頁鏈接不加載，即使控制檯顯示消息並且不返回任何錯誤，也不會產生任何效果。我在plunkr上測試這個。AngularJS控制器的工作原理，但不加載HTML頁面

的index.html：

<!DOCTYPE HTML> 
<html lang="en" ng-app="computer"> 
    <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>Computer Solutions</title> 

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

    <body> 

    <div class="container"> 

     <!-- The justified navigation menu is meant for single line per list item. 
      Multiple lines will require custom code not provided by Bootstrap. --> 
     <div class="masthead"> 
     <h3 class="text-muted">Computer solutions</h3> 
     <nav> 
      <ul class="nav nav-justified"> 
      <li><a href="#/main">Home</a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="services.html">Services</a></li> 
      <li><a href="contact.html">Contact</a></li> 
      </ul> 
     </nav> 
     </div> 

<div ng-controller='MainCtrl'> 
    <div ng-view></div> 
</div> 

     <!-- Site footer --> 
     <footer class="footer"> 
     <p>&copy; 2016 Company, Inc.</p> 
     </footer> 

    </div> <!-- /container --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> 
<script src="https://code.angularjs.org/1.6.1/angular.js"></script> 
<script src="https://code.angularjs.org/1.6.1/angular-route.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script> 
<script src="script.js"></script> 
    </body> 
</html>

的script.js

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


.config(['$routeProvider', function($routeProvider){ 
    $routeProvider. 
    when('/main', { 
    templateUrl: 'main.html', 
    controller: 'MainCtrl' 
}); 

}]) 
.controller('MainCtrl', [function(){ 
    console.log('this is mainctrl'); 
}]);

和main.html中提前

this is main.

感謝，米哈爾

來源

2017-02-09 Michał Płatonow

你有Plunkr我們呢？ –

路由將在localhost上工作，即它需要xmlhttprequest調用，所以把你的任何服務器上，然後測試它將工作 –

你有正確的路徑到您的HTML文件？例如，它應該是'./main.html'還是'../main.html'？ – user2085143

將您的導入更改爲版本1.4.8。你已經納入版本似乎對$route定義問題沒有otherwise：

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

我還添加了其他國家，並且都應該工作。

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
    when('/main', { 
    templateUrl: 'main.html', 
    controller: 'MainCtrl' 
    }). 
    when('/about', { 
    templateUrl: 'about.html', 
    }). 
    when('/services', { 
    templateUrl: 'services.html', 
    }). 
    when('/contact', { 
    templateUrl: 'contact.html', 
    }) 
}])

參見工作版本：https://plnkr.co/edit/ebB3GAnoDSunsHK4bpme

來源

2017-02-15 08:38:04

嗯，這個版本在單擊Main時工作，但在點擊其他鏈接時仍然沒有。奇怪的是我做了和你一樣的事情，只有當點擊Main時，控制檯才顯示日誌。我在ubuntu上使用http-server，我不知道問題出在哪裏;（ –

更新：它的工作原理，我忘了重新運行http服務器後提交一些小的變化，謝謝你的所有幫助爵士@ daan.desmedt –

-1

我猜u必須提到控制器（MainCtrl）在html和routeProvider中也是如此。嘗試刪除其中一個地方。檢查https://stackoverflow.com/a/27314659/3821223

來源

2017-02-09 10:04:57 shrinathM

AngularJS控制器的工作原理，但不加載HTML頁面

回答

相關問題