arjun
Reputation: 107
index.html page not loading in controller
in app.js
$routeProvider.when('/', {
templateUrl : appUrl + '/index.html',
controller : 'HomePageController'
});
in controller.js
angular.module('PoliticalOrg').controller('HomePageController',function( $scope ) {
$scope.Login= function () {
alert("s");
}
});
in 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>
<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">
<li class="dropdown"> <a id="main-menu-toggle" href="#main-menu" class=""> <div class="iconset top-menu-toggle-white"></div> </a> </li>
</ul>
<!-- BEGIN LOGO -->
<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">
<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">
<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 -->
</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">
<div class="page-title">
<h3>Home Page</h3>
</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 -->
<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 -->
<!-- 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>I mentioned app.js and controller.js in index.html. Here's the problem I am facing. When I click on the login button in index.html ng-click="Login()" function defined in HomePageController the Login function is not called.
Upvotes: 0
Views: 1329
Answers (1)
miqe
Reputation: 3369
This happened because the controller is not loaded correctly, you were trying to load the controller form the index.html page at the same time you included your scripts on index.html page.
$routeProvider.when('/', {
templateUrl : appUrl + '/index.html',
controller : 'HomePageController'
});
so what you should do is breakdown your views using ui-view.
put the folowing in home.html file
<!-- 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 -->
and add ui-view in the index.html instead of the above code. then change the route like this
$routeProvider.when('/', {
templateUrl : appUrl + '/home.html',
controller : 'HomePageController'
})
i.e you should initialize the index.html from the file not from the route
Follow this ui-router documentation.
Upvotes: 0
Related Questions
- Ng-model does not update controller value
- Insert HTML into view from AngularJS controller
- Combating AngularJS executing controller twice
- Can one AngularJS controller call another?
- How to use a filter in a controller?
- How to execute AngularJS controller function on page load?
- AngularJS access parent scope from child controller
- Can an AngularJS controller inherit from another controller in the same module?
- Link vs compile vs controller