Question

我正在尝试使用AngularJS设置单页应用程序。我正在使用Node with Express，我有一个apache服务器用作中间件，如果这很重要的话。我的index.html页面加载良好，但在ng-view中没有加载视图。

这是我的代码

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" type="image/png" href="public/img/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="public/img/favicon-16x16.png" sizes="16x16">

    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="public/css/style.css">
    <link rel="stylesheet" type="text/css" href="public/css/font-awesome-4.7.0/css/font-awesome.min.css">

    <script type="text/javascript" src="vendor/angularjs/1.4.7/js/angular.min.js"></script>
    <script type="text/javascript" src="vendor/angularjs/1.4.7/js/angular-base64.min.js"></script>
    <script type="text/javascript" src="vendor/angularjs/1.4.7/js/angular-sanitize.js"></script>
    <script type="text/javascript" src="vendor/lodash.js/4.16.4/js/lodash.min.js"></script>
    <script type="text/javascript" src="vendor/jquery/1.11.3/js/jquery.min.js"></script>
    <script type="text/javascript" src="vendor/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>

    <script>
      var myApp = angular.module('lispCDpoc', ['ngRoute']);

      myApp.config(function($routeProvider, $locationProvider) {
        console.log('oui');
        $locationProvider.hashPrefix('');
        $routeProvider.
          when('/', {
            templateUrl: 'pages/test.html',
            controller: 'testController'
          }).
          otherwise({
            redirectTo: '/'
          });
      });

      myApp.controller('testController', function($scope) {
        $scope.message = 'Message for my test page';
      });
    </script>

    <meta charset="utf-8">
    <title>LISP Monitoring POC</title>
  </head>

  <body>
    <div>
      <nav class="navbar navbar-default navbar-custom">
        <div class="navbar-header">
          <a class="navbar-brand" href="#"><img                        src="public/img/sg_logo_small.png" class="sg-logo"></a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#dashboard">Dashboard</a></li>
          <li><a href="#releasenote">Release Note</a></li>
        </ul>
        <div>
            <img class="logo-lisp" src="public/img/lisp2.png">
        </div>
      </nav>
      <div ng-view></div>
    </div>
  </body>
  </html>

我找不到我的index.html页面加载的原因，但它没有插入test.html代码

<div>
    <h1>Test Page</h1>
    <p>{{message}}</p>
</div>

Answer 1

不要忘记在主模板中声明您的应用模块。

  <body ng-app="lispCDpoc">
    <div>
      <nav class="navbar navbar-default navbar-custom">
        <div class="navbar-header">
          <a class="navbar-brand" href="#"><img                        src="public/img/sg_logo_small.png" class="sg-logo"></a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#dashboard">Dashboard</a></li>
          <li><a href="#releasenote">Release Note</a></li>
        </ul>
        <div>
            <img class="logo-lisp" src="public/img/lisp2.png">
        </div>
      </nav>
      <div ng-view></div>
    </div>
  </body>

这是一个有效的Plunkr：https://plnkr.co/edit/HlYxdCsLzfCNCY1dq7vp?p=preview

AngularJS无法加载ng-view inti index.html

1 个答案: