Cara Membuat Login Sistem Menggunakan AngularJS Part 1

Halo teman teman pada tutorial kali ini saya akan menjelaskan tutorial tentang Cara Membuat Login Sistem Menggunakan AngularJS, pada Cara Membuat Login Sistem Menggunakan AngularJS Part 1 kali ini saya akan membuat sebuah halaman indexnya terlebih dahulu, seperti yang kita ketahui bahwa login system itu seperti sebuah pintu yang berfungsi untuk masuk kedalam system, dan login system juga berfungsi untuk melindungi data yang terdapat didalamnya.

Oke teaman teman contoh login system yang akan kita buat nanti yaitu seperti dibawah ini,

Tanpa berlama lama kita langsung saja masuk ke study casenya teman teman tentang Cara Membuat Login Sistem Menggunakan AngularJS Part 1, langkah yang pertama yang silahkan teman teman buat sebuah folder yang bernama login didalam folder tersebut kita akan buat sebuah file yang bernama index.html, dan silahkan teman teman simpan script dibawah ini dengan nama index.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Cara Membuat Login Mengunakan AngularJS</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
</head>

<body>
  <div class="container" ng-app="myApp">
  <div class="row">
    <div class="col-md-4">
      <div class="page-header">
        <h3>{{ title }}</h3>
      </div>
    </div>
  <div class="col-md-4"></div>
    <div ui-view></div> 
  </div>
  
  <script type="text/ng-template" id="login.html">
  <div class="col-md-4"></div>
    <div class="col-md-12">
      <h4>Silahkan Masukan Username dan Password</h4>
      <form ng-submit="formSubmit()" class="form">
        <div class="col-md-4">
          <div class="form-group">
            <input type="text" class="form-control" ng-model="username" placeholder="username" required=""/>
          </div> 

          <div class="form-group">
            <input type="password" class="form-control" ng-model="password" placeholder="password" required=""/>
          </div>

          <div class="form-group">
            <button type="submit" class="btn btn-success">Login</button>
            <span class="text-danger"><br>{{ error }}</span>
          </div>

        </div>
      </form>
    </div>
  </script>
  
  <script type="text/ng-template" id="home.html">
    <div class="col-md-12">
      <h3>Welcome</h3>
      <h4>Login Berhasil</h4>
      <a ui-sref="login">logout</a>
    </div>
  </script>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js'></script>
<script src="js/angular.js"></script>
</body>
</html>

Sekian dulu tutorial saya kali ini menggenai Cara Membuat Login Sistem Menggunakan AngularJS Part 1, dan untuk module dan controller nya akan saya bahas pada tutorial Cara Membuat Login Sistem Menggunakan AngularJS Part 2

Oke teman teman cukup sekian dulu, tutorial kali ini semoga bermanfaat
Terimakasih