Question

我有角度路由问题。

的index.html：

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script data-require="angular-route@*" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular-route.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="loginController.js"></script>
  <script src="loginService.js"></script>
  <script src="AppController.js"></script>
</head>

<body ng-app="betsApp" ng-controller="appCtrl">
  <div class="container">
    <div ng-view></div>
  </div>
</body>

AppController.js

var betsApp = angular.module('betsApp', ['ngRoute', 'loginApp', 'loginService']);

betsApp.config(function($routeProvider, $locationProvider)
{
    $locationProvider.html5Mode(true);
    $routeProvider.when('/', {templateUrl: '/error.html'})
        .when('/login', {templateUrl: '/pages/loginView.html'});
});

betsApp.controller('appCtrl', function($scope)
{

});

loginView.html：

<div ng-app="loginApp" ng-controller="loginCtrl">
    <h1>Login</h1>
    <hr>
    <form>
        <div class="form-group">
            <input type="email" ng-model="credentials.email" value="{{credentials.email}}">
        </div>
        <div class="form-group">
            <input type="password" ng-model="credentials.password" value="{{credentials.password}}">
        </div>
        <div class="form-group">
            <input type="button" value="Login" ng-click="doLogin()">
        </div>
    </form>
</div>

问题是我只看到没有任何插入视图的白页。 here是一个关于plunker的链接。

Answer 1

指向plnkr的链接与您在上面提供的代码（路径定义）

不匹配

话虽如此，我可以通过关闭html5Mode

来获取路由

注意：即使是有角度的路由示例也无法使用w / html5Mode ... http://plnkr.co/edit/7YNtWncWYtxceELnzkAT?p=preview

此外，在loginView中，您尝试定义不允许的ng-app="loginApp"，而您可以使用嵌套的ng-app（除非您手动引导它们documentation）

角度路由无法正常工作

1 个答案: