Cara Menggunakan Fungsi AngularJS - Includes

Hallo sahabat dumenity berjumpa lagi dalam tutorialÂ kursuswebdesign,Â pada tutorial kali ini saya akan membahas tentang Cara Menggunakan FungsiÂ Includes – AngularJS. HTML tidak mendukung penyisipan halaman html dalam halaman html. Untuk mencapai fungsi ini kita harus menggunakan yang namanyaÂ Using Ajax (atau menggunkan ajax) danÂ Using Server Side Includes (Menggunakan Server Side Includes). Apa sih maksud dari keduanya itu berikut ini saya akan beri penjelasannya:

Menggunakan Ajax – Membuat panggilan server untuk mendapatkan halaman html yang sesuai dan mengaturnya di innerHTML kontrol html.
Menggunakan Server Side Includes – JSP, PHP dan teknologi server sisi web lainnya dapat menyertakan halaman html dalam halaman dinamis.

Dengan menggunakan AngularJS, kita dapat menyematkan halaman HTML dalam halaman HTML menggunakan perintah ng-include.

<div ng-app = "" ng-controller = "studentController">
   <div ng-include = "'main.htm'"></div>
   <div ng-include = "'subjects.htm'"></div>
</div>

Berikut ini saya akan memberikan contoh tentang cara menggunakan angularJS includes :

pertama buat file main.htmÂ Â Â

<table border = "0">
   <tr>
      <td>Enter first name:</td>
      <td><input type = "text" ng-model = "student.firstName"></td>
   </tr>
   
   <tr>
      <td>Enter last name: </td>
      <td><input type = "text" ng-model = "student.lastName"></td>
   </tr>
   
   <tr>
      <td>Name: </td>
      <td>{{student.fullName()}}</td>
   </tr>
</table>

Yang kedua bikin file dengan nama subjects.htm

<p>Subjects:</p>
<table>
   <tr>
      <th>Name</th>
      <th>Marks</th>
   </tr>
   
   <tr ng-repeat = "subject in student.subjects">
      <td>{{ subject.name }}</td>
      <td>{{ subject.marks }}</td>
   </tr>
</table>

Oke kalau sudah sekarang kita akan mengincludes file di atas seperti di bawah ini:

buat file AngularJS.htm seperti di bawah ini:

<html>
   <head>
      <title>Angular JS Includes</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
      
   </head>
   <body>
      
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller="studentController">
         <div ng-include = "'/angularjs/src/include/main.htm'"></div>
         <div ng-include = "'/angularjs/src/include/subjects.htm'"></div>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               fees:500,
               
               subjects:[
                  {name:'Physics',marks:70},
                  {name:'Chemistry',marks:80},
                  {name:'Math',marks:65},
                  {name:'English',marks:75},
                  {name:'Hindi',marks:67}
               ],
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

OKe kalau sudah silahkan save file di atas, untuk melihat hasilnya silahkan buka pada browsernya. Oke itulah tadi pembahasan saya tentang Cara Menggunakan Fungsi AngularJS – Includes semoga bermanfaat.

Cara Menggunakan Fungsi AngularJS – Includes

Kategori