Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kendala di Tutorial AngularJS pada Route
Tidak nampak hasilnya seperti pada tutorial. Sudah autofocus nih mata masih belum dapat dimana kesealahanya.
Seperti pada output ini :
header.html
<h1>Selamat Datang</h1>
route.php
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<meta charset="utf-8">
<title>Belajar Angular JS</title>
<script src="angular.min.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
</head>
<body>
<div header-title> </div>
<div ng-view> </div>
<div part-title> </div>
<script>
//module angular
var test = angular.module('testApp', ['ngRoute']);
test.directive('headerTitle', function(){
return {
restirct : 'A';
templateUrl : 'header.html'
}
});
test.directive('partTitle',function(){
return{
restirct : 'A',
templateUrl : 'part.html',
controller : function($scope){
$scope.data = [ { nama: 'Farid', kota:'Makassar'},
{ nama: 'Ikball', kota : 'Bali'},
{ nama: 'Yuspa', kota : 'Medan'}
];
}
};
});
//route
test.config(function($routeProvider){
$routeProvider
.when('/route2',{
templateUrl : 'router2.php'
controller : 'add'
})
.otherwise({redirectTo : '/'});
});
test.controller('add', function($scope)){
$scope.tambahdata = function (){
$scope.data.push({
nama : $scope.databaru.nama,
kota : $scope.databaru.kota
});
};
}
</script>
</body>
</html>
route2.php
<h3>Index ke 2</h3>
Nama Baru :
<input type="text" ng-model="databaru.nama" name=""> <br>
Kota baru :
<input type="text" ng-model="databaru.kota"><br>
<button ng-click="tambahdata()">Tambah Data</button>
<br>
Part.html
<div ng-controller='dataOrang'>
<input type="text" ng-model="hasil">
<ul>
<li ng-repeat = "dn in data | filter:hasil | orderBy : 'id'">
{{dn.nama}} kota: {{dn.kota}}
</li>
</ul>
</div>
0
Belum ada Jawaban. Jadi yang pertama Jawaban
Login untuk ikut Jawaban