Question

问题

我将把问题分成两个不同的部分。首先，我试图创建一个单页应用程序，主要的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 这似乎不起作用？

有什么想法吗？

Answer 1

我认为，您的应用正在做的是以下内容。如果您加载www.host.com/yoursite/index.html，那么您将使用路由'/'加载您的应用程序。

要转到index.html路径，网址可能是：www.host.com/yoursite /＃/ index.html

因此，为了使其有效，只需将'/index.html'路线更改为'/'route

即可

$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' })

您还可以添加默认路由，以便没有人会错误地进入部分渲染的视图。我建议你看一下如何定义路线的例子：

http://www.w3schools.com/angular/angular_routing.asp

此外，我建议您查看以下备选方案，无论何时填写角度原生路由都不足以满足您的需求：

https://github.com/angular-ui/ui-router

无法使我的RouteProvider与控制器一样工作

问题

1 个答案: