AngularJS ng-view가 라우트 된 페이지를 표시하지 않음

ng-view가 페이지를 표시하지 않고 라우팅이 작동하지 않지만 브라우저 -console/network에서 angular-route.min.js를로드 중입니다. 파일 구조는 폴더 -> css, fonts, js, pages입니다. 루트에 app.js와 index.html 인 2 개의 파일이 있고 페이지 폴더 안에는 ng-view 부분에 추가 될 것으로 예상되는 main.html과 second.html 인 2 개의 파일이 있지만로드가 없습니다. .AngularJS ng-view가 라우트 된 페이지를 표시하지 않음

main.html의 콘텐츠에 대한 링크를 클릭하면이 http://127.0.0.1/main으로 돌아 오면 완전히/페이지의 내용을로드, 업데이트 된 코드 첫 번째 페이지를

있어 폴더를 무시하지만, 두 번째는 '아무튼 콘솔에 오류가 없으므로 잘못된 href 경로가 있다고 가정합니다.

헤더 스크립트

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script> 
<script src="app.js"></script>

HTML

<div class="row"> 
    <a href="#">Main Content</a> 
    <a href="#/second">Second Content</a> 
    </div> 

    <div class="row"> 
     <div class="col-md-12"> 
     <div ng-view></div> 
     </div> 
    </div> 

    <hr> 

    </div>

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

myApp.config(function($routeProvider) { 
    $routeProvider 
    .when('/', { 
     templateURL: 'pages/main.html', 
     controller: 'mainController' 
    }) 
    .when('/second', { 
     templateURL: 'pages/second.html', 
     controller: 'secondController' 
    }) 
}); 

myApp.controller('mainController', ['$scope', function($scope) { 



}]); 

myApp.controller('secondController', ['$scope', '$log', function($scope, $log) { 



}]);

출처

2017-02-05 Nicholas Ritson

와 함께 작동합니다? – Thierry

당신은'html5Mode'을 구현하지 않았으므로 URL에'# /'를 사용해야합니다. – charlietfl

index.html에'ng-app = "myApp"를 추가 했습니까? – Merlin

templateURL 대신 templateUrl을 사용하십시오.

귀하의 html로 #/main을 사용하십시오.

는 견인 NG-전망

JS 코드를 사용하지 마십시오

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

myApp.config(function($routeProvider) { 
    $routeProvider 
    .when('/main', { 
     templateUrl: 'main.html', 
     controller: 'mainController' 
    }) 
    .when('/second', { 
     templateUrl: 'second.html', 
     controller: 'secondController' 
    }) 
}); 

myApp.controller('mainController', ['$scope', function($scope) { 
    $scope.name = "world" 

}]); 

myApp.controller('secondController', ['$scope', '$log', function($scope, $log) { 


}]);

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
    <script src="//code.angularjs.org/1.4.0/angular-route.min.js"></script> 

    <script src="app.js"></script> 
    </head> 

    <body ng-controller="mainController"> 
    <p>Hello {{name}}!</p> 

    <div class="row"> 
    <a href="#/main">Main Content</a> 
    <a href="#/second">Second Content</a> 
    </div> 

    <div class="row"> 
     <div class="col-md-12"> 
     <div ng-view></div> 
     </div> 
    </div> 

    <hr> 

    </body> 

</html>

하는 노력 HTML 코드 plunker

편집

각도 버전 1.4.0을 사용하고 있습니다. 1.6.1 앵글을 사용하고 싶다면 그들은 $ location hash-bang URL에 사용 된 기본 해시 프리픽스를 변경했습니다. 이제는 ('') 대신 ('!')입니다.

그래서 설정 단계에서 이것을 추가해야합니다. 당신이 당신의 index.html을 2 NG-보기를해야합니까 왜 지금

myApp.config(['$locationProvider', function($locationProvider) { 
    $locationProvider.hashPrefix(''); 
}]);

는 각 1.6.1뿐만 아니라

출처

2017-02-05 18:30:07

이 복사를 시도하고 귀하의 것과 일치하도록 업데이트했는데, 여전히로드가 필요하지 않으므로 일반적으로 기본 재 작성 스크립트가 필요하지 않습니다. https://plnkr.co/edit/bOkCnhgD1GaNF3kbJaM7 –

@NicholasRitson 추가하지 않았기 때문에 코드가 작동하지 않습니다. $ locationProvider.hashPrefix (''); 내 편집에서 언급 한 것처럼 설정 단계에서 그냥 추가하면 작동합니다. 지금 –

덕분입니다. 튜토리얼 내가 udemy에서 다음은 내가 생각하기 때문에 이전 버전이 덮여 추가되지 않습니다 덮여있다 –

.when('/main', { 
    templateURL: 'pages/main.html', 
    controller: 'mainController' 
})

또는 사용 메인 페이지에 액세스하기 위해 URL :,http://127.0.0.1/ config에서 main에 대한 라우팅을 설정하지 않았으므로 작동해야합니다.

출처

2017-02-05 18:18:30 shiva

이것은 많은 이슈 중 하나 일뿐입니다. – charlietfl

AngularJS ng-view가 라우트 된 페이지를 표시하지 않음

답변

관련 문제