gpt4 book ai didi

javascript - 无法让路由与 AngularJS 一起工作

转载 作者:行者123 更新时间:2023-11-30 11:35:40 25 4
gpt4 key购买 nike

我正在创建一个网络作品集,主页上有一个菜单。当用户单击“视频”时,我希望网站转到 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>

主要.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: '/' });
});

最佳答案

你能否尝试将$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('!');
}]);

关于javascript - 无法让路由与 AngularJS 一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44526937/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com