Controller

I.Latar Belakang.
pengenalan angular, dan penerapan angular.

II.Alat dan Bahan.
  Laptop / PC
  W3SCHOOLS
  Sublime Text

III.Tujuan.
Agar kita tau apa itu angular, cara cara penerapan nya.

IV.Penjelasan.

Controller


AngularJS pengendali mengontrol data aplikasi AngularJS.
AngularJS pengendali teratur Objek JavaScript .

AngularJS Controller
aplikasi AngularJS dikendalikan oleh pengendali.

ng-controller direktif mendefinisikan controller aplikasi.

Sebuah controller adalah Obyek JavaScript , diciptakan oleh JavaScript standar objek konstruktor .
AngularJS Contoh

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>


Aplikasi menjelaskan:
AngularJS aplikasi didefinisikan oleh  ng-aplikasi = "myApp" . Aplikasi ini berjalan di dalam <div>.
ng-controller = "myCtrl" atribut adalah direktif AngularJS. Ini mendefinisikan controller.
myCtrl fungsi adalah fungsi JavaScript.
AngularJS akan memanggil controller dengan $ lingkup objek.
Dalam AngularJS, $ lingkup adalah objek aplikasi (pemilik variabel aplikasi dan fungsi).
Controller menciptakan dua sifat (variabel) dalam lingkup ( firstName dan lastName ).
ng-Model arahan mengikat bidang input ke sifat controller (firstName dan lastName).

Metode kontroler
Contoh di atas menunjukkan objek controller dengan dua sifat: lastName dan firstName.

Sebuah controller juga dapat memiliki metode (variabel sebagai fungsi):
AngularJS Contoh

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});
</script>

Controller Pada File Eksternal
Dalam aplikasi yang lebih besar, itu adalah umum untuk menyimpan pengendali dalam file eksternal.

Hanya menyalin kode antara <script> tag ke file eksternal bernama personController.js :
AngularJS Contoh

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script src="personController.js"></script>

Contoh lain

Untuk contoh berikutnya kita akan membuat file pengendali baru:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});


Menyimpan file sebagai  namesController.js :

Dan kemudian menggunakan file controller dalam sebuah aplikasi:
AngularJS Contoh
<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>


Contoh :

 Maka outputnya :


V.Kesimpulan.
AngularJS adalah sebuah framework Javascript yang di kembangkan atau di bangun oleh tim Google. angularjs menggunakan metode MVC yang membuat source code aplikasi kita menjadi bersih dan mudah di kembangkan.

VI.Refrensi.
  https://www.w3schools.com/angular/angular_expressions.asp

Komentar

Postingan Populer