50

我想在 angularJS 中激活 html5Mode，但我不知道为什么它不起作用。我的代码有什么问题吗？

angular
    .module('myApp',[])
    .config(function($locationProvider, $routeProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.when('/', {
           templateUrl: 'partials/home.html', 
           controller: HomeCtrl
        });

        $routeProvider.when('/tags/:tagId', {
            templateUrl: 'partials/result.html', 
            controller: TagResultCtrl
        });
        //$routeProvider.otherwise({redirectTo: '/home', controller: HomeCtrl});
     });

在 HTML 中

  <a href="tags/{{tag.id}}"><img data-ng-src="{{tag.imageUrl}}"></a>
4

6 回答 6

63

我看到的唯一问题是相关链接和模板因此未正确加载。

来自有关 HTML5 模式的文档

相对链接

请务必检查所有相对链接、图像、脚本等。您必须在主 html 文件 () 的头部指定 url 基址，或者必须在任何地方<base href="/my-base">使用绝对 url（以/使用文档的初始绝对 url，这通常与应用程序的根目录不同。

/在您的情况下，您可以在href属性中添加正斜杠（自动$location.path执行此操作），也可以在配置路由时添加。这避免了类似的路由，并确保模板正确加载。templateUrlexample.com/tags/another

这是一个有效的示例：

<div>
    <a href="/">Home</a> | 
    <a href="/another">another</a> | 
    <a href="/tags/1">tags/1</a>
</div>
<div ng-view></div>

和

app.config(function($locationProvider, $routeProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when('/', {
      templateUrl: '/partials/template1.html', 
      controller: 'ctrl1'
    })
    .when('/tags/:tagId', {
      templateUrl: '/partials/template2.html', 
      controller:  'ctrl2'
    })
    .when('/another', {
      templateUrl: '/partials/template1.html', 
      controller:  'ctrl1'
    })
    .otherwise({ redirectTo: '/' });
});

如果使用 Chrome，您将需要从服务器运行它。

于 2012-12-12T05:27:50.357 回答
4

AngularJS 提供了一种简单而简洁的方法来使用对象将路由与控制器和模板相关联$routeProvider。在最近将应用程序更新到最新版本（当前为 1.2 RC1）时，我意识到$routeProvider标准 angular.js 脚本中不再提供该版本。

在阅读了更改日志后，我意识到路由现在是一个单独的模块（我认为这是一个很棒的举措）以及动画和其他一些模块。因此，如果您要迁移到 1.2（或未来）版本，如下所示的标准模块定义和配置代码将不再起作用：

var app = angular.module('customersApp', []);

app.config(function ($routeProvider) {

    $routeProvider.when('/', {
        controller: 'customersController',
        templateUrl: '/app/views/customers.html'
    });

});

你如何解决它？

除了 angular.js 之外，只需将 angular-route.js 添加到您的页面（在此处获取 angular-route.js 的版本 - 请记住，它当前是一个将更新的候选发布版本）并将模块定义更改为如下所示以下：

var app = angular.module('customersApp', ['ngRoute']);

如果您使用动画，则需要 angular-animation.js 并且还需要引用相应的模块：

 var app = angular.module('customersApp', ['ngRoute', 'ngAnimate']);

您的代码可以如下所示：

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

    app.config(function($routeProvider) {

    $routeProvider
        .when('/controllerone', {
                controller: 'friendDetails',
                templateUrl: 'controller3.html'

            }, {
                controller: 'friendsName',
                templateUrl: 'controller3.html'

            }

    )
        .when('/controllerTwo', {
            controller: 'simpleControoller',
            templateUrl: 'views.html'
        })
        .when('/controllerThree', {
            controller: 'simpleControoller',
            templateUrl: 'view2.html'
        })
        .otherwise({
            redirectTo: '/'
        });

});
于 2014-02-28T19:07:45.617 回答
4

以下是如何使用requireBase=false标志配置 $locationProvider 以避免设置基本 href <head><base href="/"></head>：

var app = angular.module("hwapp", ['ngRoute']);

app.config(function($locationProvider){
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    }) 
});
于 2017-07-19T05:20:50.940 回答
3

试试这个

如果您将应用程序部署到根上下文（例如https://myapp.com/），请将基本 URL 设置为 /：

<head>
  <base href="/">
  ...
</head>

角度文档

于 2015-08-15T21:49:59.343 回答
0

你可以试试：

<a href="#/controllerone">Controller One</a>||
<a href="#/controllerTwo">Controller Two</a>||
<a href="#/controllerThree">Controller Three</a>

<div>
    <div ng-view=""></div>
</div>
于 2014-02-28T19:46:45.517 回答
0

@简单解决方案

我使用一个简单的 Python HTTP 服务器。在有问题的 Angular 应用程序的目录中时（使用带有 Mavericks 10.9 和 Python 2.x 的 MBP）我只需运行

python -m SimpleHTTPServer 8080

这会在端口 8080 上设置简单的服务器，让您localhost:8080在浏览器上访问以查看正在开发的应用程序。

希望有帮助！

于 2014-09-02T15:57:54.570 回答