Question

我在教程后学习angularjs，我看到你可以从链接中删除＃。我这样做但是我的部分（来自templateUrl）不再进入页面了。有人可以告诉我我哪里错了吗？

angular.module('myApp', ['ngRoute'])
	.controller('mainController',  ['$scope', '$location', '$log', function($scope, $location, $log) {
    	
    	$log.info($location.path());

    
	}])
	.controller('secondController',  ['$scope', '$location', '$log', function($scope, $location, $log) {
    	
    	$log.info($location.path());

    
	}])
	.config(function($routeProvider, $locationProvider) {
		// $routeProvider lets us specify routes
		$routeProvider
			.when('/', {
				templateUrl: 'pages/main.html',
				controller: 'mainController'
			})
			.when('/second', {
				templateUrl: 'pages/second.html',
				controller: 'secondController'
			});
		$locationProvider.html5Mode(true);
	});

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
    <head>
        <title>Learn and Understand AngularJS</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">
        <base href="/">
        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <style>
            html, body, input, select, textarea
            {
                font-size: 1.05em;
            }
        </style>
        
        <!-- load angular via CDN -->
        <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
        <script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
        <script src="angularjs-learn-understand/ch05/app.js"></script>
    </head>
    <body>

        <header>
			<nav class="navbar navbar-default">
			<div class="container">
				<div class="navbar-header">
					<a class="navbar-brand" href="/">AngularJS</a>
				</div>

				<ul class="nav navbar-nav navbar-right">
					<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#/second"><i></i> Second</a></li>
				</ul>
			</div>
			</nav>
		</header>

        <div class="container">

            <div ng-view></div>
            
		</div>

    </body>
</html>

main.html中：

<h1>This is Main.</h1>

second.html

<h1>This is second.</h1>

所以在我的浏览器中，当我点击Home和Second时，我没有得到main.html和second.html。为什么呢？

Answer 1

UI路由器github文档提到：

启用html5Mode后，您的网址中将不再使用＃字符。＃符号很有用，因为它不需要服务器端配置。没有＃，url看起来更好，但它也需要服务器端重写。

当您尝试在html5Mode中访问您的应用程序（没有任何哈希的路由）时，首先您需要删除＆＃34;＃＆＃34;来自您的每个链接（在这种情况下，链接是：Home，Second）。

因此...

＆＃34;＃＆＃34;只会是＆＃34; /＆＃34;
＆＃34;＃/秒＆＃34;将是＆＃34; / second＆＃34;

在此之后，您还需要启用服务器端URL重写。请检查this link并根据您使用的服务器配置您的服务器。

Answer 2

尝试在$ routerProvider的末尾建立一个.otherwise()，指定一个默认路由。

模板main.html和second.html是否正确定义？位置是否正确？

删除#my angularjs页面不起作用

2 个答案: