这是我的代码。我有很多局部模板,但是我的角度路由不起作用,并且控制台中没有错误。有人可以告诉我我犯的错误,谢谢。
一切正常,直到我尝试添加路由。我读到Angularjs 1.2+版需要'ngRoute'作为依赖项(我正在使用1.2.16版)。我添加了它,但是仍然不起作用。以下是我的代码。
index.html(主页)
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Angular Library -->
<script type="text/javascript" src="library/angular.js"></script>
<script type="text/javascript" src="library/angular-route.js"></script>
<script type="text/javascript" src="library/angular-animate.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Custom JS -->
<script type="text/javascript" src="js/animate.js"></script>
</head>
<body ng-app="app">
<div id="main">
<div class=" amber">
<div>
<i class="fa fa-facebook-f social" style="font-size:24px; cursor:pointer; padding:10px"></i>
<i class="fa fa-instagram" style="font-size:24px; cursor:pointer; padding:10px"></i>
<i class="fa fa-twitter" style="font-size:24px; cursor:pointer"></i>
</div>
<div class="pullLeft container">
<a href="#/home">HOME</a>
<a href="#/menu">MENU</a>
<a href="#/our_vision">POPULAR PRODUCTS</a>
<a href="#/contact_us">COMBOKITS</a>
<a>OUR VISION</a>
<a>CONTACT</a>
</div>
</div>
<div ng-view>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
script.js
var app = angular.module('app',['ngRoute','ngAnimate']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: '../Templates/home.html'
})
.when('/home',{
templateUrl: '../Templates/home.html'
})
.when('/menu',{
templateUrl: '../Templates/menu.html'
})
.when('/our_vision',{
templateUrl: '../Templates/our_vision.html'
})
.when('/contact_us',{
templateUrl: '../Templates/contact_us.html'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('TestCtrl',function TestCtrl() {
var self = this;
this.showBoxOne = false;
this.showBoxTwo = false;
this.showBoxThree = false;
this.showBoxFour = false;
});
@Aria,我尝试过您的样品,似乎工作正常。您确保在服务器端您的文件夹结构正确并且文件可用。只是怀疑模板文件路径可能存在问题,如果在那里出现任何错误,是否还可以检查服务器日志。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句