index.html страница не загружается в контроллер

в app.jsindex.html страница не загружается в контроллер

$routeProvider.when('/', { 
    templateUrl : appUrl + '/index.html', 
    controller : 'HomePageController' 
});

в controller.js

angular.module('PoliticalOrg').controller('HomePageController',function( $scope) { 

$scope.Login= function() { 
alert("s"); 
} 
});

в index.html

<!DOCTYPE html> 
 
    <html lang="en" ng-app="PoliticalOrg"> 
 
     <head> 
 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
 
     <meta charset="utf-8"> 
 
    <title>Organization</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
 
    <meta content="" name="description"> 
 
    <meta content="" name="author"> 
 

 
     <link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" media="screen"> 
 
    <!-- BEGIN CORE CSS FRAMEWORK --> 
 
     <link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
    <link href="assets/plugins/boostrapv3/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"> 
 
    <link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"> 
 
    <link href="assets/css/animate.min.css" rel="stylesheet" type="text/css"> 
 
    <link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css"> 
 
    <!-- END CORE CSS FRAMEWORK --> 
 
    <script src="libs/vendor/angularJS/angular.min.js"></script> 
 
     <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script> 
 
\t 
 
    <script src="js/login/config.js"></script> 
 
    <script src="js/login/Controllers.js"></script> 
 
    <script type="js/login/services.js"></script> 
 
    <script type="js/globalmethods/login.js"></script> 
 
    <!-- BEGIN CSS TEMPLATE --> 
 
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"> 
 
    <link href="assets/css/responsive.css" rel="stylesheet" type="text/css"> 
 
    <link href="assets/css/custom-icon-set.css" rel="stylesheet" type="text/css"> 
 
    <!-- END CSS TEMPLATE --> 
 

 
    <script src="js/app.js"></script> 
 
    <script src="js/Controllers.js"></script> 
 
    
 
     <script src="js/registration/config.js"></script> 
 
     <script src="js/registration/Controllers.js"></script> 
 
    
 
     <script src="js/login/config.js"></script> 
 
     <script src="js/login/Controllers.js"></script> 
 
     <script src="js/login/services.js"></script> 
 
    
 
     <script src="js/candidate/config.js"></script> 
 
     <script src="js/candidate/Controllers.js"></script> 
 
     <script src="js/candidate/services.js"></script> 
 
    
 
     <script src="js/submemberrequests/config.js"></script> 
 
     <script src="js/submemberrequests/Controllers.js"></script> 
 
     <script src="js/submemberrequests/services.js"></script> 
 
    
 
     <script src="js/messages/config.js"></script> 
 
     <script src="js/messages/Controllers.js"></script> 
 
     <script src="js/messages/services.js"></script> 
 
    
 
     <script src="js/users/config.js"></script> 
 
     <script src="js/users/Controllers.js"></script> 
 
     <script src="js/users/services.js"></script> 
 
    
 
      <script src="js/admin/config.js"></script> 
 
     <script src="js/admin/Controllers.js"></script> 
 
     <script src="js/admin/services.js"></script> 
 
    
 
     <script src="js/users/services.js"></script> 
 
     <script src="js/globalmethods/map.js"></script> 
 
     <script src="js/globalmethods/login.js"></script> 
 
    </head> 
 
    <!-- END HEAD --> 
 

 
     <!-- BEGIN BODY --> 
 
     <body class="boxed-layout breakpoint-1024 pace-done grey"><div class="pace pace-inactive"><div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;"> 
 
     <div class="pace-progress-inner"></div> 
 
    </div> 
 
    <div class="pace-activity"></div></div> 
 
    <!-- BEGIN HEADER --> 
 
     <div class="container"> 
 
    <div class="header navbar navbar-inverse "> 
 
     <!-- BEGIN TOP NAVIGATION BAR --> 
 
     <div class="container"> 
 
     <div class="navbar-inner"> 
 
     <div class="header-seperation" style="display: none; height: 61px;"> 
 
      <ul class="nav pull-left notifcation-center" id="main-menu-toggle-wrapper" style="display:none"> \t 
 
      <li class="dropdown"> <a id="main-menu-toggle" href="#main-menu" class=""> <div class="iconset top-menu-toggle-white"></div> </a> </li> \t \t 
 
      </ul> 
 
      <!-- BEGIN LOGO --> \t 
 
      <a href="index.html"><img src="assets/img/logo.png" class="logo" alt="" data-src="assets/img/logo.png" data-src-retina="assets/img/logo2x.png" width="106" height="21"></a> 
 
      <!-- END LOGO --> 
 
      <ul class="nav pull-right notifcation-center"> \t 
 
      <li class="dropdown" id="header_task_bar"> <a href="index.html" class="dropdown-toggle active" data-toggle=""> <div class="iconset top-home"></div> </a> </li> 
 
      <li class="dropdown" id="header_inbox_bar"> <a href="email.html" class="dropdown-toggle"> <div class="iconset top-messages"></div> <span class="badge animated bounceIn" id="msgs-badge">2</span> </a></li> 
 
      <li class="dropdown" id="portrait-chat-toggler" style="display:none"> <a href="#sidr" class="chat-menu-toggle"> <div class="iconset top-chat-white "></div> </a> </li>   
 
      </ul> 
 
      </div> 
 
      <!-- END RESPONSIVE MENU TOGGLER --> 
 
      <div class="header-quick-nav"> 
 
      <!-- BEGIN TOP NAVIGATION MENU --> 
 
      
 
     <!-- END TOP NAVIGATION MENU --> 
 
     <!-- BEGIN CHAT TOGGLER --> 
 
      <div class="pull-right"> 
 
      <div class="chat-toggler"> \t 
 
        <a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title=""> 
 
         <div class="user-details"> 
 
          <div class="username"> 
 
           
 
           <span class="bold">Login</span> \t \t \t \t \t \t \t \t \t 
 
          </div> \t \t \t \t \t \t 
 
         </div> 
 
         <div class="iconset top-down-arrow"></div> 
 
        </a> \t 
 
        <div id="notification-list" style="display:none"> 
 
         <div style="width:300px"> 
 
          
 
       <div class="grid-body no-border"> 
 
       <div class="row-fluid"> 
 
       
 
       <p>Enter your username and password to login</p> 
 
       <br> 
 
       <div class="row form-row"> 
 
        <div class="input-append col-md-10 col-sm-10 primary"> 
 
        <input type="text" id="email" name="email" class="form-control" placeholder="[email protected]"> 
 
        <span class="add-on"><span class="arrow"></span><i class="fa fa-align-justify"></i> </span> </div> 
 
       </div> 
 
       <div class="row form-row"> 
 
        <div class="input-append col-md-10 col-sm-10 primary"> 
 
        <input type="password" id="password" name="password" class="form-control" placeholder="your password"> 
 
        <span class="add-on"><span class="arrow"></span><i class="fa fa-lock"></i> </span> </div> 
 
       </div> 
 
       </div> 
 
       <div class="form-actions"> 
 
       <div class="pull-right"> 
 
        <button type="button" ng-click="Login()" value="Login" class="btn btn-primary btn-cons-md"> login</button> 
 
        <button type="button" class="btn btn-white btn-cons-md">Clear</button> 
 
       </div> 
 
       </div> 
 
      </div> 
 
          </div> \t \t \t \t 
 
        </div> 
 
       </div> 
 
       
 
      </div> 
 
      <!-- END CHAT TOGGLER --> 
 
      </div> 
 
      <!-- END TOP NAVIGATION MENU --> 
 

 
     </div> 
 
     <!-- END TOP NAVIGATION BAR --> 
 
    </div> 
 
</div> 
 
<!-- END HEADER --> 
 
<!-- BEGIN CONTAINER --> 
 
<div class="page-container row-fluid"> 
 
    <!-- BEGIN SIDEBAR --> 
 
    
 
    <a href="#" class="scrollup to-edge">Scroll</a> 
 
    <!-- END SIDEBAR --> 
 
    <!-- BEGIN PAGE CONTAINER--> 
 
    <div class="page-content condensed" data-height="679"> 
 
    <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM--> 
 
    <div id="portlet-config" class="modal hide"> 
 
     <div class="modal-header"> 
 
     <button data-dismiss="modal" class="close" type="button"></button> 
 
     <h3>Widget Settings</h3> 
 
     </div> 
 
     <div class="modal-body"> Widget settings form goes here </div> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    <div class="content"> 
 
\t \t <div class="page-title"> \t 
 
\t \t \t <h3>Home Page</h3> \t \t 
 
\t \t </div> 
 
    </div> 
 
    </div> 
 
<!-- BEGIN CHAT --> 
 

 
<!-- END CHAT --> 
 
</div> 
 
<!-- END CONTAINER --> 
 
<!-- BEGIN CORE JS FRAMEWORK--> 
 
<script src="assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script> 
 
<script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script> 
 
<script src="assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script> 
 
<script src="assets/plugins/breakpoints.js" type="text/javascript"></script> 
 
<script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script> 
 
<script src="assets/plugins/jquery-block-ui/jqueryblockui.js" type="text/javascript"></script> 
 
<script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js" type="text/javascript"></script> 
 
<!-- END CORE JS FRAMEWORK --> 
 
<!-- BEGIN PAGE LEVEL JS --> \t 
 
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script> 
 
<script src="assets/plugins/jquery-numberAnimate/jquery.animateNumbers.js" type="text/javascript"></script> 
 
<!-- END PAGE LEVEL PLUGINS --> \t 
 

 
<!-- BEGIN CORE TEMPLATE JS --> 
 
<script src="assets/js/core.js" type="text/javascript"></script> 
 
<script src="assets/js/chat.js" type="text/javascript"></script> 
 
<script src="assets/js/demo.js" type="text/javascript"></script> 
 
<!-- END CORE TEMPLATE JS --> 
 

 
</div><div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"><div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div></div></body></html>

app.js я упомянул и controller.js в index.html. Вот проблема, с которой я столкнулся. Когда я нажимаю кнопку входа в функцию index.html ng-click="Login()", определенную в HomePageController, функция входа не вызывается.

источник

2016-06-06 arjun

Могу ли я увидеть ваш 'index.html'? – pietro909

Вы могли бы добавить еще какой-нибудь свой код index.html? –

как вы создаете модуль? Я имею в виду, что 'angular.module ('PolitOrg')' просто вызывает это. У вас должен быть некоторый код, включая массив зависимостей, например 'angular.module ('PolitOrg', [])' для его создания. У вас есть ошибка в консоли? – pietro909

Это произошло потому, что контроллер не загружен правильно, вы пытались загрузить контроллер с страницы index.html, в то же время вы включили свои скрипты на странице index.html.

$routeProvider.when('/', { 
    templateUrl : appUrl + '/index.html', 
    controller : 'HomePageController' 
});

так, что вы должны сделать, это расстройство ваши мнения, используя ui-view. поставил на следующие в home.html файле

<!-- BEGIN CHAT TOGGLER --> 
      <div class="pull-right"> 
      <div class="chat-toggler"> 
        <a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title=""> 
         <div class="user-details"> 
          <div class="username"> 

           <span class="bold">Login</span>          
          </div>      
         </div> 
         <div class="iconset top-down-arrow"></div> 
        </a>  
        <div id="notification-list" style="display:none"> 
         <div style="width:300px"> 

       <div class="grid-body no-border"> 
       <div class="row-fluid"> 

       <p>Enter your username and password to login</p> 
       <br> 
       <div class="row form-row"> 
        <div class="input-append col-md-10 col-sm-10 primary"> 
        <input type="text" id="email" name="email" class="form-control" placeholder="[email protected]"> 
        <span class="add-on"><span class="arrow"></span><i class="fa fa-align-justify"></i> </span> </div> 
       </div> 
       <div class="row form-row"> 
        <div class="input-append col-md-10 col-sm-10 primary"> 
        <input type="password" id="password" name="password" class="form-control" placeholder="your password"> 
        <span class="add-on"><span class="arrow"></span><i class="fa fa-lock"></i> </span> </div> 
       </div> 
       </div> 
       <div class="form-actions"> 
       <div class="pull-right"> 
        <button type="button" ng-click="Login()" value="Login" class="btn btn-primary btn-cons-md"> login</button> 
        <button type="button" class="btn btn-white btn-cons-md">Clear</button> 
       </div> 
       </div> 
      </div> 
          </div>    
        </div> 
       </div> 

      </div> 
      <!-- END CHAT TOGGLER -->

и добавить ui-view в index.html вместо указанного выше кода. затем изменить маршрут как этот

$routeProvider.when('/', { 
    templateUrl : appUrl + '/home.html', 
    controller : 'HomePageController' 
})

т.е. вы должны инициализировать index.html из файла не из маршрута

Следуйте этой ui-router документации.

источник

2016-06-06 09:48:16 Miqe

ok Спасибо @ Mike0 – arjun

index.html страница не загружается в контроллер

ответ

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