Question

我在整个网络上搜索过，但找不到任何有答案的人。我正在使用原始的Angular，AngularJS建立一个简单的前端网站。不幸的是，我无法确定为什么ng-view不会显示任何“部分”（其他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

语法没有问题，只需确保模板网址正确

即可

// 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无效

2 个答案: