时间戳

首页 > 解决方案 > AngularJS：ng-view 指令不起作用

angularjs - AngularJS：ng-view 指令不起作用

问题描述

我现在正在学习 AngularJS，我正在做一个简单的 Web 应用程序，其中涉及使用 ng-view 指令。但是当我尝试运行我的代码时，我的 Chrome 浏览器上什么也没有出现，好像 ng-view 没有真正工作。我的 index.html 文件如下所示：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Route Sample</title>
	<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
	<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
	<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body ng-app="routeApp">
	<h1>Sample Routing | ng-view directive</h1>

	<div class="container">
		<ul>
			<li><a href="#Angular">Angular JS Topics</a></li>
			<li><a href="#Node">Node JS Topics</a></li>
		</ul>
	</div>
	<div class="container-ngView">
		<div ng-view></div>
	</div>

	<script>
		var app=angular.module('routeApp', ['ngRoute']);
		app.config(['$routeProvider', function($routeProvider){
			$routeProvider
			.when('/Angular', {
				templateUrl: 'angular.html',
				controller: 'AngularCtrl',
			})
			.when('/Node', {
				templateUrl: 'node.html',
				controller: 'NodeCtrl',
			});
		}]);

		app.controller('AngularCtrl', function($scope){
			$scope.tutorial = [
			{Name:"Controllers", Description :"Controllers in action"},
            {Name:"Models", Description :"Models and binding data"},
            {Name:"Directives", Description :"Flexibility of Directives"}
			]
		});
		app.controller('NodeCtrl', function($scope){
			$scope.tutorial = [
			{Name:"Promises", Description :"Power of Promises"},
            {Name:"Event", Description :"Event of Node.js"},
            {Name:"Modules", Description :"Modules in Node.js"}
			]
		});
	</script>


</body>
</html>

这是我的 angular.html 文件

<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

这是我的 node.html 文件

<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

我确实尝试将我的 js 脚本文件与我的主 html 文件分开，但结果仍然相同。我不知道该怎么做以及在哪里找到问题。我希望你能帮我解决这个问题。谢谢！

标签： angularjsroutesng-view

解决方案

您需要在 AngularJS之后引用 ngRoute 模块脚本。简单地交换它们。

此外，您使用的是 AngularJS 1.6.X，它在 URL 中有不同的 hash-bang。您需要将您的hreffrom更改#为#!.

这是一个工作示例：

var app = angular.module('routeApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/Angular', {
      templateUrl: 'angular.html',
      controller: 'AngularCtrl',
    })
    .when('/Node', {
      templateUrl: 'node.html',
      controller: 'NodeCtrl',
    });
}]);

app.controller('AngularCtrl', function($scope) {
  $scope.tutorial = [{
      Name: "Controllers",
      Description: "Controllers in action"
    },
    {
      Name: "Models",
      Description: "Models and binding data"
    },
    {
      Name: "Directives",
      Description: "Flexibility of Directives"
    }
  ]
});
app.controller('NodeCtrl', function($scope) {
  $scope.tutorial = [{
      Name: "Promises",
      Description: "Power of Promises"
    },
    {
      Name: "Event",
      Description: "Event of Node.js"
    },
    {
      Name: "Modules",
      Description: "Modules in Node.js"
    }
  ]
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Route Sample</title>
  <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
</head>

<body ng-app="routeApp">
  <h1>Sample Routing | ng-view directive</h1>

  <div class="container">
    <ul>
      <li><a href="#!Angular">Angular JS Topics</a></li>
      <li><a href="#!Node">Node JS Topics</a></li>
    </ul>
  </div>
  <div class="container-ngView">
    <div ng-view></div>
  </div>

  <script type="text/ng-template" id="angular.html">
    <h2>Angular</h2>
    <ul ng-repeat="ptutor in tutorial">
      <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
    </ul>
    <a href="#!/">Back</a>
  </script>

  <script type="text/ng-template" id="node.html">
    <h2>Node</h2>
    <ul ng-repeat="ptutor in tutorial">
      <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
    </ul>
    <a href="#!/">Back</a>
  </script>

</body>

</html>

推荐阅读