角度路由无法正常工作

时间:2017-03-30 15:46:22

标签: angularjs routing

虽然我试图点击第一页和第二页但它没有显示任何内容,但我浪费了很多时间,但没有输出,文件script.js index.html first.html和second.html

script.js



angular.module('RoutingApp', ['ngRoute'])
.config( ['$routeProvider', function($routeProvider) {

        $routeProvider

            .when('/first', {

                templateUrl: 'first.html'

            })

            .when('/second', {

                templateUrl: 'second.html'

            })

            .otherwise({

                redirectTo: '/'

            });

    }]);

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
	<script src="script.js"></script>
</head>
    
<body ng-app="RoutingApp">
	<h2>AngularJS Routing Example</h2>
	<p>Jump to the <a href="#first">first</a> or <a href="#second">second page</a></p>
	<div ng-view>
	</div>
</body>
</html>
&#13;
&#13;
&#13;

first.html

<h2>This is the first page.</h2>

second.html

<h2>This is the second page.</h2>

1 个答案:

答案 0 :(得分:0)

需要更改Anchor(a)标记以使其与路由URL匹配。那些应该有/

<a href="#/first">first</a> 
or 
<a href="#/second">second page</a>