AngularJS:ngRoute 不工作 [英] AngularJS: ngRoute Not Working
问题描述
我想让这个简单的路由正常工作，但无法弄清楚问题出在哪里.
这是 HTML:
...<a href="#voip"><div class="col-lg-3 服务"><img src="assets/img/voip.svg"/><h4 ng-bind-html="content.home.voip_header"></h4><p ng-bind-html="content.home.voip_txt"></p></a><section id="视图"><div ng-view></div></section>
这是路由:
var app = angular.module('app',['ngRoute','ngSanitize']);app.config(['$routeProvider',function($routeProvider){$routeProvider.when('/语音',{templateUrl:'assets/templates/voip.html'});}]);如果我如下指定否则"，则加载模板.我想也许我在我的 href 属性中使用了错误的语法，但我四处看了看，似乎应该是这样.
.otherwise({重定向到:'/voip'})另一件事是，如果我听$routeChangeSuccess，事件被触发，但视图没有加载.
有什么想法吗?
这是正确的，因为您使用的是 angular 1.6 并且默认哈希前缀发生了变化:
<块引用>由于 aa077e8，用于 $location hash-bang 的默认哈希前缀URLs 已从空字符串 ('') 更改为 bang ('!').如果你的应用程序不使用 HTML5 模式或在浏览器上运行不支持 HTML5 模式，并且您没有指定自己的hash-prefix 那么客户端 URL 现在将包含一个 !字首.为了例如，URL 将变为而不是 mydomain.com/#/a/b/cmydomain.com/#!/a/b/c.
如果你真的不想有哈希前缀，那么你可以恢复通过向您的应用程序添加配置块的先前行为:
appModule.config(['$locationProvider', function($locationProvider){
$locationProvider.hashPrefix('');}]);来源
所以你有一些选择:
1.将 HTML5mode 设置为 true
$locationProvider.html5Mode(true);和在 html 标题中的 html 集基础:
3.从 1.5 回到旧行为 - 手动设置哈希前缀
app.config(['$locationProvider', function($locationProvider) {$locationProvider.hashPrefix('');}]);I am tying to get this simple routing to work and can't figure out what is the problem.
This is the 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>
This is the routing:
var app = angular.module('app',[
'ngRoute',
'ngSanitize'
]);
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/voip',{
templateUrl:'assets/templates/voip.html'
});
}]);
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'
})
Another thing is, if I listen to $routeChangeSuccess, the event is triggered, yet the view is not loaded.
Any ideas?
It's properly because you are using angular 1.6 and there has been a change the default hash-prefix:
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(''); }]); Source
So you have some options:
1. Set HTML5mode true
$locationProvider.html5Mode(true);
and in html set base in html header:
<base href="/">
Lastly change <a ng-href="#voip"> to
<a ng-href="voip">
2. Use the 1.6 way
Change
<a ng-href="#voip">
to
<a ng-href="#!voip">
3. Go back to old behaviour from 1.5 - set hash prefix manually
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
这篇关于AngularJS:ngRoute 不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
