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.

おかげで、のMichał

出典

2017-02-09 Michał Płatonow

はあなたが私たちのためにPlunkrを持っていますか？ –

ルートはlocalhost上で動作します。xmlhttprequestコールが必要なので、任意のサーバーに置いてからテストしてください。 –

htmlファイルへの正しいパスはありますか？たとえば、 './main.html'か '../main.html'であるべきですか？ – user2085143

インポートをバージョン1.4.8に変更しました。

<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>

は、私も他の州を追加しました、そして、すべてが動作する必要があります：あなたが含まれていたバージョンはotherwiseなし$route定義上の問題を抱えているようです。

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

まあ、このバージョンはメインをクリックしても動作しますが、他のリンクをクリックしても動作しません。奇妙なことは、私が行ったのと同じことをやっていることです。私はubuntuでhttp-serverを使用していますが、どこに問題があるのかわかりません;（ –

アップデート：動作しますが、ちょっとした変更をコミットした後にhttpサーバを再起動するのを忘れてしまいました。@ daan.desmedt –

-1

私はuが言及していると思いますコントローラ（MainCtrl） htmlやrouteProviderでも同様です。場所の1つを削除してみてください。チェックhttps://stackoverflow.com/a/27314659/3821223

出典

2017-02-09 10:04:57 shrinathM

AngularJSコントローラは動作しますが、HTMLページをロードしません

答えて

関連する問題