html部分：
<div class="container">
<script type="text/ng-template" id="register.html">
<div class="col-md-6 col-md-offset-3" >
<div class="panel panel-default">
<div class="panel-heading" >
<h3 class="panel-title">注册</h3>
</div>
<!---定义控制器--->
<div class="panel-body" ng-controller="SignupController">
<!----登录表单---->
[user.signup_data]
<form name="signup" class="form-horizontal" role="form" ng-submit="user.signup()">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">UserName</label>
<div class="col-sm-6">
<!----验证规则----->
<!--- ng-model-options="{updateOn:'default blur',debounce:{default:1000,blur:0}}" 如果没有失去焦点1秒后同步数据 失去焦点马上同步数据---->
<input type="text" name="username" class="form-control" id="username" placeholder="username"
ng-model="user.signup_data.username"
ng-minlength="4"
ng-maxlength="16"
ng-model-options="{updateOn:'default blur',debounce:{default:2000,blur:0}}"
required
/>
</div>
<!----$touched事件------>
<div ng-if="signup.username.$touched">
<!----错误提示---->
<span ng-if="signup.username.$error.required">用户名必填</span>
<span ng-if="signup.username.$error.maxlength || signup.username.$error.minlength ">用户名长度4-16</span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-6">
<input type="password" name="password" class="form-control" id="inputPassword3" placeholder="Password"
ng-model="user.signup_data.password"
ng-minlength="6"
ng-maxlength="24"
ng-model-options="{updateOn:'default blur',debounce:{default:2000,blur:0}}"
required
/>
</div>
<div ng-if="signup.password.$touched">
<span ng-if="signup.password.$error.required">密码必填</span>
<span ng-if="signup.password.$error.maxlength || signup.password.$error.minlength ">密码长度6-24</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-7">
<button type="submit" class="btn btn-default" ng-disabled="signup.$invalid">Sign in</button>
</div>
</div>
</form>
<!----登录表单 end---->
</div>
</div>
</div>
</script>
</div>AngularJs部分：
(function(){
var an =angular.module('_an',['ui.router']);
an.config(['$interpolateProvider','$stateProvider','$urlRouterProvider',function($interpolateProvider,$stateProvider,$urlRouterProvider){
$interpolateProvider.startSymbol('[');
$interpolateProvider.endSymbol(']');
// 定义路由规则
$urlRouterProvider.otherwise('/home'); // 默认路由
$stateProvider.state('home',{url:'/home', template:'首页'});
$stateProvider.state('login',{url:'/login', templateUrl:'login.html'});
$stateProvider.state('register',{url:'/register', templateUrl:'register.html'});
}]);
// 用户注册
an.service('UserService',['$http',function($http){
var m = this;
m.signup_data = {};
m.signup = function(){
// 发送用户注册数据
$http.post('register',m.signup_data).then(function(response){
// 成功时执行
// console.log(response);
m.signup_data = {};
$state.go('login');
}),function(response){
// 失败时执行
console.log(response);
}
}
m.username_exists = function(){
// 判断用户名是否存在
$http.post('user_exists',{username:m.signup_data.username}).then(function(response){
// 成功时执行
if(response.data.status && response.data.count){
m.signup.username_exists = true;
}else{
m.signup.username_exists = false;
}
}),function(response){
// 失败时执行
console.log(response);
}
}
}]);
// 用户注册控制器
an.controller('SignupController',['$scope','UserService',function($scope, UserService){
$scope.user = UserService;
//$watch监听数据变化
$scope.$watch(function(){
return UserService.signup_data;
},function(n,o){
if(n.username != o.username){
UserService.username_exists();
}
},true);
}]);
})();
