Как использовать такое же ng-приложение для 2-х разных страниц html?

У меня есть 2 страницы HTML и один app.jsКак использовать такое же ng-приложение для 2-х разных страниц html?

мой поиск-movie.html код, как:

<!DOCTYPE html> 
<html ng-app="adphorusWork"> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Search Movie</title> 
    <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"> 
    <script src="scripts/angular.min.js"></script> 
    <script src="scripts/angular-route.min.js"></script> 
    <script src="scripts/jquery-1.9.1.min.js"></script> 
    <script src="app/app.js"></script> 
</head> 
<body ng-controller="searchMovieController"> 
    <div class="navbar navbar-default navbar-fixed-top" style="margin-top: 20px;"> 
     <div class="container-fluid"> 
      <ul> 
       <li> 
        <a href="http://www.omdbapi.com/">OMDb Api</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="container" style="margin-top: 50px;"> 
     <div class="bs-docs-section" id=""> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <div class="page-header"> 
         <h2><a href="https://github.com/Cakmakk">My Github</a></h2> 
        </div> 
        <div class="bs-component"> 
         <form class="well form-search" id="search-movie" onsubmit="return false;"> 
          <fieldset> 
           <legend>Search Movie</legend> 
          </fieldset> 
          <div> 
           <label class="control-label" for="movie-name">Movie Name : </label> 
           <input type="text" id="movie-name" class="input-small" style="margin-left: 10px;"> 
           <button id="btn-search-movie" type="button" class="btn-sm btn-primary" style="margin-left: 10px;" ng-click="searchMovie()"> 
            <span class="glyphicon glyphicon-search"> Search</span> 
           </button> 
          </div> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

и мой результат-movie.html код как следующее:

<!DOCTYPE html> 
<html> 
<head ng-app="adphorusWork"> 
    <meta charset="UTF-8"> 
    <title>Search Movie</title> 
    <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"> 
    <script src="scripts/angular.min.js"></script> 
    <script src="scripts/angular-route.min.js"></script> 
    <script src="app/app.js"></script> 
    <script src="scripts/jquery-1.9.1.min.js"></script> 
</head> 
<body ng-controller="resultMovieController"> 
    <div class="navbar navbar-default navbar-fixed-top" style="margin-top: 20px;"> 
     <div class="container-fluid"> 
      <ul> 
       <li> 
        <a href="http://www.omdbapi.com/">OMDb Api</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="container" style="margin-top: 50px;"> 
     <div class="bs-docs-section" id=""> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <div class="page-header"> 
         <h2><a href="https://github.com/Cakmakk">My Github</a></h2> 
        </div> 
        <div class="bs-component"> 
         <fieldset> 
          <legend>Result for Search Movie</legend> 
         </fieldset> 
         <div> 
          <button id="btn-result-movie" type="button" class="btn-sm btn-primary" style="margin-top: 40px;" ng-click="backtohome()"> 
           <span class="glyphicon glyphicon-circle-arrow-left"> Home</span> 
          </button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

и мой app.js как следующее:

(function (angular) { 
    'use strict'; 

    var app = angular.module('adphorusWork', []); 

    app.controller('searchMovieController', function ($scope) { 
     $scope.searchMovie = function() { 
      alert("come") 
     } 
    }); 
    app.controller('resultMovieController', function ($scope) { 
     $scope.backtohome = function() { 
      alert("home") 
     } 
    }); 
})(angular);

Моего поиск приклад on работает (в search-movie.html), но моя кнопка «Главная» не работает (в result-movie.html)

Я использую одно и то же ng-приложение на двух страницах html. Я хочу работать на другой кнопке (так что кнопка «Домой»)

Где я делаю неправильно? или Как я могу исправить эту ошибку?

источник

2016-07-07 eagle

но я использую один ng-app - не несколько ng-приложений. @AlonEitan – eagle

Снял мой голос. Извините за это –

, какую маршрутизацию вы используете? я не вижу никаких «ng-view» или маршрутизации – batmaniac7

Для этого вам необходимо использовать Угловой Ui-маршрутизатор. И @Lex правильно, вы не следуете угловому шаблону SPA.

Это хорошо читать: https://github.com/angular-ui/ui-router

эта ссылка может дать краткое подробно об угловом Ui маршрутизатор https://scotch.io/tutorials/angular-routing-using-ui-router

источник

2016-07-07 20:46:45 Prianca

У вас нет:

<script src="app/app.js"></script>

в результирующий-movie.html странице. Однако большой вопрос заключается в том, почему вы так структурируете его? Угловая конструкция разработана как одностраничное приложение (SPA). То, как вы это делаете, я думаю, что в конечном итоге вы получите много проблем.

источник

2016-07-07 20:19:03 Lex

Я добавил, но все еще не работаю. Вы правы, но у меня должна быть 2 разных html-страницы. Как еще я могу это сделать? @lex – eagle

Я заметил, что вы не включать в result-movie.html странице

<script src="app/app.js"></script>

, как для лучший подход - вы можете использовать ngRoute для передачи данных между контроллерами

источник

2016-07-07 20:47:34

Как использовать такое же ng-приложение для 2-х разных страниц html?

ответ

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