Skip to content

B
belajar-angular-js
Commit fdb88893 authored by A. Fauzi's avatar A. Fauzi
Browse files
Options

test

parents
Hide whitespace changes
Inline Side-by-side
Showing with 528 additions and 0 deletions
AgsTable.html 0 → 100644
View file @ fdb88893
<style type="text/css">
.table{
border-collapse: collapse;
}
tr,td,th{
border: 1px solid #000;
padding: 5px;
}
td{
width: 300px;
}
.number{
text-align: right;
}
</style>
<table class="table">
<tr>
<th>Judul</th>
<th>Penulis</th>
<th>Rating</th>
</tr>
<tr ng-repeat="b in books">
<td>{{b.judul}}</td>
<td>{{b.penulis}}</td>
<td class="number">{{b.rating}}</td>
</tr>
</table>
anglr_1.html 0 → 100644
View file @ fdb88893
<!DOCTYPE html>
<html>
<head>
<title>anglr 1</title>
</head>
<body ng-app="FirstApp">
<div ng-controller="MainController">
{{title}} <br>
{{book.title}} <br>
{{book.author}} <br>
{{book.price | currency}} / {{book.price | rupiah}} <br>
<hr><hr>
<div ng-repeat="book in books">
{{book.title}} </br>
{{book.author}} </br>
{{book.price | rupiah}} </br>
{{book.pubdate | date}} <br>
{{book.likes}} <button ng-click="likes($index)">Like</button> <br>
<button ng-click="logToConsole($index)">Log</button>
<hr/>
</div>
<hr><hr>
Title : <input type="" ng-model="ttl"><br>
{{ttl}}<br>
<button ng-click="log()">Log</button>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
</body>
</html>
\ No newline at end of file
anglr_2.html 0 → 100644
View file @ fdb88893
<!DOCTYPE html>
<html>
<head>
<title>angular 2</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MainController">
<b>Dari parent scope</b>
<h2>Hello {{dunia}}</h2>
<hr>
<b>Dari directive</b>
<my-directive></my-directive>
<hr>
<div my-directive></div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app2.js"></script>
<script src="js/controllers/MainController.js"></script>
<script src="js/directives/MyDirective.js"></script>
</body>
</html>
\ No newline at end of file
anglr_3.html 0 → 100644
View file @ fdb88893
<!DOCTYPE html>
<html>
<head>
<title>angular 3</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MainController">
<input type="text" ng-model="title">
<hr>
<one-way title="static"></one-way>
<one-way title="{{title}}"></one-way>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app2.js"></script>
<script src="js/controllers/MainController.js"></script>
<script src="js/directives/MyDirective2.js"></script>
</body>
</html>
\ No newline at end of file
anglr_4.html 0 → 100644
View file @ fdb88893
<!DOCTYPE html>
<html>
<head>
<title>angular 4</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MainController">
<input type="text" ng-model="title">
<hr>
<one-way title="title"></one-way>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app2.js"></script>
<script src="js/controllers/MainController.js"></script>
<script src="js/directives/MyDirective3.js"></script>
</body>
</html>
\ No newline at end of file
anglr_factory.html 0 → 100644
View file @ fdb88893
<!DOCTYPE html>
<html>
<head>
<title>Angular Factory</title>
</head>
<body ng-app="MyApp">
<div ng-controller="FactoryController">
{{title}}
<hr>
Angka 1 : <input type="text" ng-model="angkaA"><br><br>
Angka 2 : <input type="text" ng-model="angkaB"><br>
Hasil : {{hasil}}
<br><br>
<button ng-click="penambahan()"> + </button>
<button ng-click="pengurangan()"> - </button>
<button ng-click="perkalian()"> * </button>
<button ng-click="pembagian()"> / </button>
</div>
<script src="js/angular.min.js"></script>
<script src="js/appfactory.js"></script>
<script src="js/controllers/FactoryController.js"></script>
</body>
</html>
\ No newline at end of file
anglr_service.html 0 → 100644
View file @ fdb88893
<!DOCTYPE html>
<html>
<head>
<title>Angular Service</title>
</head>
<body ng-app="MyApp">
<div ng-controller="ServiceController">
{{title}}
<hr>
Angka 1 : <input type="text" ng-model="angkaA"><br><br>
Angka 2 : <input type="text" ng-model="angkaB"><br>
Hasil : {{hasil}}
<br><br>
<button ng-click="penambahan()"> + </button>
<button ng-click="pengurangan()"> - </button>
<button ng-click="perkalian()"> * </button>
<button ng-click="pembagian()"> / </button>
</div>
<script src="js/angular.min.js"></script>
<script src="js/appservice.js"></script>
<script src="js/controllers/ServiceController.js"></script>
</body>
</html>
\ No newline at end of file
anglr_servicehttp.html 0 → 100644
View file @ fdb88893
<!DOCTYPE html>
<html>
<head>
<title>Angular Http Service</title>
</head>
<body ng-app="MyApp">
<div ng-controller="ServiceHttpController">
{{title}}
<hr>
<table cellpadding="5">
<tr>
<th>Name</th>
<th>Username</th>
<th>Email</th>
<th>Website</th>
<th>Company</th>
</tr>
<tr ng-repeat="u in users">
<td>{{u.name}}</td>
<td>{{u.username}}</td>
<td>{{u.email}}</td>
<td>{{u.website}}</td>
<td>{{u.company.name}}</td>
</tr>
</table>
</div>
<script src="js/angular.min.js"></script>
<script src="js/appservicehttp.js"></script>
<script src="js/controllers/ServiceHttpController.js"></script>
</body>
</html>
\ No newline at end of file
anglr_value.html 0 → 100644
View file @ fdb88893
<!DOCTYPE html>
<html>
<head>
<title>Angular Value</title>
</head>
<body ng-app="MyApp">
<div ng-controller="ValueController"></div>
<script src="js/angular.min.js"></script>
<script src="js/appvalue.js"></script>
</body>
</html>
\ No newline at end of file
demo1.html 0 → 100644
View file @ fdb88893
<!DOCTYPE html>
<html>
<head>
<title>Demo 1</title>
</head>
<body ng-app="MyApp">
<div ng-controller="NewController">
{{judul}}
<hr>
<ags-table books="books"></ags-table>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app3.js"></script>
<script src="js/controllers/NewController.js"></script>
<script src="js/directives/DemoDirective.js"></script>
</body>
</html>
\ No newline at end of file
js/angular.min.js 0 → 100644
View file @ fdb88893
This source diff could not be displayed because it is too large. You can view the blob instead.
js/app.js 0 → 100644
View file @ fdb88893
var app=angular.module('FirstApp', []);
app.filter('rupiah', function() {
return function toRp(angka) {
var rev = parseInt(angka, 10).toString().split('').reverse().join('');
var rev2 = '';
for(var i = 0; i < rev.length; i++) {
rev2 += rev[i];
if((i + 1) % 3 === 0 && i !== (rev.length - 1)){
rev2 += '.';
}
}
return 'Rp. ' + rev2.split('').reverse().join('') + ',00';
}
})
\ No newline at end of file
js/app2.js 0 → 100644
View file @ fdb88893
var app=angular.module('MyApp', []);
\ No newline at end of file
js/app3.js 0 → 100644
View file @ fdb88893
var app=angular.module('MyApp', []);
\ No newline at end of file
js/appfactory.js 0 → 100644
View file @ fdb88893
var app = angular.module('MyApp', []);
app.factory('myFactory', function() {
return 'Berasal dari factory';
});
app.factory('kalkulatorFactory', function() {
var kalkulator = {};
kalkulator.tambah = function(angkaA, angkaB) {
return parseInt(angkaA)+parseInt(angkaB);
};
kalkulator.kurang = function(angkaA, angkaB) {
return angkaA-angkaB;
};
kalkulator.kali = function(angkaA, angkaB) {
return angkaA*angkaB;
};
kalkulator.bagi = function(angkaA, angkaB) {
return angkaA/angkaB;
};
return kalkulator;
});
\ No newline at end of file
js/appservice.js 0 → 100644
View file @ fdb88893
var app = angular.module('MyApp', []);
app.service('KalkulatorService', function() {
this.tambah = function(angkaA, angkaB) {
return parseInt(angkaA)+parseInt(angkaB);
};
this.kurang = function(angkaA, angkaB) {
return angkaA-angkaB;
};
this.kali = function(angkaA, angkaB) {
return angkaA*angkaB;
};
this.bagi = function(angkaA, angkaB) {
return angkaA/angkaB;
};
});
\ No newline at end of file
js/appservicehttp.js 0 → 100644
View file @ fdb88893
var app = angular.module('MyApp', []);
app.service('UsersService', ['$http',function($http){
this.index=function(){
return $http.get('https://jsonplaceholder.typicode.com/users');
}
}]);
js/appvalue.js 0 → 100644
View file @ fdb88893
var app = angular.module('MyApp', []);
app.value('string', 'Belajar Angular Service');
app.value('number', 100);
app.value('object', {'title':'AngularJs Service','desc':'Belajar'});
app.controller('ValueController', ['$scope', 'string', 'number', function($scope, string, number) {
console.log(string);
}])
\ No newline at end of file
js/controllers/FactoryController.js 0 → 100644
View file @ fdb88893
app.controller('FactoryController', ['$scope', 'myFactory', 'kalkulatorFactory', function($scope, myFactory, kalkulatorFactory) {
console.log(myFactory);
$scope.title = 'Kalkulator Factory';
$scope.penambahan = function() {
$scope.hasil = kalkulatorFactory.tambah($scope.angkaA, $scope.angkaB);
}
$scope.pengurangan = function() {
$scope.hasil = kalkulatorFactory.kurang($scope.angkaA, $scope.angkaB);
}
$scope.perkalian = function() {
$scope.hasil = kalkulatorFactory.kali($scope.angkaA, $scope.angkaB);
}
$scope.pembagian = function() {
$scope.hasil = kalkulatorFactory.bagi($scope.angkaA, $scope.angkaB);
}
}]);
\ No newline at end of file
js/controllers/MainController.js 0 → 100644
View file @ fdb88893
app.controller('MainController', ['$scope', function($scope) {
//$scope.title='Belajar Angular js';
$scope.book={
title : 'Belajar Angular JS 123...',
author : 'Agung',
price : 80000
};
$scope.books=[
{
title: 'Belajar AngularJs Bersama Agung Setiawan',
author : 'Agung Setiawan',
price : 80000,
pubdate : new Date('2015','09','09'),
likes : 0
},
{
title: 'Belajar Ruby',
author : 'Penulis Satu',
price : 65000,
pubdate : new Date('2015','10','09'),
likes : 0
},
{
title: 'Belajar Ruby on Rails',
author : 'Penulis Dua',
price : 90000,
pubdate : new Date('2015','11','09'),
likes : 0
}];
$scope.logToConsole=function(index) {
var book = $scope.books[index];
console.log(book);
}
$scope.likes=function(index) {
$scope.books[index].likes+=1;
}
$scope.ttl=10;
$scope.log=function() {
console.log($scope.ttl);
}
$scope.dunia='Dunia Indonesia';
}]);
\ No newline at end of file
js/controllers/NewController.js 0 → 100644
View file @ fdb88893
app.controller('NewController', ['$scope', function($scope) {
$scope.judul = 'Demo 1 Directive';
$scope.books=[
{
'judul':'Ayah',
'penulis':'Andrea Hirata',
'rating':4
},
{
'judul':'Eragon',
'penulis':'Christoper Paolini',
'rating':3
},
{
'judul':'Blink',
'penulis':'Malcolm Gladwell',
'rating':3
},
];
}])
\ No newline at end of file
js/controllers/ServiceController.js 0 → 100644
View file @ fdb88893
app.controller('ServiceController', ['$scope', 'KalkulatorService', function($scope, KalkulatorService) {
$scope.title = 'Kalkulator Service';
$scope.penambahan=function(){
$scope.hasil=KalkulatorService.tambah($scope.angkaA,$scope.angkaB);
}
$scope.pengurangan=function(){
$scope.hasil=KalkulatorService.kurang($scope.angkaA,$scope.angkaB);
}
$scope.perkalian=function(){
$scope.hasil=KalkulatorService.kali($scope.angkaA,$scope.angkaB);
}
$scope.pembagian=function(){
$scope.hasil=KalkulatorService.bagi($scope.angkaA,$scope.angkaB);
}
}]);
\ No newline at end of file
js/controllers/ServiceHttpController.js 0 → 100644
View file @ fdb88893
app.controller('ServiceHttpController', ['$scope', 'UsersService', function($scope, UsersService) {
$scope.title = 'Angular Http Service';
UsersService.index().then(function successCallback(response){
$scope.users = response.data;
console.log(response.status);
}, function errorCallback(response) {
alert(response);
});
}]);
\ No newline at end of file
js/directives/DemoDirective.js 0 → 100644
View file @ fdb88893
app.directive('agsTable', function() {
return {
restrict : 'E',
scope : {
books : '='
},
templateUrl : 'AgsTable.html'
};
})
\ No newline at end of file
js/directives/MyDirective.js 0 → 100644
View file @ fdb88893
app.directive('myDirective', function() {
return {
//child scope
//scope : true,
//---
//isolated scope
// scope : {
// },
//---
restrict : 'EA',
//templateUrl : 'test.html'
template : '<h2>Hello {{dunia}}</h2>',
replace : true,
link : function(scope,elem,attrs) {
elem.bind('click', function() {
scope.dunia='saya diklik';
scope.$digest();
})
}
};
})
\ No newline at end of file
js/directives/MyDirective2.js 0 → 100644
View file @ fdb88893
app.directive('oneWay', function() {
return {
restrict : 'E',
//child scope
//scope : true,
//---
//isolated scope
scope : {
title : '@'
},
//---
template : '<h2>Title inside: {{title}}</h2>',
replace : true,
link : function(scope,elem,attrs) {
elem.bind('click', function() {
scope.$apply(function() {
scope.title='Javascript';
});
})
}
};
})
\ No newline at end of file
js/directives/MyDirective3.js 0 → 100644
View file @ fdb88893
app.directive('oneWay', function() {
return {
restrict : 'E',
//child scope
//scope : true,
//---
//isolated scope
scope : {
title : '='
},
//---
template : '<h2>Title inside: {{title}}</h2>',
replace : true,
link : function(scope,elem,attrs) {
elem.bind('click', function() {
scope.$apply(function() {
scope.title='Javascript';
});
})
}
};
})
\ No newline at end of file
test.html 0 → 100644
View file @ fdb88893
<h3>Abc</h3>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment