我是角色新手并在我的代码中使用路由。在索引文件中,我有一个菜单栏,我在其中使用路由概念。
<div class="menuBar">
<a href="#!home" class="menuBarItems">Home</a> <a href="#!about"
class="menuBarItems">About</a> <a href="#!services"
class="menuBarItems">Services</a> <a href="#!contact"
class="menuBarItems">Contact Us</a>
</div>
<div ng-view></div>
<script>
var app = angular.module("myApp", [ "ngRoute" ]);
app.config(function($routeProvider) {
$routeProvider.when("/home", {
templateUrl : "home.html"
}).when("/about", {
templateUrl : "about.html"
}).when("/services", {
templateUrl : "services.html"
}).when("/contact", {
templateUrl : "contactus.html"
});
});
</script>
从此我将路由到四个不同的html页面,但在主页中我想要嵌套路由。 home.html的代码如下:
<div>
<section class="section1">
<div class="section1Element"
style="border-bottom: 2px solid rgba(0, 0, 0, 0.16);">
<a href="#!london" class="link">London</a><br>
</div>
<div class="section1Element">
<a href="#!paris" class="link">Paris</a>
</div>
</section>
<section class="section2" ng-view></section>
</div>
</div>
<script>
var app = angular.module("myHome", [ "ngRoute" ]);
app.config(function($routeProvider) {
$routeProvider.when("/london", {
templateUrl : "london.html"
}).when("/paris", {
templateUrl : "paris.html"
});
});
</script>
这里当我在section元素中使用ng-view时,它显示超出最大调用堆栈的错误。我不知道如何解决它。有人可以帮我解决这个问题吗?
答案 0 :(得分:0)
嘿,你做得有点错误,你不应该定义2条路线,你需要处理嵌套路线,我可以从上面的例子中推断出来。所以你的代码必须以这样的方式修改
<script>
var app = angular.module("myApp", [ "ngRoute" ]);
app.config(function($routeProvider) {
$routeProvider.when("/home", {
templateUrl : "home.html"
}).when("/home/london", {
templateUrl : "london.html"
}).when("/home/paris", {
templateUrl : "paris.html"
}).when("/about", {
templateUrl : "about.html"
}).when("/services", {
templateUrl : "services.html"
}).when("/contact", {
templateUrl : "contactus.html"
});
});
</script>
然后事情会按预期发挥作用。
答案 1 :(得分:0)
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(['$stateProvider', '$urlRouterProvider',function
($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/Home/London");
$stateProvider
.state("Home", {
url: "/Home",
templateUrl: "Home.html"
})
.state("Home.Paris", {
url: "/Paris",
templateUrl: "Paris.html"
})
.state("Home.London", {
url: "/London",
templateUrl: "London.html"
})
.state("About", {
url: "/About",
templateUrl: "About.html"
})
.state("services", {
url: "/services",
templateUrl: "services.html"
})
.state("contactus", {
url: "/contactus",
templateUrl: "contactus.html"
});
}]);
这是需要完成的必需js文件。