Question

这是我的代码。我有很多局部模板，但我的角度路由不起作用，并且控制台中没有错误。任何人都告诉我我正在制作的错误并提前致谢。

在我尝试添加路由之前，一切正常。我读到Angularjs版本1.2+需要＆＃39; ngRoute＆＃39;作为依赖（我使用的是版本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;

});

Answer 1

@Aria，我试过你的样本，似乎工作正常。您确定在服务器端您的文件夹结构是正确的并且文件可用。只是怀疑模板文件路径可能有问题，如果你在那里遇到任何错误，你也可以检查服务器日志。

Angular JS路由不起作用，并且控制台中没有错误

1 个答案: