无法使用AngularJS工作

我正在创建Web组合，主页面有一个菜单。当用户点击“视频”时，我希望网站转到mywebsite.com/video并转到video.html。我正在使用AngularJS，我无法弄清楚我做错了什么。无法使用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: '/' }); 
});

来源

2017-06-13 Kat

可以尝试添加$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('!'); 
}]);

来源

2017-06-13 16:52:35 hasan

我得到的错误未捕获的错误：[$ location：nobase] – Kat

我已更新我的回答 – hasan

没有得到错误，但点击'Video Reel'也不起作用，网址更改，但网页保持不变 – Kat

它应该是，

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

DEMO

来源

2017-06-13 16:30:01 Sajeetharan

为什么'＃portfolio'改变'＃！/ portfolio' ??? –

@PankajParkar在哪里？ – Sajeetharan

我试过了，它仍然无法正常工作。我也越来越：angular.js：38未捕获的错误：[$ injector：modulerr] – Kat

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

来源

2017-06-13 16:37:12 Helia

谢谢你，我注释了$ locationProvider现在 – Kat

无法使用AngularJS工作

回答

相关问题