Cara Membuat Login Sistem Menggunakan AngularJS Part 2

Halo teman teman di kesempatan kali ini kita masih membahas mengenai login system, di panduan Cara Merancang Login Aplikasi Menggunakan AngularJS Part 2, kita akan merancang module dan controller bagi prosesnya, di panduan sebelumnya kita telah merancang file index.html yang berfungsi bagi menampilkan hasil dari controller, nah seandainya teman teman lupa silahkan lihat di panduan sebelumnya di Cara Membuat Login Sistem Menggunakan AngularJS Part 1,

Oke teman teman kita seketika saja masuk ke study casenya mengenai Cara Merancang Login Aplikasi Menggunakan AngularJS Part 2,

Langkah pertama-tama kita akan bikin module nya terlebih dahulu seperti script dibawah ini,

var app = angular.module('myApp', ['ui.router']);

Setelah kita merancang module nya berikutnya kita akan bikin controllernya, disini kita menggunakan dua controller yaitu LoginController dan HomeController bagi proses dari login itu sendiri. Scriptnya Seperti dibawah ini.

app.controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) {
 ...
 }

 app.controller('HomeController', function($scope, $rootScope, $stateParams, $state, LoginService) { 
 ...
 }

Saya rasa teman teman telah paham ya mengenai module dan controller nya, berikutnya kita akan bikin sebuah folder baru yang bernama js silahkan teman teman simpan script dibawah ini di folder js tersebut dengan nama file angular.js

(function() {
  var app = angular.module('myApp', ['ui.router']);
  
  app.run(function($rootScope, $location, $state, LoginService) {
    $rootScope.$on('$stateChangeStart', 
      function(event, toState, toParams, fromState, fromParams){ 
          console.log('Changed state to: ' + toState);
      });
    
      if(!LoginService.isAuthenticated()) {
        $state.transitionTo('login');
      }
  });
  
  app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    
    $stateProvider
      .state('login', {
        url : '/login',
        templateUrl : 'login.html',
        controller : 'LoginController'
      })
      .state('home', {
        url : '/home',
        templateUrl : 'home.html',
        controller : 'HomeController'
      });
  }]);

  app.controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) {
    $rootScope.title = Cara Merancang Login Aplikasi Menggunakan AngularJS;
    
    $scope.formSubmit = function() {
      if(LoginService.login($scope.username, $scope.password)) {
        $scope.error = '';
        $scope.username = '';
        $scope.password = '';
        $state.transitionTo('home');
      } else {
        $scope.error = username dan password yang sahabat masukan salah !;
      }   
    };
    
  });
  
  app.controller('HomeController', function($scope, $rootScope, $stateParams, $state, LoginService) {
    $rootScope.title = Cara Merancang Login Aplikasi Menggunakan AngularJS;
    
  });
  
  app.factory('LoginService', function() {
    var admin = 'admin';
    var pass = 'dumet';
    var isAuthenticated = false;
    
    return {
      login : function(username, password) {
        isAuthenticated = username === admin  password === pass;
        return isAuthenticated;
      },
      isAuthenticated : function() {
        return isAuthenticated;
      }
    };
    
  });
  
})();

Berikutnya silahkan disave file angular.js nya dan coba jalan kan di browser dengan username : admin dan password : dumet  seandainya berhasil karenanya hasilnya seperti dibawah ini,

Oke teman teman lumayan gampang bukan cara Cara Merancang Login Aplikasi Menggunakan AngularJS Part 2 nya.

Lumayan demikian dulu panduan saya kali ini mengenai Cara Merancang Login Aplikasi Menggunakan AngularJS Part 2, semoga bermanfaat

Terimakasih.

Download Script

Cara Membuat Login Sistem Menggunakan AngularJS Part 1

Sumber https://kursuswebsite.org