angularjs 1.6.0 (현재 최신) 경로가 작동하지 않음

98

Stackoverflow에서이 질문을 볼 것으로 예상했지만 그렇지 않았습니다. 분명히 나에게 매우 흔한 것처럼 보이는이 문제를 가진 유일한 사람은 나입니다.

작업중인 기본 프로젝트가 있지만 지금까지 수행 한 모든 작업이 옳은 것처럼 보이지만 경로가 작동하지 않는 것 같습니다.

내 index.html파일 에이 html 조각이 있습니다.

<html>
<head ng-app="myApp"> 
    <title>New project</title>
    <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>

    <script src="app.js"></script>
</head>
<body>
    <a href="#/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
</html>

그리고 여기 내 app.js:

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


app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/add-quote', {
            templateUrl: 'views/add_quote.html',
            controller: 'QuoteCtrl'
        })
        .otherwise({ redirectTo: '/' });
}]);

이제 페이지를 방문하면 다음과 같은 URL이 표시됩니다.

http : // localhost : 8000 / admin #! /

Add quote버튼을 클릭하면 다음과 같이 표시됩니다 .

http : // localhost : 8000 / admin #! / # % 2Fadd-quote

여기서 문제는 무엇일까요? 도와 줘서 고마워

— 아와 멜바 인
소스

1

아마도 관련이 있습니까? github.com/angular/angular.js/commit/...

— Claies

172

#!href에서 hashbang 을 사용하기 만하면 됩니다.

 <a href="#!/add-quote">Add Quote</a>

aa077e8 로 인해 $ location 해시 뱅 URL에 사용되는 기본 해시 프리픽스가 빈 문자열 ( '')에서 뱅 ( '!')으로 변경되었습니다 .

실제로 해시 접두사를 사용하지 않으려면 응용 프로그램에 구성 블록을 추가하여 이전 동작을 복원 할 수 있습니다.

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

자세한 내용은

내 말을 타서 미안하지만 ..이게 어떻게 풀렸어? 이것은 방대하고 파괴적인 버그입니다. — @MiloTheGreat

참조 사양이 이미 공식적으로 지원 중단되었으므로 # 14202의 주요 변경 사항을 되돌려 야합니다. # 15715

피드백이 없기 때문에이 문제를 종료하겠습니다. 새로운 피드백을 제공 할 수 있으면 언제든지이 문제를 다시여십시오.

— https://github.com/angular/angular.js/issues/15715#issuecomment-281785369

— Georgeawg
소스

16

내 말을 타서 미안하지만 ..이게 어떻게 풀렸어? 이것은 방대하고 파괴적인 버그입니다.

— MiloTheGreat

2

- 당신의 AngularJS와 팀에 의견을 남겨 주시기 @MiloTheGreat github.com/angular/angular.js/issues/15715

— georgeawg

39

간단히 포함 !로 href:

<body>
    <a href="#!/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>

— v-tec
소스

7

라우팅에 대한 더 이상 사용되지 않는 자습서를 따라 시간을 낭비했습니다. .. 내가 놓친 것은 '!'뿐이었습니다. 감사합니다!

— Philippe Maes

해시와 해시 방에 대한 모든 점포 mumpo와 함께 나는 "!" 참조없이 나타나는 불법 문자 인 것 같습니다. 그리고 내가 그것을 받아들이고 그것이 존재한다는 것을 인정한다면 문제는 해결되었을 것입니다.

— Mohammed Joraid

나도 ... 이것은 나를 미치게 만들었다!

— VictorEspina

6

1.6.4에서 작동하도록 라우팅을 얻을 수 없었기 때문에 앵귤러 1.5.11을 사용하기로 결정했고 라우팅이 잘 작동하지만 when (..) 함수에서 후행 "/"로 모든 라우팅을 정의해야했습니다.

이전 버전의 앵귤러를 고수하는 것이 선택 사항이라면 신경을 구할 수 있으므로 고려하십시오 ...

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

app.config(function($routeProvider) {
$routeProvider
.when("/layoutandviewbox", {
    templateUrl : "views/layout-and-viewbox.html"
})
.when("/basicshapes", {
    templateUrl : "views/basic-shapes.html"
})
.when("/advancedshapes", {
    templateUrl : "views/advanced-shapes.html"
})
.when("/groups", {
    templateUrl : "views/groups.html"
})
.when("/transformations", {
    templateUrl : "views/transformations.html"
})
.when("/effects", {
    templateUrl : "views/effects.html"
})
.when("/", {
    templateUrl : "views/basic-shapes.html"
});
});

— Lixonn
소스

1.5를 유지하면 Angular 2 / 3 / 4 / 5 / etc로 업그레이드하는 데 어떤 영향을 줍니까? ngUpgrade는 1.5에서 2+로 작동합니까? ngUpgrade가 우리에게 적합하지 않을 수 있다고 생각합니다. (예,이 댓글은 대부분 보이지 않고 바람에 울부 짖습니다.)

— eflat

0

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');
  $routeProvider
    .when('/add-quote', {
      templateUrl: 'views/add_quote.html',
      controller: 'QuoteCtrl'
    })
    .otherwise({ redirectTo: '/' });
}]);

— Pranav VR
소스

0

이것을 시도하면 도움이 될 수 있습니다 ...

HTML 또는 페이지보기

 <body>
       <a href="#/Home.html">Home</a>
       <div ng-view></div>
 </body>

스크립트 페이지에서

var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/Home', {
      templateUrl: 'FolderName/Home.html',
      controller: 'homeCtr'
    })
      $locationProvider.hashPrefix('');
     });

— 마니 칸탄
소스