问题
<小时/>我将把这个问题分成两个不同的部分。首先，我尝试创建一个单页应用程序，其主 html 页面为 index.html。
在此页面中我有:
<!DOCTYPE html>
<html ng-app="aceTracker">
<head>
<script src="scripts/jquery-2.2.0.min.js"></script>
<script src="scripts/angular/angular.min.js"></script>
<script src="scripts/bootstrap/bootstrap.min.js"></script>
<script src="scripts/app/app.js"></script>
<script src="scripts/controller/controller.js"></script>
<script src="scripts/angular/angular-route.min.js"></script>
<script src="scripts/angular/angular-animate.min.js"></script>
<link href="styles/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="styles/bootstrap/bootstrap-theme.css" rel="stylesheet" />
<link href="styles/default.css" rel="stylesheet" />
<title></title>
<meta charset="utf-8" />
</head>
<body ng-controller="loginController">
<div ng-view></div>
</body>
</html>
然后我创建了一个部分页面，如下所示:
<div class="container-fluid" id="login" ng-controller="loginController">
<div class="row">
<form ng-animate="{enter: 'animate-enter'}" name="loginForm" ng-submit="" autocomplete="off" class="text-center col-lg-4 col-lg-offset-4" style="padding: 300px 50px 0px 50px ;">
<div class="col-lg-12">
<img src="../images/473d5e6a.canvs_logo_white.svg" style="padding-bottom:30px;" />
</div>
<div class="col-lg-12">
<input id="email" name="email" type="email" ng-model="" placeholder="Email" class="login">
</div>
<div class="col-lg-12">
<input id="password" type="password" ng-model="" placeholder="Password" class="login">
</div>
<div class="col-lg-12">
<button type="submit" class="login-button" ng-click="Login()">
<span>Login</span>
</button>
</div>
</form>
</div>
</div>
现在在 Javascript 中我有一个名为 app.js 的文件，如下所示:
var app = angular.module('aceTracker', ['ngAnimate','ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/index.html', { templateUrl: 'partials/login.html', controller: 'loginController'})
// route for the about page
.when('/about.htmll', { templateUrl: 'pages/about.html', controller: 'aboutController' })
});
当我加载我的index.html页面时，我想要加载的部分是login.html，这似乎不起作用？
有什么想法吗？
最佳答案
我认为，您的应用程序正在执行以下操作。如果您加载 www.host.com/yoursite/index.html，那么您将使用路由“/”加载您的应用程序。
要转到您的index.html路线，网址将类似于:www.host.com/yoursite/#/index.html
因此，要使其正常工作，只需将“/index.html”路由更改为“/”路由
$routeProvider
// route for the home page
.when('/', { templateUrl: 'partials/login.html', controller: 'loginController'})
// route for the about page
.when('/about', { templateUrl: 'partials/about.html', controller: 'aboutController' })
您还可以添加默认路由，这样就不会有人错误地到达部分渲染的 View 。我建议您查看这个如何定义路由的示例:
http://www.w3schools.com/angular/angular_routing.asp
此外，每当您认为 Angular native 路由不足以满足您的需求时，我建议您考虑以下替代方案:
关于javascript - 无法让我的 RouteProvider 和 Controller 一样工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39670312/