AngularJS:ngRoute无法正常工作 [英] AngularJS: ngRoute Not Working
问题描述
我想让这种简单的路由正常工作，却无法弄清问题所在.
I am tying to get this simple routing to work and can't figure out what is the problem.
这是HTML:
<html lang="en" ng-app="app">
.
.
.
<a href="#voip">
<div class="col-lg-3 service">
<img src="assets/img/voip.svg"/>
<h4 ng-bind-html="content.home.voip_header"></h4>
<p ng-bind-html="content.home.voip_txt"></p>
</div>
</a>
<section id="view">
<div ng-view></div>
</section>
这是路由:
var app = angular.module('app',[
'ngRoute',
'ngSanitize'
]);
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/voip',{
templateUrl:'assets/templates/voip.html'
});
}]);
如果我如下指定否则"，将加载模板.我以为也许我在href属性中使用了错误的语法，但是到处都是，看起来应该是这样.
The template is loaded if I specify 'otherwise' as below. I thought maybe I am using the wrong syntax in my href attribute, but I looked everywhere and seems like this is how it should be.
.otherwise({
redirectTo:'/voip'
})
另一件事是，如果我收听$routeChangeSuccess，则会触发该事件，但不会加载视图.
Another thing is, if I listen to $routeChangeSuccess, the event is triggered, yet the view is not loaded.
有什么想法吗?
推荐答案
这是正确的，因为您使用的是angular 1.6，并且默认的哈希前缀有所更改:
It's properly because you are using angular 1.6 and there has been a change the default hash-prefix:
由于aa077e8，用于$ location hash-bang的默认哈希前缀 URL已从空字符串('')更改为爆炸('！').如果你的 应用程序未使用HTML5模式或正在以下浏览器上运行 不支持HTML5模式，并且您尚未指定自己的模式 哈希前缀，则客户端网址现在将包含！字首.为了 例如，URL将变为mydomain.com/#/a/b/c mydomain.com/#！/a/b/c.
Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!'). If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a ! prefix. For example, rather than mydomain.com/#/a/b/c the URL will become mydomain.com/#!/a/b/c.
如果您实际上不希望使用哈希前缀，则可以恢复 通过向您的应用程序添加配置块来实现以前的行为:
If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to you application:
appModule.config(['$ locationProvider'，function($ locationProvider){
$ locationProvider.hashPrefix(''); }]); 来源
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix(''); }]); Source
所以您有一些选择:
1.将HTML5mode设置为true
$locationProvider.html5Mode(true);
并在html中将HTML标头设置为html标头:
and in html set base in html header:
<base href="/">
最后将<a ng-href="#voip">更改为
Lastly change <a ng-href="#voip"> to
<a ng-href="voip">
2.使用1.6方式
更改
<a ng-href="#voip">
到
<a ng-href="#!voip">
2. Use the 1.6 way
Change
<a ng-href="#voip">
to
<a ng-href="#!voip">
3.从1.5开始恢复旧的行为-手动设置哈希前缀
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
这篇关于AngularJS:ngRoute无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
