Question

我正在学习有角度的路由，有些事情出错了我有以下文件结构：

index.html

<br>script.js
<br>first/first.js (controller) second.html (view)
<br>second/second.js (controller) second.html (view)

的index.html

'use strict';

// script.js
angular.module('RoutingApp', [
  'ngRoute',
  'RoutingApp.first',
  'RoutingApp.second',
  'RoutingApp.third',
])
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');

  $routeProvider.otherwise({redirectTo: '/first'});
}]);

//first.js
'use strict';

angular.module('RoutingApp.first', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/first', {
    templateUrl: 'first/first.html',
    controller: 'First'
  });
}])

.controller('First', [function() {

}]);

//second.js
'use strict';

angular.module('RoutingApp.second', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/second', {
    templateUrl: 'second/second.html',
    controller: 'second'
  });
}])

.controller('second', [function() {

}]);

ul {
  list-style-type: none;
  }

<html lang="en" ng-app="RoutingApp">
	<head>
		<title>Routing app</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
		<script src="script.js"></script>
	</head>
	<body>
	<nav class="navbar navbar-inverse">
   	<ul class="nav flex-column">
	    <li class="nav-item"><a href="#!first/first">Home</a></li>
	    <li class="nav-item"><a href="#!second/second">Contact</a></li>
  	</ul>
	</nav>
  <div ng-view></div>
  //...
	</body>
</html>

没有任何反应。

怎么了？

Answer 1

还有一个额外的逗号

'RoutingApp.third',

第三条路线可能不应该存在，因为它没有在任何地方定义。

从模块到模块注入路由配置

1 个答案: