Question

我正在尝试在AngularJs中实现路由，但它无法正常工作。以下是我的代码

<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>My Page</title>
<script src="angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js">     
</script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</html>

我的app.js是

var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);

phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
  when('/phones', {
    templateUrl: 'partials/phone-list.html',
    controller: 'PhoneListCtrl'
  }).
  when('/phones/:phoneId', {
    templateUrl: 'partials/phone-detail.html',
    controller: 'PhoneDetailCtrl'
  }).
  otherwise({
    redirectTo: '/phones'
  });
}]);
phonecatApp.controller('PhoneListCtrl', function($scope) {     
$scope.message = 'This is Add new order screen';     
}); 
phonecatApp.controller('PhoneDetailCtrl', function($scope) { 
$scope.message = 'This is Show orders screen'; 
});

当我尝试打开＆＃39; localhost / angular / app / index.html＃/ phones /＆＃39;它不显示phone-list.html的内容，但保留在index.html。请让我知道我错过了什么？是否需要安装任何依赖（bower或业力）。提前谢谢。

Answer 1

要拥有“常规”网址结构，您需要做三件事：

JS Side

您需要使用位于html5Mode模块中的$locationProvider服务中的ngRoute方法。只需在config头中声明依赖项，然后调用$locationProvider.html5Mode(true);。这将使角重写没有哈希前缀的URL。例如：

phonecatApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
}]);

HTML端

在base头部插入index.html标记。基本标记应包含您的根URL。 angular使用它作为参考来知道构建它的路由的根URL。例如：

<head>
  <meta charset="utf-8">
  <title>My Page</title>
  <link href="style.css" rel="stylesheet" />
  <base href="http://localhost/angular/app/"/>
  <script src="https://code.angularjs.org/1.2.16/angular.js"></script>

Apache Side

你需要服务器（我想在你的情况下它是一个apache）让角度做他自己的路由，所以你需要一个.htaccess文件在你的根目录中这些行：

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ /angular/app/ [L]

一个完整的.htaccess文件的例子，如果你不熟悉它（可能不是这里所有的行都需要，我不是htaccess专家）：

<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine on
  RewriteBase /

  # Don't rewrite files or directories
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]

  # Rewrite everything else to index.php to allow html5 state links
  RewriteRule ^ /angular/app/ [L]
</IfModule>

我已经在我的本地服务器上测试了它并且它完美无缺。有关angular's documantations

中的html5Mode的更多信息

Answer 2

路由请参考ui-router https://github.com/angular-ui/ui-router。这比带有角度的ngRoute要好得多，因为它为嵌套路由提供了更大的灵活性。

AngularJs中的路由不起作用

2 个答案:

JS Side

HTML端

Apache Side