angular 路由中未加载模板

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

你的 plunker 有两个问题，

(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

angular 路由中未加载模板

templates not loading in angular routing

routing

router

routes

angularjs

ngroute