로그인 화면 만들기
관리자 아이디와 비번으로 로그인을 할 때 로그인 성공하면 로그인 성공 페이지로 이동하고, 로그인이 실패하면 경고창을 띄우고, 로그인 창으로 이동한다.
login.html
<!DOCTYPE html> <html lang="en" ng-app="mainApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script type="text/javascript" src="js/angular-route.min.js"></script> <script type="text/javascript" src="js/controller.js"></script> </head> <body> <div ng-view></div> </body> </html>
<div ng-controller="loginCtrl"> <form action="/" id="myLogin"> Username : <input type="text" ng-model="username" id="username"><br /> UserPassword : <input type="text" ng-model="password" id="password"><br /> <button type="button" ng-click="submit()">로그인</button> </form> </div>
controller.js
dashboard.htmlvar app = angular.module('mainApp', ['ngRoute']); app.config(function($routeProvider){ $routeProvider.when('/', { templateUrl : 'login.html' }).when('/dashboard', { templateUrl : 'dashboard.html' }).otherwise({ redirectTo : '/' }); }); app.controller('loginCtrl', function($scope, $location){ $scope.submit = function(){ if($scope.username == 'admin' && $scope.password == 'admin'){ $location.path('/dashboard'); } else { alert('login Failur'); } }; });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> Welcome to My Homepage </body> </html>
로그인 화면
로그인 성공시 이동한 화면
로그인 실패시 경고창 띄우기
'JavaScript > angularJS' 카테고리의 다른 글
| angularJS & filter (0) | 2018.07.22 |
|---|---|
| angularJS $http (0) | 2018.07.22 |
| Routeing (0) | 2018.07.21 |
| AngularJS01. Hello World (0) | 2018.07.20 |
| 3. todo 여러개 출력하기(반복문 사용하기) - ng-repeat (0) | 2018.05.18 |
