Question

我正在尝试使用AngularJS 1.0的应用程序，但我遇到了路由问题。这条路线根本不起作用。我无法在ng-view内看到我的模板显示。我的代码如下所示。的package.json

"main": "server.js",
    "dependencies": {
        "angular": "^1.4.3",
        "angular-route": "1.6.10",
        "body-parser": "latest",
        "ejs": "latest",
        "express": "latest",
        "fabric-ca-client": "^1.0.2",
        "fabric-client": "^1.0.2",
        "grpc": "1.11.0"
    }

app.js

'use strict';

var app = angular.module('application', ["ngRoute"]);

app.config(function($routeProvider){
    $routeProvider
    .when('/', {
        templateUrl: 'client/index.html'
    })
    .when('/vault', {
      templateUrl: 'client/vault.html'
    })
    .when('/store', {
        templateUrl: 'client/store.html'
    })
    .when('/til', {
    templateUrl: 'client/til.html'
    })
    .when('/order', {
    templateUrl: 'client/order.html'
    })
  });

的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Demo Application</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- require jquery and bootstrap scripts -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  </head>
  <body ng-app="application" ng-controller="appController">
    <header>
      <div id="left_header">Demo Application</div>
    </header>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#store">Store</a></li>
            <li><a href="#about">About</a></li>
           </ul>
        </div>
      </nav>
      <div ng-view></div> 
</html>

还有两个商店页面，其中只有一个标签。

我应该能够看到视图部分中的更改，即“这是关于页面”＆＃39;但它没有显示出来。

我指的是URL

任何帮助都会得到满足。

更新-1 添加了角度路由包但仍无法正常工作。

获取以下错误：

" Error: [$injector:modulerr] http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=application&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1"

更新-2 整个控制台输出，显示一些错误，但不了解它。它也有几个警告。 https://pastebin.com/j06ku3yG

更新-3 我没有将用于angular-route的缩小的js文件添加到我的html中，这就是我遇到问题的原因。此外，html页面中现有的角度脚本也存在版本不匹配。

我还纠正了路线的一些问题，在此之后我面临与递归相关的问题（可能在同一页面中看到多个页面）必须对路径进行更改。

谢谢大家的帮助:)

Answer 1

我已经修改了一些代码，为您提供应用的基本工作演示。路由需要1.2 {+ 1}个AngularJS版本的angular-route.js脚本。对于这两个脚本，其版本必须匹配。 我决定使用1.6.5 。我还用ui.bootstrap - angularjs版本替换了bootstrap和jquery。

这是一个有效的演示：

＆＃13;

/* Use `ui.bootstrap` module instead of jQuery + Bootstrap */
var app = angular.module('application', ["ngRoute", "ui.bootstrap"]);
app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'client/index.html'
    })
    .when('/about', {
      templateUrl: 'client/about.html'
    })
    .when('/store', {
      templateUrl: 'client/store.html'
    })
});
app.controller('appController', function($scope, $location) {
  $scope.isActive = function(path) {
    return path === $location.path();
  }
});

＆＃13;

<!DOCTYPE html>
<html>
<!-- Matching angular.js and angular-route.js versions -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body>

  <div ng-app="application" ng-controller="appController">

    <header ng-init="isNavCollapsed=true">
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
          <span class="glyphicon glyphicon-menu-hamburger"></span>
          </button>
          </div>
          <div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
            <ul class="nav navbar-nav navbar-left">
              <li ng-class="{ active: isActive('/')}"><a href="#!">Home</a></li>
              <li ng-class="{ active: isActive('/store')}"><a href="#!store">Store</a></li>
              <li ng-class="{ active: isActive('/about')}"><a href="#!about">About</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <div ng-view></div>


    <!-- Separate files -->
    <script type="text/ng-template" id="client/index.html">
      index
    </script>
    <script type="text/ng-template" id="client/about.html">
      about
    </script>
    <script type="text/ng-template" id="client/store.html">
      store
    </script>

  </div>

</body>

</html>

＆＃13;

Answer 2

首先，您仍然需要从angular-route.js链接NgRoute。

其次，要链接模板，请使用href="#!store"代替href="#store"

这是使用angularjs 1.6.9

的工作示例

'use strict';

var app = angular.module('application', ["ngRoute"]);

app.config(function($routeProvider){
    $routeProvider
    .when('/', {
        templateUrl: 'home.html'
    })
    .when('/store', {
      templateUrl: 'store.html'
    })
    .when('/about', {
      templateUrl: 'about.html'
    })
  });

<!-- require jquery and bootstrap scripts -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
    

    
  <div ng-app="application" >
  
  <script type="text/ng-template" id="home.html">
    <div class="view">
        <h2>home</h2>
    </div>
</script>
<script type="text/ng-template" id="store.html">
    <div class="view">
        <h2>store</h2>
    </div>
</script>
<script type="text/ng-template" id="about.html">
    <div class="view">
        <h2>about</h2>
    </div>
</script>
    <header>
      <div id="left_header">Demo Application</div>
    </header>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#!store">Store</a></li>
            <li><a href="#!about">About</a></li>
           </ul>
        </div>
      </nav>
      <div ng-view></div> 
      </div>

AngularJS 1.0路由不起作用

2 个答案: