Question

我现在正在学习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文件分开，但结果仍然相同。我不知道该怎么办以及在哪里找到问题。我希望你能帮我这个忙。谢谢！

Answer 1

加载角度后，您需要调用角度路线参考，将参考的顺序更改为

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-
route.js"></script>

编辑

应该与参考有关。检查以下一项，

declare
v_clob clob;
begin
v_clob := '00102034334:1:11-JUN-13:1,00102034334:2:11-JUN-13:1,00102034334:3:11-JUN-13:1,00102034334:4:11-JUN-13:1,00102034334:5:11-JUN-13:,00102034334:6:11-JUN-13:,00102034334:7:11-JUN-13:,00102034334:8:11-JUN-13:,00102034334:9:11-JUN-13:,00102034334:10:11-JUN-13:,00102034334:11:11-JUN-13:,00102034334:12:11-JUN-13:,00102034334:13:11-JUN-13:,00102034334:14:11-JUN-13:,00102034334:15:11-JUN-13:,00102034334:16:11-JUN-13:,00102034334:17:11-JUN-13:,00102034334:18:11-JUN-13:,00102034334:19:11-JUN-13:,00102034334:20:11-JUN-13:,00102034334:21:11-JUN-13:,00102034334:22:11-JUN-13:,00102034334:23:11-JUN-13:,00102034334:24:11-JUN-13:,00102034334:25:11-JUN-13:,00102034334:26:11-JUN-13:,00102034334:27:11-JUN-13:,00102034334:28:11-JUN-13:,00102034334:29:11-JUN-13:,00102034334:30:11-JUN-13:,00102034334:31:11-JUN-13:,00102034334:32:11-JUN-13:,00102034334:33:11-JUN-13:,00102034334:34:11-JUN-13:,00102034334:35:11-JUN-13:,00102034334:1:11-JUN-13:1,00102034334:2:11-JUN-13:1,00102034334:3:11-JUN-13:1,00102034334:4:11-JUN-13:1,00102034334:5:11-JUN-13:,00102034334:6:11-JUN-13:,00102034334:7:11-JUN-13:,00102034334:8:11-JUN-13:,00102034334:9:11-JUN-13:,00102034334:10:11-JUN-13:,00102034334:11:11-JUN-13:,00102034334:12:11-JUN-13:,00102034334:13:11-JUN-13:,00102034334:14:11-JUN-13:,00102034334:15:11-JUN-13:,00102034334:16:11-JUN-13:,00102034334:17:11-JUN-13:,00102034334:18:11-JUN-13:,00102034334:19:11-JUN-13:,00102034334:20:11-JUN-13:,00102034334:21:11-JUN-13:,00102034334:22:11-JUN-13:,00102034334:23:11-JUN-13:,00102034334:24:11-JUN-13:,00102034334:25:11-JUN-13:,00102034334:26:11-JUN-13:,00102034334:27:11-JUN-13:,00102034334:28:11-JUN-13:,00102034334:29:11-JUN-13:,00102034334:30:11-JUN-13:,00102034334:31:11-JUN-13:,00102034334:32:11-JUN-13:,00102034334:33:11-JUN-13:,00102034334:34:11-JUN-13:,00102034334:35:11-JUN-13:,00102034334:1:11-JUN-13:1,00102034334:2:11-JUN-13:1,00102034334:3:11-JUN-13:1,00102034334:4:11-JUN-13:1,00102034334:5:11-JUN-13:,00102034334:6:11-JUN-13:,00102034334:7:11-JUN-13:,00102034334:8:11-JUN-13:,00102034334:9:11-JUN-13:,00102034334:10:11-JUN-13:,00102034334:11:11-JUN-13:,00102034334:12:11-JUN-13:,00102034334:13:11-JUN-13:,00102034334:14:11-JUN-13:,00102034334:15:11-JUN-13:,00102034334:16:11-JUN-13:,00102034334:17:11-JUN-13:,00102034334:18:11-JUN-13:,00102034334:19:11-JUN-13:,00102034334:20:11-JUN-13:,00102034334:21:11-JUN-13:,00102034334:22:11-JUN-13:,00102034334:23:11-JUN-13:,00102034334:24:11-JUN-13:,00102034334:25:11-JUN-13:,00102034334:26:11-JUN-13:,00102034334:27:11-JUN-13:,00102034334:28:11-JUN-13:,00102034334:29:11-JUN-13:,00102034334:30:11-JUN-13:,00102034334:31:11-JUN-13:,00102034334:32:11-JUN-13:,00102034334:33:11-JUN-13:,00102034334:34:11-JUN-13:,00102034334:35:11-JUN-13:,00102034334:1:11-JUN-13:1,00102034334:2:11-JUN-13:1,00102034334:3:11-JUN-13:1,00102034334:4:11-JUN-13:1,00102034334:5:11-JUN-13:,00102034334:6:11-JUN-13:,00102034334:7:11-JUN-13:,00102034334:8:11-JUN-13:,00102034334:9:11-JUN-13:,00102034334:10:11-JUN-13:,00102034334:11:11-JUN-13:,00102034334:12:11-JUN-13:,00102034334:13:11-JUN-13:,00102034334:14:11-JUN-13:,00102034334:15:11-JUN-13:,00102034334:16:11-JUN-13:,00102034334:17:11-JUN-13:,00102034334:18:11-JUN-13:,00102034334:19:11-JUN-13:,00102034334:20:11-JUN-13:,00102034334:21:11-JUN-13:,00102034334:22:11-JUN-13:,00102034334:23:11-JUN-13:,00102034334:24:11-JUN-13:,00102034334:25:11-JUN-13:,00102034334:26:11-JUN-13:,00102034334:27:11-JUN-13:,00102034334:28:11-JUN-13:,00102034334:29:11-JUN-13:,00102034334:30:11-JUN-13:,00102034334:31:11-JUN-13:,00102034334:32:11-JUN-13:,00102034334:33:11-JUN-13:,00102034334:34:11-JUN-13:,00102034334:35:11-JUN-13:,00102034334:1:11-JUN-13:1,00102034334:2:11-JUN-13:1,00102034334:3:11-JUN-13:1,00102034334:4:11-JUN-13:1,00102034334:5:11-JUN-13:,00102034334:6:11-JUN-13:,00102034334:7:11-JUN-13:,00102034334:8:11-JUN-13:,00102034334:9:11-JUN-13:,00102034334:10:11-JUN-13:,00102034334:11:11-JUN-13:,00102034334:12:11-JUN-13:,00102034334:13:11-JUN-13:,00102034334:14:11-JUN-13:,00102034334:15:11-JUN-13:,00102034334:16:11-JUN-13:,00102034334:17:11-JUN-13:,00102034334:18:11-JUN-13:,00102034334:19:11-JUN-13:,00102034334:20:11-JUN-13:,00102034334:21:11-JUN-13:,00102034334:22:11-JUN-13:,00102034334:23:11-JUN-13:,00102034334:24:11-JUN-13:,00102034334:25:11-JUN-13:,00102034334:26:11-JUN-13:,00102034334:27:11-JUN-13:,00102034334:28:11-JUN-13:,00102034334:29:11-JUN-13:,00102034334:30:11-JUN-13:,00102034334:31:11-JUN-13:,00102034334:32:11-JUN-13:,00102034334:33:11-JUN-13:,00102034334:34:11-JUN-13:,00102034334:35:11-JUN-13:,00102034334:1:11-JUN-13:1,00102034334:2:11-JUN-13:1,00102034334:3:11-JUN-13:1,00102034334:4:11-JUN-13:1,00102034334:5:11-JUN-13:,00102034334:6:11-JUN-13:,00102034334:7:11-JUN-13:,00102034334:8:11-JUN-13:,00102034334:9:11-JUN-13:,00102034334:10:11-JUN-13:,00102034334:11:11-JUN-13:,00102034334:12:11-JUN-13:,00102034334:13:11-JUN-13:,00102034334:14:11-JUN-13:,00102034334:15:11-JUN-13:,00102034334:16:11-JUN-13:,00102034334:17:11-JUN-13:,00102034334:18:11-JUN-13:,00102034334:19:11-JUN-13:,00102034334:20:11-JUN-13:,00102034334:21:11-JUN-13:,00102034334:22:11-JUN-13:,00102034334:23:11-JUN-13:,00102034334:24:11-JUN-13:,00102034334:25:11-JUN-13:,00102034334:26:11-JUN-13:,00102034334:27:11-JUN-13:,00102034334:28:11-JUN-13:,00102034334:29:11-JUN-13:,00102034334:30:11-JUN-13:,00102034334:31:11-JUN-13:,00102034334:32:11-JUN-13:,00102034334:33:11-JUN-13:,00102034334:34:11-JUN-13:,00102034334:35:11-JUN-13:';
select TO_CHAR (regexp_substr(v_clob,'[^,]+', 1, level)) from dual 
               connect by TO_CHAR (regexp_substr(v_clob, '[^,]+', 1, level)) is not null;                       

end;
/

DEMO

编辑：

我们能够通过聊天解决问题，解决方案是清除缓存并通过xampp运行应用程序，因为当您通过浏览器访问时无法加载模板

Answer 2

您需要在 AngularJS之后引用ngRoute模块脚本。只需将它们交换即可。

此外，您使用的是AngularJS 1.6.X，它在URL中具有不同的哈希值。您需要将href从#更改为#!。

这是一个有效的示例：

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>

Answer 3

在sublime中使用npm（节点程序包管理器）安装http-sever程序包。然后，您可以重新启动将启动您的应用程序的网络服务器

npm install -g http-server

在package.json文件中的以下脚本下进行配置：

"start": "http-server -a localhost -p 8000 -c-1"

然后从项目的根目录运行以下命令：

Command : npm start (from root of project)

AngularJS：ng-view指令不起作用

3 个答案: