Question

这是我的代码。

home.html的

 <!DOCTYPE HTML>
 <html xmlns:th="http://www.thymeleaf.org" ng-app="myApp">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <link rel="stylesheet" type="text/css"
    href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />



  <script
   src="https://code.jquery.com/jquery-3.0.0.js"
  integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo="
   crossorigin="anonymous"></script>

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4      /angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
</head>
<body ng-controller="myCtrl">



<div class="container">

    <nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
  <a class="navbar-brand" href="#">Spring Boot Test</a>
</div>
<ul class="nav navbar-nav">
  <li class="active"><a ng-click="">Home</a></li>
  <li><a href="javascript:void(0)" data-ng-click="about()">About</a></li>
  <li><a href="javascript:void(0)" data-ng-click="contact()">Contact</a>   </li>
</ul>


  </div>
 </nav>

 <div data-ng-view = ""></div>



</div>
<!-- /.container -->

<script type="text/javascript"
    src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

脚本

<script type="text/javascript">
var app = angular.module('myApp',[]);


app.config(['$locationProvider', '$routeProvider',function     config($locationProvider, $routeProvider) {
          $routeProvider.
            when('/about', {
              templateUrl: 'about.html',
              controller: 'aboutCtrl'
            });


        }
      ]);

    app.controller('aboutCtrl',function($scope){
        console.log("aknk");
    });





 app.controller('myCtrl',['$scope','$location','$window',    function($scope,$location,$window){





$scope.about = function()
{
    console.log("hello");
    /*$location.path('about');*/
    $window.location.assign('/about');
}

$scope.contact = function()
{
    console.log("hello");
    $location.path('/contact');
}

}]);


</script>

我在做什么？ about和contact上的链接根本无法使用此代码，如果我删除了$ routeProvider代码/ about调用已发送到服务器。实际上我想要的是获取ng-view div中的about.html，以便我可以为所有页面设置公共标题。

Answer 1

您的配置应如下所示。

app.config(function($routeProvider) {
    $routeProvider
        .when('/about', {
            templateUrl: "views/view-queue.html",
            caseInsensitiveMatch: true,
        })
        .otherwise({
            templateUrl: "404.html"
        })
});

以上代码可以使用。

Angular $ routeProvider打破了标签

1 个答案: