最近新學(xué)習AngularJs,對于路由配置剛剛起步,遇到一個很迷的問題。主頁面代碼如下<!DOCTYPE?html>
<html?ng-app="index">
<head>
<meta?charset="utf-8"?/>
<title>imooc-angular</title>
<script?src="js/angular-1.6.4/angular.js"></script>
<script?src="js/angular-1.6.4/angular-route.js"></script>
<script?src="js/angular-1.6.4/angular-animate.js"></script>
<script?src="js/index.js"></script>
<script?src="js/controllers.js"></script>
<script?src="js/directives.js"></script>
<script?src="js/filters.js"></script>
<script?src="js/routes.js"></script>
<script?src="js/services.js"></script>
</head>
<body>
<a?href="#/hello">hello</a>
<a?href="#/list">list</a>
<div?ng-view></div>
</body>
</html>零件頁面代碼如下hello.html<div><span?ng-bind="hello"></span>,angular</div>list.html<ul>
<li?ng-repeat="book?in?books">
書名:{{book.title}} 作者:{{book.author}}
</li>
</ul>各js代碼如下,其中filter,routes,services,directives 為只聲明了模塊的空jsindex.jsvar?index?=?angular.module("index",[
'ngRoute','ngAnimate','indexControllers','indexServices','indexDirectives',
'indexRoutes','indexFilters'
]);
index.config(function($routeProvider){
$routeProvider.when('/hello',{
templateUrl:'templates/hello.html',
controller:'HelloCtrl'
}).when('/list',{
templateUrl:'templates/list.html',
controller:'ListCtrl'
}).otherwise({
redirectTo:'/hello'
})
});controllers.jsvar?controllers?=?angular.module("indexControllers",[]);
controllers.controller("HelloCtrl",['$scope',function($scope){
$scope.hello?=?"hello";
}]);
controllers.controller("ListCtrl",['$scope',function($scope){
$scope.books=[
{title:"book1",author:"author1"},
{title:"book2",author:"author2"},
{title:"book3",author:"author3"}
]
}]);問題一,直接訪問index頁面,游覽器link為:http://127.0.0.1:8020/imooc-angularJs/index.html#!/hello ????????????????為什么地址是#!/hello問題二,通過A標簽互相跳轉(zhuǎn)時不生效,點擊跳轉(zhuǎn)后新link為:????????????????http://127.0.0.1:8020/imooc-angularJs/index.html#!/hello#%2Flist ????????????????或者????????????????http://127.0.0.1:8020/imooc-angularJs/index.html#!/hello#%2Fhello ????????????????為什么地址中會有亂碼問題三,在修改A標簽,將href="#/hello",hrel="#/list"修改成href="#!/hello",href="#!/list"后,成功跳轉(zhuǎn)????????????????為什么一定要加上這個“!”符號才能成功跳轉(zhuǎn),是什么樣的原理,希望有高手能詳細解答
關(guān)于Angular路由 的問題
ZaizhanShi
2017-05-22 16:00:48