2016-08-11 4 views
1

Привет, ребята, я пытаюсь использовать маршрутизацию, но все же новичок в угловой, хотя :(У меня есть первая страница, уже сделанная, но я пытаюсь ее сделать, когда вы нажимаете кнопку «Ввод», следующая страница появляется поверх текущей (так что в основном новая страница). Причина, по которой я хочу, чтобы это была одна страница, так я могу перенести данные с первой страницы на вторую страницу, однако я не могу заставить ее загружать следующую страницу. .. Вот мой HTML и JS до сих пор ,, не знаю, где им будет неправильно -_-Angular.js routing

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/kandi.css"> 
</head> 
<body data-ng-app="nameBox" class="ng-scope"> 
    <ng-view></ng-view> 
    <section class="frontPageBox"> 
     <div data-ng-controller="appearCntrl"> 
      <form action="" method="">   
       <input type="text" data-ng-bind="name" data-ng-model="name" placeholder="Your Name..." id="name-input"> 
       <a type="button" class="button" href="#/kandi2" style="text-decoration:none;color:#ccc;">Enter</a>    
      </form> 
      <p style="color:#999; font-size: 1.1em;">{{"Welcome " + name}}</p> 
     </div> 

    </section> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 




    <script type="text/javascript"> 
     var app = angular.module("nameBox", ["ngRoute"]); 
     app.config(function($routeProvider) { 
      $routeProvider 
       .when("/kandi2", { 
        templateUrl : "kandi2.html" 
       }); 
      }); 
     app.controller("appearCntrl", function($scope){ 
      $scope.name = ""; 
      $scope.data = []; 
      $scope.data.push(name); 
     }); 
    </script> 
</body> 
</html> 
+0

любые ошибки в консоли? – AranS

+0

не могли бы вы это исправить? –

+0

Я думаю, что с помощью Factory вы можете легко передавать данные на любом контроллере. – VjyV

ответ

0

проблема из-за нг ракурса тега

<ng-view></ng-view> 

Дает <!-- ngView: undefined --> элемент в DOM, там негде прикрепить вид.

Вы могли бы написать что-то вроде:

<div ng-view></div> 

Затем он должен работать.

+0

, когда Я использую

.. и я нажимаю кнопку, чтобы загрузить следующую страницу, она показывает в адресной строке, что следующая страница была нажата, но ничего не загружается. – mosesjulafe

+0

Я скопировал ваш код в свое решение, и он работает для меня, но только когда я сделал это. Единственное, что действительно может отличаться, это templateUrl. Является ли "kandi2.html" допустимым путем? Вы можете использовать вкладку браузера nerwork для подтверждения. –

+0

html действительно, я даже попробовал его с другим html ... мне нужно быть на сервере, чтобы он работал? или вы просто скопировали пасту в файл, и это сработало? – mosesjulafe