AngularJS 1.6 路由不工作
AngularJS 1.6 routing not working
我正在尝试创建我的第一个 angular 应用程序。但它根本不起作用。我不知道出了什么问题。我检查了控制台,没有错误。
<head>
<meta charset="utf-8">
<script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.js"></script>
</head>
<body ng-app="myApp">
<h1>Test angular</h1>
<a href="#/">Main</a>
<a href="#sec">Second</a>
<a href="#th">Third</a>
<div ng-view></div>
</body>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/sec", {
templateUrl : "sec.html"
})
.when("/th", {
templateUrl : "th.html"
});
});
</script>
谁能帮帮我?
我发现您没有正确包含 $routeProvider
,这是有效的路由代码:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/sec", {
templateUrl : "sec.html"
})
.when("/th", {
templateUrl : "th.html"
});
}]);
您需要修复您的 href 属性:
正确的方法是:
<a href="#/">Main</a>
<a href="#/sec">Second</a>
<a href="#/th">Third</a>
Angular 1.6 中的路由从 #/myUrl
更改为 #!/myUrl
您应该将您的 ref 更改为:
<a href="#!/">Main</a>
<a href="#!/sec">Second</a>
<a href="#!/th">Third</a>
如果要删除此前缀,请参阅 。
尝试将 $locationProvider 添加到您的脚本中
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
试试这个有效的代码
app.config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/', {
templateUrl: 'index.html'
})
.when('/about', {
templateUrl: 'about.html'
})
.when('/service', {
templateUrl: 'service.html'
});}]);
我正在尝试创建我的第一个 angular 应用程序。但它根本不起作用。我不知道出了什么问题。我检查了控制台,没有错误。
<head>
<meta charset="utf-8">
<script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.js"></script>
</head>
<body ng-app="myApp">
<h1>Test angular</h1>
<a href="#/">Main</a>
<a href="#sec">Second</a>
<a href="#th">Third</a>
<div ng-view></div>
</body>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/sec", {
templateUrl : "sec.html"
})
.when("/th", {
templateUrl : "th.html"
});
});
</script>
谁能帮帮我?
我发现您没有正确包含 $routeProvider
,这是有效的路由代码:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/sec", {
templateUrl : "sec.html"
})
.when("/th", {
templateUrl : "th.html"
});
}]);
您需要修复您的 href 属性:
正确的方法是:
<a href="#/">Main</a>
<a href="#/sec">Second</a>
<a href="#/th">Third</a>
Angular 1.6 中的路由从 #/myUrl
更改为 #!/myUrl
您应该将您的 ref 更改为:
<a href="#!/">Main</a>
<a href="#!/sec">Second</a>
<a href="#!/th">Third</a>
如果要删除此前缀,请参阅
尝试将 $locationProvider 添加到您的脚本中
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
试试这个有效的代码
app.config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/', {
templateUrl: 'index.html'
})
.when('/about', {
templateUrl: 'about.html'
})
.when('/service', {
templateUrl: 'service.html'
});}]);