Question

我是角色新手并在我的代码中使用路由。在索引文件中，我有一个菜单栏，我在其中使用路由概念。

    <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时，它显示超出最大调用堆栈的错误。我不知道如何解决它。有人可以帮我解决这个问题吗？

Answer 1

嘿，你做得有点错误，你不应该定义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>

然后事情会按预期发挥作用。

Answer 2

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文件。

使用ng-view

2 个答案: