Question

我有三个视图：主页第二个视图和第三个视图。没有错误，无论何时我使用链接进行导航，它都是空白的。我已经尝试了href并在路由模式字符串中尝试了不同的东西，但我似乎无法让它工作。我在这里和网上环顾四周，并没有遇到任何解决方案。任何帮助将不胜感激。

我的代码：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <script type='text/javascript' id='lt_ws' src='http://localhost:5678/socket.io/lighttable/ws.js'></script>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>

  <script type="text/javascript" src="https://code.angularjs.org/1.5.1/angular.min.js"></script>
  <script type="text/javascript" src="https://code.angularjs.org/1.3.0/angular-route.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>
<body>
  <div>
    <a href="#/">home</a>
    <a href="#/view2">main</a>
    <a href="#/view3">no</a>
  </div>
  <div class=container>
    <div class=ng-view>
  </div>
  </div>
</body>
</html>

js：

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

myApp.config(function ($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl: 'pages/area-code.html',
    controller: 'mainController'
   })

  .when( '/view2', {
    templateUrl: 'pages/breath.html',
    controller: 'secondController'
  })

  .when( '/view3', {
        templateUrl: 'pages/main.html',
        controller: 'secondController'
        });

});


myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter){

  $scope.characters = 3;


}]);



  myApp.controller('secondController', ['$scope', '$filter', function($scope, $filter){

  }]);

plunkr

Answer 1

你必须改变你的脚本src：

 <script type="text/javascript" src="script.js"></script>

并更改您的templateUrl地址：

 $routeProvider

  .when('/', {
    templateUrl: 'area-code.html',
    controller: 'mainController'
   })

  .when( '/view2', {
    templateUrl: 'breath.html',
    controller: 'secondController'
  })

  .when( '/view3', {
        templateUrl: 'main.html',
        controller: 'secondController'
        });

});

更新：要将数据绑定到视图，您必须在breath.html和main.html

中使用ng控制器

Answer 2

你的掠夺者有两个问题，

（i）需要加载script.js而不是app.js

（ii）您的模板路径错误！从每条路径中删除页面。

myApp.config(function ($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl: 'area-code.html',
    controller: 'mainController'
   })

  .when( '/view2', {
    templateUrl: 'area-code.html',
    controller: 'secondController'
  })

  .when( '/view3', {
        templateUrl: 'main.html',
        controller: 'secondController'
        });

});

WORKING DEMO

模板未加载角度路由

2 个答案: