路由适用于除一页之外的所有路由

时间:2016-03-22 21:57:23

标签: angularjs

我将头发拉出来 - 我正在为SPA设置路由,它对于main页面和我的search页面非常有用。但是,对于我的services页面,它根本不起作用,它只显示任何内容。我的网址设置正确,页面肯定是在pages / services.html。什么给出了?

同样,它适用于'/''/searchquery'路线,但不适用于'/servicedependencies'

以下是我的文件:



var impact_analysis = angular.module('impact_analysis', ['ngRoute']);

impact_analysis.config(['$routeProvider', function($routeProvider) {
      $routeProvider
            .when('/', {
                  templateUrl: 'pages/main.html',
                  controller: 'mainController'
            })
            .when('/servicedependencies', {
                  templateURL: 'pages/services.html',
                  controller: 'serviceController'
            })
            .when('/searchquery', {
                  templateUrl: 'pages/search.html',
                  controller: 'mainController'
            });

}]);

impact_analysis.controller('mainController', ['$scope', '$http', function ($scope, $http) {

      $scope.search_string = '';
      $scope.search_type = '';
      $scope.results = [];
      $scope.clicked = 0;
      $scope.search = function() {
            var request = {
                  method: 'POST',
                  url: *********,
                  data: JSON.stringify({search_string: $scope.search_string, search_type: $scope.search_type}),
                  headers: {'Content-Type': 'application/json'}
            };

            $http(request).then(function(response) {
                  $scope.results=response.data;
                  $scope.clicked = 1;
            });

      };
}]);

impact_analysis.controller('serviceController', ['$scope', '$http', function ($scope, $http) {
      $scope.clicked = 0;
      $scope.results = [];
      $scope.service_report = function () {
            var request = {
                  method: 'GET',
                  url: **************,
            };

            $http(request).then(function(response) {
                  $scope.clicked = 1;
                  $scope.results=response.data;
            });

      };
}]);

<!DOCTYPE html>
<html>
<head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
      <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
      <link href="index.css" rel="stylesheet">
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular-route.min.js"></script>
      <script src="app.js"></script>
</head>
<body ng-app="impact_analysis">
      <!-- START TOP NAVBAR -->
      <header>
            <nav class="navbar navbar-default">
                  <div class="container-fluid">
                        <div class="navbar-header">
                              <a class="navbar-brand" style="color:#B9A3E3" href="index.html">Message Broker Impact Analysis</a>
                        </div>
                        <ul class="nav navbar-nav navbar-right">
                              <li><a class="fa fa-home bigicon" href="#/"></a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                              <li><a href="#/searchquery">Search String Query</a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                              <li><a href="#/servicedependencies">Service Dependency Report</a></li>
                        </ul>
                  </div>
            </nav>
      </header>
      <!-- END TOP NAVBAR -->

      <div class="container-fluid">
            <div ng-view></div>
      </div>
</body>
</html>
&#13;
&#13;
&#13;

&#13;
&#13;
<div class="row">
      <div class="col-md-12">
            <div class="page-header">
                  <h2>Service Dependency Report</h2>
            </div>
            <button type="button" class="btn btn-warning btn-lg" ng-click="service_report()">Generate</button>
            <table class="table-striped table-bordered table-hover" ng-show="results.length != 0" >
                  <thead>
                        <tr>
                              <th>Flow</th>
                              <th>Service Dependencies</th>
                        </tr>
                  </thead>
                  <tr ng-repeat="msgflow in results">
                        <td style="font-size: 1.5em">{{ msgflow.name }}</td>
                        <td ng-repeat="service in msgflow.services">{{ service }}</td>
                  </tr>
            </table>
      </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:5)

你有拼写错误?尝试使用模板 Url 而不是模板网址

.when('/servicedependencies', {
         templateUrl: 'pages/services.html',
         controller: 'serviceController'
    })