login signup Modal for Yeoman Angular generator ap

2019-09-06 19:16发布

问题:

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.