無法使用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工作

回答

相關問題