登录：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link rel="manifest" href="manifest.json"> <!-- un-comment this code to enable service worker <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js') .then(() => console.log('service worker installed')) .catch(err => console.log('Error', err)); } </script>--> <link href="lib/ionic/CSS/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> <script src="js/Login.js"></script></head><body ng-app="myApp" ng-controller="myCtrl"> <ion-pane> <ion-content> <div class="bar bar-header "> <div class="h1 title">用户登录</div> </div> <div class="content has-header"> <form ng-submit="onSubmit(myForm.$valid)" name="myForm" novalidate> <div class="list"> <div class="item-input-inset"> <label class="item-input-wrapper"> <i class="icon ion-person"></i> <input type="text" name="user" id="user" ng-model="user" placeholder="用户名" required> <div ng-show="myForm.user.$invalid && submitted"> <div style="color:red" ng-show="myForm.user.$error.required">用户名是必须的</div> </div> </label> </div> <div class="item-input-inset"> <label class="item-input-wrapper"> <i class="icon ion-locked"></i> <input type="passWord" name="password" ng-model="password" id="password" placeholder="密码" required> <div ng-show="myForm.password.$invalid && submitted"> <div style="color:red" ng-show="myForm.password.$error.required">密码是必须的</div> </div> </label> </div> </div> <div class="padding"> <button class="button button-full button-dark" type="submit">登录</button> </div> </form> </div> </ion-content> </ion-pane> <script> 'use strict'; var myApp = angular.module('myApp',[]); myApp.controller('myCtrl',['$scope', '$http',function($scope, $http){ // $scope.formModel = {}; $scope.submitted = false; $scope.onSubmit = function(){ if ($scope.myForm.$valid) { var param = { User: $scope.user, Pwd: $scope.password } $http.post('someurl',param) .success(function(data){ console.log(':)'); }) .error(function(data){ console.log(':('); }); console.log(param);}else{ $scope.submitted = true;} }}]); </script> </body></html>不填写信息登录就会如图所示：
注册：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> <script src="js/Register.js"></script> <!-- <script src="js/controllers.js"></script> <script src="js/services.js"></script> --></head><body ng-app="myApp" ng-controller="myCtrl"> <!-- The nav bar that will be updated as we navigate between views. --> <!-- The views will be rendered in the <ion-nav-view> directive below Templates are in the /templates folder (but you could also have templates inline in this html file if you'd like). --> <ion-nav-view> <ion-content> <div class="bar bar-header "> <div class="h1 title">用户注册</div> </div> <div class="content has-header"> <form ng-submit="onSubmit(myForm.$valid)" name="myForm" novalidate> <div class="list"> <div class="item-input-inset"> <label class="item-input-wrapper"> <i class="icon ion-person"></i> <input type="text" name="user" id="user" ng-model="user" placeholder="用户名" required> <div ng-show="myForm.user.$invalid && submitted"> <div style="color:red" ng-show="myForm.user.$error.required">用户名是必须的</div> </div> </label> </div> <div class="item-input-inset"> <label class="item-input-wrapper"> <i class="icon ion-locked"></i> <input type="password" name="password1" ng-model="password1" required id="password1" placeholder="密码"> <div ng-show="myForm.password1.$invalid && submitted"> <div style="color:red" ng-show="myForm.password1.$error.required">密码是必须的</div> </div> </label> </div> <div class="item-input-inset"> <label class="item-input-wrapper"> <i class="icon ion-locked"></i> <input type="password" name="password2" ng-model="password2" id="password2" required placeholder="确认密码"> <div ng-show="myForm.password2.$invalid && submitted"> <div style="color:red" ng-show="myForm.password2.$error.required">确认密码是必须的</div> </div> <div ng-show="myForm.password2.$valid"> <div style="color:red" ng-show="password1!=password2">两次密码输入不一致</div> </div> </label> </div> </div> <div class="padding"> <button class="button button-full button-dark" type="submit">注册</button> </div> </form> </div> </ion-content> </ion-nav-view> <script> 'use strict'; var myApp = angular.module('myApp',[]); myApp.controller('myCtrl',['$scope', '$http',function($scope, $http){ // $scope.formModel = {}; $scope.submitted = false; $scope.onSubmit = function(){ if ($scope.myForm.$valid) { var param = { User: $scope.user, Pwd1: $scope.password1, Pwd2:$scope.password2 } $http.post('someurl',param) .success(function(data){ console.log(':)'); }) .error(function(data){ console.log(':('); }); console.log(param);}else{ $scope.submitted = true;} }}]); </script></body></html>不填写信息注册就会出现下图：
新闻热点
疑难解答
