Frameworks: AngularJS

AngularJS adalah JavaScript frameworks. AngularJS adalah library dalam bentuk JavaScript. AngularJS boleh diperolehi di angularjs.org. Cara memasukkan AngularJS adalah dengan menambah file JavaScript.

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

AngularJS menggunakan library dengan permulaan ng-.

The ng-app directive defines an AngularJS application.

The ng-init directive initializes AngularJS application variables.

The ng-controller directive defines the controller.

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

The ng-bind directive binds application data to the HTML view.

<div ng-app="myApp" ng-controller="myCtrl" ng-init="title='AngularJS Example'">
 <p>{{title}}. Type in the input box.</p>
</div>

AngularJS output boleh ditulis dalam dua cara iaitu ng-bind atau dalam double braces {{ }}.

 <p>First Name: <input type="text" ng-model="firstName"></p>
 <p>Last Name: <input type="text" ng-model="lastName"></p>
 <p>First Name = <span ng-bind="firstName"></span></p>
 <p>Last Name = {{lastName}}</p>

AngularJS module menggunakan function angular.module

 var app = angular.module("myApp", []);
 app.controller("myCtrl", function($scope, $http, $interval) {
 });

AngularJS Services adalah function yang terdapat dalam AngularJS seperti $http, $timeout, $interval.

 $http.get("angularjs-data.php").then(function (response) {
  $scope.myWelcome = response.data;
 }); 
 $interval(function () {
  $scope.theTime = new Date().toLocaleTimeString();
 }, 1000);

AngularJS $http memudahkan membaca data JSON

 $http.get("angularjs-json.php").then(function (response) {
  $scope.myData = response.data.records;
 });

Contoh: http://shahrulnizam.com/web/angularjs.php

Penerangan lanjut di

  1. http://www.w3schools.com/angular/angular_expressions.asp
  2. http://www.w3schools.com/angular/angular_directives.asp
  3. http://www.w3schools.com/angular/angular_services.asp
  4. http://www.w3schools.com/angular/angular_http.asp

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.