AngularJS 컨트롤러가 작동하지만 html 페이지를로드하지 않습니다

제 1 각도 프로젝트를 생성하는 동안 내 컨트롤러에 예기치 않은 문제가 있습니다 : 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이 있나요 :

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', }) }])

작동 버전을 참조하십시오? –

경로가 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 정의에 문제가있는 것 같다. https://plnkr.co/edit/ebB3GAnoDSunsHK4bpme

출처

2017-02-15 08:38:04

글쎄,이 버전은 메인을 클릭하면 작동하지만 다른 링크를 클릭해도 여전히 작동하지 않습니다. 이상한 것은 내가했던 것처럼 똑같은 일을하고 메인에서 클릭 할 때만 콘솔에 로그를 보여줍니다. 나는 우분투에서 http-server를 사용하는데 어디서 문제가 생길지 모른다. ( –

업데이트 : 약간의 변경 사항을 커밋 한 후 http 서버를 재실행하는 것을 잊어 버렸다. @ daan.desmedt에게 도움을 주신 모든 분들께 감사드립니다. –

-1

내가 유 언급 한 것 같아요 컨트롤러 (MainCtrl) html과 routeProvider에서도 마찬가지입니다. 장소 중 하나를 제거하십시오. 확인 https://stackoverflow.com/a/27314659/3821223

출처

2017-02-09 10:04:57 shrinathM

AngularJS 컨트롤러가 작동하지만 html 페이지를로드하지 않습니다

답변

관련 문제