2015-03-22 3 views
1

Я создаю угловую структуру App.The файла выглядит следующим образом:ngRoute не работает

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> 

Когда я открываю index.html на сервере с помощью python -m SimpleHTTPServer, не содержание login.html файла в index.html. Может ли кто-нибудь сказать мне, почему ng-route не работает в вышеуказанном случае?

+0

Не так много информации об устранении неполадок. Используйте консоль инструментов браузера dev, чтобы проверить наличие ошибок и посмотреть, что происходит с фактическим запросом ajax для шаблона – charlietfl

ответ

2

Первый: templateUrl должен относиться к корню приложения. Я не думаю, что действителен ../login.html.

Если шаблоны расположены в корневой директории сайта, попробуйте это

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

Второе: На угловом 1.3, <base> тег должен быть добавлен в раздел <head>.

<base href="/"> 
+0

Я никогда не использовал тег 'app', где это документировано, что оно * требуется *? – charlietfl

+0

Извините. это '' тег. Исправлен код. –

+0

'' не требуется, если вы не используете html5mode – charlietfl

0

Первым делом вы должны иметь какую-то ценность внутри .otherwise() или просто удалить его. Тогда это будет работать

Смежные вопросы