Want to implement login/signup modal should appear on login/signup button click.
Same question is asked before here and followed the instructions in the answer but no luck.
@HankScorpio that is what i achieved so far; (using yeoman angular generator with npm and grunt)
header.html
<nav class="nav" ng-controller="menuController">
<ul class="user-links list-inline pull-right">
<li><a href="/signup" class="header-link-signup text-uppercase" id="signup">Sign up</a></li>
<li ng-controller="myControl"><a href="" ng-click="myControl.openLoginModal()" class="header-link-login text-uppercase">Login</a></li>
<li><a href="" class="btn btn-default">START SELLING</a></li>
</ul>
</nav>
app.js
'use strict';
var myApp = angular
.module('angularfirstApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap'
]);
myApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
controllerAs: 'login'
})
.when('/register', {
templateUrl: 'views/register.html',
controller: 'RegisterCtrl',
controllerAs: 'register'
})
.when('/signup', {
templateUrl: 'views/signup.html',
controller: 'SignupCtrl',
controllerAs: 'signup'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
myApp.controller('menuController', function ($scope, $location) {
$scope.isActive = function (path) {
return $location.path() === path;
};
// stuff here
});
myApp.controller('myControl', function($modal){
var controller = this;
controller.openLoginModal = function(){
var modalInstance = $modal.open({
templateUrl: 'views/login.html',
controller: 'LoginController',
controllerAs: 'login'
});
modalInstance.result.then(function () {
// Redirect to the logged-in area of your site
}, function () {
// optional function. Do something if the user cancels.
});
};
});
login.html
<div ng-view class="login-intro">
<div class="col-md-6 col-md-offset-3">
<h2>Login</h2>
<form name="form" role="form">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" required />
<span class="help-block">Username is required</span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" required />
<span class="help-block">Password is required</span>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</form>
</div>
</div>
Please let me know if there's anything else i need to provide in addition to this question angular is new framework for me.