Aplikasi Pertama Dengan Angular JS

Web Developer | Blogger | Creator of RubyPedia.com

18 Oktober 2017

AngularJS adalah open source web application framework. Ini awalnya dikembangkan tahun 2009 oleh Misko Hevery dan Adam Abrons. dan sekarang dikelola oleh Google.

Sebelum kita mulai dengan menciptakan aplikasi HelloWorld menggunakan AngularJS, mari kita lihat apa saja bagian yang dari AngularJS. AngularJS terdiri dari tiga bagian penting.

ng-app : Direktif ini mendefinisikan Aplikasi AngularJS kita ke HTML.
ng-model : Direktif ini mengebind nilai data aplikasi AngularJS ke HTML.
ng-bind : Direktif ini memberikan data ke Tag HTML.

Membuat Aplikasi Dengan Angular JS

Langsung saja kita mulai membuat aplikasnya

Pertama, load JavaScript Framework, biasanya menggunakan tag HTML <Script>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Kedua, definisikan Angular JS kita menggunakan direktif ng-app

<div ng-app = "">
   ...
</div>

Ketiga, definisikan nama model menggunakan direktif ng-model

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

Keempat, bindlah sebuah value / nilai dibawah model menggunakan direktif ng-bind

<p>Hello <span ng-bind = "name"></span>!</p>

Maka, kurang lebih kode programnya seperti berikut ini:

<html>

   <head>
      <title>AngularJS First Application</title>
   </head>

   <body>
      <h1>Sample Application</h1>

      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>

      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

   </body>
</html>

Simpan kode diatas dengan MyAngularJSApp.html, maka ketika dijalankan kurang lebih tampilanya seperti berikut ini: