最近新学习AngularJs,对于路由配置刚刚起步,遇到一个很迷的问题。
主页面代码如下
tianmg-angular hello list
零件页面代码如下
hello.html
,angular
list.html
- 书名:{{book.title}} 作者:{{book.author}}
各js代码如下,其中filter,routes,services,directives 为只声明了模块的空js
index.js
var 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.js
var 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/tianmg-angularJs/index.html#!/hello
为什么地址是#!/hello
问题二,通过A标签互相跳转时不生效,点击跳转后新link为:
http://127.0.0.1:8020/tianmg-angularJs/index.html#!/hello#%2Flist
或者
http://127.0.0.1:8020/tianmg-angularJs/index.html#!/hello#%2Fhello
为什么地址中会有乱码
问题三,在修改A标签,将href="#/hello",hrel="#/list"修改成href="#!/hello",href="#!/list"后,成功跳转
为什么一定要加上这个“!”符号才能成功跳转,是什么样的原理,希望有高手能详细解答 |