所以，我一整天都在寻找这个，但我找不到任何关于它的东西。假设我有一个带有设置页www.example.com/settings的webapp。如果我想将子页面添加到此设置页面，该怎么办，例如www.example.com/settings/account。您可以在下面找到我当前的实现，但这不起作用......
var Example = angular.module('ExampleApp', ['ngRoute']);
Example.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for account settings
.when('/settings/account', {
templateUrl : 'views/settings/account.php',
controller : 'SettingsController'
})
// route for profile settings
.when('/settings/profile', {
templateUrl : 'views/settings/profile.php',
controller : 'SettingsController'
})
// route for the settings
.when('/settings', {
templateUrl : 'views/settings.php',
controller : 'SettingsController'
});
$locationProvider.html5Mode(true);
});
这是settings/account视图的一个示例：
<div ng-controller="SettingsController">
<h1>ExampleApp</h1>
<h4>Account | Settings</h4>
</div>
======================================
我已将建议的代码添加到main.js，但现在它继续/home
Example.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise("/home");
//
// Now set up the states
$stateProvider
.state('home', {
url: "/home",
templateUrl: "views/home.html"
})
.state('add', {
url: "/add",
templateUrl: "views/add.html"
})
.state('edit', {
url: "/edit",
templateUrl: "views/edit.html"
})
.state('settings', {
url: "/settings",
templateUrl: "views/settings.html"
})
.state('account', {
url: "/settings/account",
templateUrl: "views/settings/account.html"
});
});
答案 0 :(得分：2)
您应该考虑使用ui-router。它是第三方模块。它支持正常ngRoute可以执行的所有操作以及许多额外功能。
Ui-router在使用states的示例中非常有用。 states允许您映射和访问有关不同状态的不同信息，您可以通过$statsParams轻松地在州之间传递信息。
现场演示：http://plnkr.co/edit/37O7NFnrKYsgwbF5eqRt
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>exampleApp</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<p><i>Best viewed in pop-out mode to see location changes. Click blue button on the right.</i></p>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">exampleApp</a>
<ul class="nav">
<li><a ui-sref="settings">settings</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="span12">
<div class="well" ui-view></div>
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- App Script -->
<script>
var exampleApp = angular.module('exampleApp', ["ui.router"])
exampleApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise("/home");
//
// Now set up the states
$stateProvider
.state('index', {
url: "/index",
})
.state('settings', {
url: "/settings",
templateUrl: "settings.html"
})
.state('settings.account', {
url: "/account",
templateUrl: "settings.account.html",
controller: function($scope) {
$scope.account = "i'm the account view"
}
})
.state('settings.profile', {
url: "/profile",
templateUrl: "settings.profile.html",
controller: function($scope) {
$scope.profile = "i'm the profile view"
}
})
.state('home', {
url: "/home",
templateUrl: "home.html"
});
});
</script>
</body>
</html>
<h1>I'm the home view</h1>
<h1>Settings view</h1>
<hr/>
<p><a ui-sref=".account">Account</a></p>
<p><a ui-sref=".profile">Profile</a></p>
<div ui-view></div>
<h3>Account view</h3>
<ul>
{{account}}
</ul>
<h3>Profile View</h3>
<ul>
{{profile}}
</ul>
我直接在索引中添加模块配置。