无法让路由与 AngularJS 一起使用答案

【问题标题】：Cannot get routing to work with AngularJS无法让路由与 AngularJS 一起使用
【发布时间】：2017-11-15 13:16:27
【问题描述】：

我正在创建一个网络作品集，主页上有一个菜单。当用户单击“视频”时，我希望网站转到 mywebsite.com/video 并转到 video.html。我正在使用 AngularJS，但我不知道我做错了什么。

index.html

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body ng-app="myApp">
<nav class="topnav" id="myTopnav">
    <a href="#portfolio">Portfolio</a>
    <a href="#events">Upcoming Events</a>
    <a href="#cv">CV</a>
    <a href="#video">Video Reel</a>
</nav>
<div class="ng-view"></div>
</body>

main.js

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

app.config(function($routeProvider) {

$routeProvider
    .when(
    '/', {
        redirectTo: '/home'
    })
    .when('/portfolio', {
        templateUrl: 'templates/portfolio.html'
    })
    .when('/events', {
        templateUrl: 'templates/events.html'
    })
    .when('/cv', {
        templateUrl: 'templates/cv.html'
    })
    .when('/video', {
        templateUrl: 'templates/video.html'
    })
    .otherwise({ redirectTo: '/' });
});

【问题讨论】：

标签： javascript jquery html angularjs web

【解决方案1】：

您可以尝试将$locationProvider 服务添加到配置中并更改href 属性

//html
<body ng-app="myApp">
<nav class="topnav" id="myTopnav">
    <a href="#/portfolio">Portfolio</a>
    <a href="#/events">Upcoming Events</a>
    <a href="#/cv">CV</a>
    <a href="#/video">Video Reel</a>
</nav>
<div class="ng-view"></div>
</body>

//js
app.config(['$routeProvider','$locationProvider',
  function($routeProvider,$locationProvider) {

$routeProvider
    .when(
    '/', {
        redirectTo: '/'
    })
    .when('/portfolio', {
        templateUrl: 'templates/portfolio.html'
    })
    .when('/events', {
        templateUrl: 'templates/events.html'
    })
    .when('/cv', {
        templateUrl: 'templates/cv.html'
    })
    .when('/video', {
        templateUrl: 'templates/video.html'
    })
    // removed other routes ... *snip
    .otherwise({
        redirectTo: '/'
    }
);

// enable html5Mode for pushstate ('#'-less URLs)
//$locationProvider.html5Mode(true);
//$locationProvider.hashPrefix('!');
}]);

【讨论】：

没有报错，但是点击“Video Reel”也不起作用，url变了，但是页面不变
你有video.html吗？
我的网址也乱了，当我点击“视频卷轴”时，我得到localhost:8000/#!/#video
让我们continue this discussion in chat.

【解决方案2】：

我认为您应该注入 $locationProvider，因为您正在使用它，但我没有看到注入。

【讨论】：

谢谢，我暂时把 $locationProvider 注释掉了

【解决方案3】：

应该是，

 <a href="#/portfolio">Portfolio</a>
 <a href="#/events">Upcoming Events</a>
 <a href="#/cv">CV</a>
 <a href="#/video">Video Reel</a>

DEMO

【讨论】：

@PankajParkar 在哪里？
我试过了，还是不行。我也得到： angular.js:38 Uncaught Error: [$injector:modulerr]
@Kat 然后检查你的依赖是否正确注入，检查demo
注释掉了导致错误的 $locationProvider，但点击“视频”链接仍然没有任何反应
@Kat 你检查了附件的演示吗