文章/答案/技术大牛

发布

问ngRoute不工作
EN

Stack Overflow用户

提问于 2015-03-22 17:13:57

回答 2查看 708关注 0票数 1

我创建的一个角度App.The文件结构如下：

index.html
login.html
js/index.js

index.html内容是

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

        <title>Hello World</title>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script href="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" ></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" ></script>

    </head>
    <body ng-app="single-page-app">
    <div ng-view>   </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

js/index.js内容是

var app1=angular.module('single-page-app',['ngRoute']);
app1.config(function($routeProvider){
      $routeProvider
          .when('/',{
                templateUrl: '../login.html'
          }).otherwise()
});

而login.html的内容是

<form class="form-horizontal"  style="position:absolute;top:30%;left:20%">
  <div class="form-group col-xs-offset-2">
    <label for="userName" class="col-xs-3 control-label">UserName</label>
    <div class="col-xs-7">
      <input type="text" class="form-control col-xs-offset-1" id="userName" placeholder="UserName">
    </div>
  </div>
  <div class="form-group col-xs-offset-2">
    <label for="password" class="col-xs-3 control-label">Password</label>
    <div class="col-xs-7">
      <input type="password" class="form-control col-xs-offset-1" id="password" placeholder="Password">
    </div>
  </div>

  <div class="form-group">
    <div class=" col-xs-12">
      <button type="submit" class="btn btn-default col-xs-offset-4">Sign in</button>
    </div>
  </div>
</form>

当我使用python -m SimpleHTTPServer在服务器上打开index.html时，index.html中没有login.html文件的内容。谁能告诉我为什么ng-route在上面的情况下不能工作？

javascript

html

angularjs

ngroute

回答 2

Stack Overflow用户

发布于 2015-03-22 17:22:32

首先：templateUrl应该是相对于应用根目录的。我不认为../login.html是有效的。

如果模板位于网站根目录中，请尝试执行以下操作

var app1=angular.module('single-page-app',['ngRoute']);
app1.config(function($routeProvider){
  $routeProvider
      .when('/',{
            templateUrl: '/login.html' // the edited line
      }).otherwise()
});

第二:从angular 1.3开始，应该在<head>部分添加一个<base>标记。

<base href="/">

票数 2

Stack Overflow用户

发布于 2015-03-22 18:23:22

首先，你必须在.otherwise()中拥有某种值，或者干脆把它去掉。然后它就能工作了

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29192684

复制

相似问题

问ngRoute不工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ngRoute不工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ngRoute不工作
EN