2017-03-24 3 views
0

약 페이지로 라우팅하는 중에 오류가 발생합니다. 홈 페이지가로드되고 있습니다. 나는 새로운 각도입니다. 제발 저를 성공적으로 도와주세요. 여기 코드 링크각도 1의 라우팅 오류

에게 있습니다

enter code herePlunker Link

찾기 코드 여기

<!DOCTYPE html> 

    <head> 
     <title>Title</title> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css"> 
     <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
     <link rel="stylesheet" href="css/main.css"> 

    </head> 
    <body ng-app="demo"> 
    <div ng-view></div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script> 


    <script src="js/main.js"></script> 

    </body> 
    </html> 

JS가

// 코드가 여기에

0,123,436 간다 index.html을
+0

* *? 여기에 'enter code here'로 우회하는 것이 아닙니다. – Mistalis

+0

나는 그것이 효과가있을 것이라고 생각했다. 이제 문제의 코드를 찾으십시오. –

+0

* 정확하게 * 오류로보고 있습니까? '약 페이지로 라우팅하는 중에 오류가 발생했습니다'라고 말하면 문제에 대한 설명이 충분하지 않습니다. 기대하지 않는 것은 무엇입니까? 콘솔에 어떤 오류 메시지가 있습니까? 무슨 일이 일어나야합니까? 이 정보를 포함 시키려면 질문을 편집하십시오. 다음을 참조하십시오 : [여기에 대해 나는 어떤 주제를 물을 수 있습니까?] (http://stackoverflow.com/help/on-topic), [ask], [mcve]. – Makyen

답변

0

참조 번호를 <script src="main.js"></script>으로 수정하고 partial/home.html을 작성하십시오. 그것은 그 때 작동 할 것이다.

브라우저 개발자 도구 (F12)를 사용하면 실제 오류를 쉽게 찾을 수 있습니다.

0

플 런커에는 몇 가지 문제가 있습니다.

  1. 플 런커 버전에서 생성 된 부분은 없습니다. partials/about.html 및 partials/home.html 파일을 만들어야합니다.
  2. css/main.css. 루트 폴더에 style.css를 만들었지 만 index.html에서 css/main.css를 참조했습니다. 3. main.js의 경로가 잘못되었습니다. 파일은 루트 폴더에 있으며 js/main.js라고합니다. <script src="main.js"></script>
  3. 부분품에서 경로를 호출해야합니다.
  4. aboutController에서 about 메서드를 만들었습니다. 하지만 홈 컨트롤러에 있어야합니다. 컨트롤러 정보는 about.html 페이지로 라우팅 할 때만 인스턴스화됩니다.
  5. main.js에 정의되지 않은 '/ home'URL을 참조했습니다.

다음과 같은 작업 플러 커를 찾아보십시오.

https://plnkr.co/edit/APKWvpuTfivua5CovRp7?p=preview

// Code goes here 

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

app.config(['$routeProvider', 
    function($routeProvider) { 
     $routeProvider. 
     when('/', { 
      templateUrl: 'home.html', 
      controller: 'homeController' 
     }). 
     when('/about', { 
      templateUrl: 'about.html', 
      controller: 'aboutController' 
     }). 
     when('/login', { 
      templateUrl: 'login.html', 
      controller: 'loginController' 
     }). 
     otherwise({ 
      redirectTo: 'partials/404.html' 
     }); 
    } 
]); 


app.controller('homeController', function($scope, $http, $location){ 
$scope.login= function() { 
     $location.path("/login"); 

    } 
    $scope.about= function() { 
     $location.path("/about"); 

    } 
}); 

app.controller('aboutController', function($scope, $http) { 
    $scope.backToHome = function() { 
    window.history.back(); 
    } 
}); 
app.controller('loginController', function($scope, $http) { 
    $scope.backToHome = function() { 
    window.history.back(); 
    } 
}); 

index.html을 : 당신은 단지 당신이 **뿐만 아니라 귀하의 질문에 코드를 게시 말하는 Plunker 링크를 게시 할 때 경고를 표시하지 않았나요

<!DOCTYPE html> 
<head> 
    <title>Title</title> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css"> 
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 

</head> 
<body ng-app="demo"> 
<div ng-view></div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script> 

<script src="main.js"></script> 

</body> 
</html> 
+0

이 코드는 문제를 해결할 수 있지만 (설명 포함) (http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) 방법으로 왜이 문제를 해결하면 실제로 도움이 될 수 있습니까? 귀하의 게시물의 품질을 향상시킬 수 있습니다. 지금 묻는 사람뿐만 아니라 앞으로 독자에게 질문에 답하고 있다는 것을 기억하십시오!설명을 추가하여 답을 편집하고 어떤 제한 및 가정이 적용되는지 표시하십시오. – Makyen

+0

예. 적절한 설명으로 답을 편집했습니다. 희망이 도움이됩니다. –