controller.js代码
angular.module('Zoho.controllers', [])
.controller('loginController', function($scope, $state) {
$scope.login = function(loginData) {
console.log(loginData);
}})
.controller('signUpController', function($scope, $state) {
$scope.signUp = function(signUpData) {
console.log(signUpData);
}})
app.js
angular.module('Zoho',
['ui.router','Zoho.controllers','Zoho.services','Zoho.directive'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('login');
$stateProvider
.state('login',{
url: '/login',
templateUrl : 'pages/login.html',
controller : 'loginController'
})
.state('signUp',{
url: '/signup',
templateUrl : 'pages/login.html',
controller : 'signUpController'
});
此处只有登录部分正在执行,但注册无效,我使用ng-show和ng-hide方法在单页中同时使用注册和登录代码
的login.html
<div class="container-fluid login" ng-show="showDiv">
<div class="col-lg-4 col-sm-12 col-md-4">
<h1 class="title">Login</h1>
<input placeholder="Username" type="text" ng-model="loginData.username" required="required"/>
<input placeholder="Mobile" type="number" ng-model="loginData.mobile" required="required"/>
<button class="btn-signUp" ng-click="login(loginData)">Login <span class="glyphicon glyphicon-log-in"></span></button>
<p>New User <button class="btn-link" ng-click="showDiv=false">SignUp</button></p>
</div>
</div>
<div class="container-fluid login" ng-hide="showDiv">
<div class="col-lg-4 col-sm-12 col-md-4">
<h1 class="title">Register</h1>
<input placeholder="Name" type="text" ng-model="signUpData.name" required="required"/>
<input placeholder="Username" type="text" ng-model="signUpData.username" required="required"/>
<input placeholder="Mobile" type="number" ng-model="signUpData.mobile" required="required"/>
<input placeholder="Email" type="email" ng-model="signUpData.email" required="required"/>
<button class="btn-signUp" ng-click="signUp(signUpData)">SignUp <span class="glyphicon glyphicon-log-in"></span></button>
<p>Already User<button class="btn-link" ng-click="showDiv=true">Login</button>
</div>
</div>