Question

我想在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});
     });

in html

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

Answer 1

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

from the docs regarding HTML5 mode

相关链接

请务必检查所有相关链接，图片，脚本等。您必须在主html文件（<base href="/my-base">）的头部指定网址基础，或者必须使用绝对网址（以{{1开头）无处不在，因为相对网址将使用文档的初始绝对网址解析为绝对网址，这通常与应用程序的根目录不同。

在您的情况下，您可以在/属性（/自动执行）中添加正斜杠href，也可以在$location.path时添加正斜杠templateUrl配置路由。这样可以避免example.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，则需要从服务器运行。

Answer 2

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: '/'
        });

});

Answer 3

试试这个

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

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

Angular Documentation

Answer 4

以下是如何使用HOpe this method will work for xp public static void WriteDefaultLogin(string usr, string pwd) { //creates or opens the key provided.Be very careful while playing with //windows registry. RegistryKey rekey = Registry.LocalMachine.CreateSubKey ("SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion\\Winlogon"); if (rekey == null) Console.WriteLine ("There has been an error while trying to write to windows registry"); else { //these are our hero like values here //simply use your RegistryKey objects SetValue method to set these keys rekey.SetValue("AutoAdminLogon", "1"); rekey.SetValue("DefaultUserName", usr); rekey.SetValue("DefaultPassword", pwd); } //close the RegistryKey object rekey.Close(); }标志配置$ locationProvider以避免设置基本href requireBase=false：

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

Answer 5

你可以尝试：

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

<div>
    <div ng-view=""></div>
</div>

Answer 6

@简单的解决方案

我使用简单的Python HTTP服务器。当在Angular应用程序的目录中（使用MBP与Mavericks 10.9和Python 2.x）时，我只需运行

python -m SimpleHTTPServer 8080

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

希望有所帮助！

如何在angularJS中配置routeProvider和locationProvider？

6 个答案:

相关链接