ng-view 将不起作用

Question

我搜索了整个网络，但找不到任何人提供答案。我正在使用原始的 Angular, AngularJS 建立一个简单的前端网站。不幸的是，我无法确定为什么 ng-view 不会显示我的任何 "partials"（其他 html 页面）。任何人都可以借给我第二只眼睛并告诉我我犯了什么简单的错误吗？提前谢谢你。

// This is the app.js file



"use strict";
console.log("App.js is connected!");

// Here, you name your app (which goes into your HTML body) and then 
// insert any Angular dependencies (ngRoute allows you to use the $routeProvider)
var app = angular.module('CashExpress', ['ngRoute']);

// This is the configuraiont function that routes your entire website
app.config(function($routeProvider){
 console.log("We in here!!");
 $routeProvider.
 when('/', {
  templateURL: 'partials/MainMenu.html',
  controller: 'MainMenuCtrl'
 }).
 when('/reports', {
  // Links to the HTML page
  templateURL: "partials/Reports.html",
  // Links to the controller in the controller file
  controller: "ReportsCtrl"
 }).
 when('/StoreStatistics', {
  templateURL: "partials/StoreStatistics.html",
  controller: "StoreStatisticsCtrl"
 }).
 // If an error occurs, the user will be directed to the home page
 otherwise('/');
});

<!-- This is the index -->

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Cash Express, LLC Beta</title>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body ng-app="CashExpress">

 <!-- Store Stats -->
 <section class="hero is-success " ng-include="'partials/StoreStatistics.html'"></section>
 <!-- End of Store Stats -->

 


 <a class="button is-primary is-outlined" ng-href="#!/">Home</a>
 <a class="button is-info is-outlined" ng-href="#!/reports">Reports</a>


 <!-- Dynamic Page -->
 <section class="section">
  <div ng-view></div>
 </section>

 <section ng-include="'partials/MainMenu'"></section>




<!-- Node Modules -->
<script type="text/javascript" src="lib/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/node_modules/angular-route/angular-route.min.js"></script>

<!--  Angular app which is dependent on above scripts -->
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/controllers/MainMenu.js"></script>
<script type="text/javascript" src="app/controllers/StoreStatistics.js"></script>
<script type="text/javascript" src="app/controllers/Reports.js"></script>
</body>
</html>





<!-- This the MainMenu.html page --> 

<!-- Main Menu -->

<div class="container is-fluid">
 <div class="notification">
   This container is <strong>centered</strong> on desktop.
 </div>
 <a class="button is-primary is-outlined" ng-href="/">Home</a>
 <a class="button is-info is-outlined" href="#!/reports">Reports</a>
</div>

<!-- End of Main Menu -->

Answer 1

您的语法过多.. 删除 /

试试这个

<a class="button is-primary is-outlined" href="#/!">Home</a>
<a class="button is-info is-outlined" href="#!reports">Reports</a>

Answer 2

语法没有问题，只要确保模板 url 正确

// This is the app.js file



"use strict";
console.log("App.js is connected!");

// Here, you name your app (which goes into your HTML body) and then 
// insert any Angular dependencies (ngRoute allows you to use the $routeProvider)
var app = angular.module('CashExpress', ['ngRoute']);

// This is the configuraiont function that routes your entire website
app.config(function($routeProvider){
 console.log("We in here!!");
 $routeProvider.
 when('/', {
  template: "<div>MENU</div>"
 }).
 when('/reports', {
  // Links to the HTML page
  template: "<div>REPORTS</div>"
 }).
 when('/StoreStatistics', {
  template: "<div>STORE</div>"
 }).
 // If an error occurs, the user will be directed to the home page
 otherwise('/');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/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>
<!-- This is the index -->

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Cash Express, LLC Beta</title>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body ng-app="CashExpress">

 <!-- Store Stats -->
 <section class="hero is-success " ng-include="'partials/StoreStatistics.html'"></section>
 <!-- End of Store Stats -->

 


 <a class="button is-primary is-outlined" ng-href="#!/">Home</a>
 <a class="button is-info is-outlined" ng-href="#!/reports">Reports</a>


 <!-- Dynamic Page -->
 <section class="section">
  <div ng-view></div>
 </section>

 


<!-- Node Modules -->
<script type="text/javascript" src="lib/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/node_modules/angular-route/angular-route.min.js"></script>

<!--  Angular app which is dependent on above scripts -->
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/controllers/MainMenu.js"></script>
<script type="text/javascript" src="app/controllers/StoreStatistics.js"></script>
<script type="text/javascript" src="app/controllers/Reports.js"></script>
</body>
</html>

ng-view 将不起作用

ng-view will not work

javascript

angularjs

ng-view