Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Cara yang benar menggunakan stateRouteProvider AngularJS 1.x seperti JohnPapa Styleguide ?
Maaf mau tanya disini ada yang sudah pernah menggunakan metode Routig seperti styleguidenya JohnPapa di Github ?
saya masih bingung cara pakainya bagaimana, soalnya dia di dokumentasinya kaya pake routeHelperProvider kaya gitu, seperti ini codenya:
// customers.routes.js
angular
.module('app.customers')
.run(appRun);
/* @ngInject */
function appRun(routerHelper) {
routerHelper.configureStates(getStates());
}
function getStates() {
return [
{
state: 'customer',
config: {
abstract: true,
template: '<ui-view class="shuffle-animation"/>',
url: '/customer'
}
}
];
}
// routerHelperProvider.js
angular
.module('blocks.router')
.provider('routerHelper', routerHelperProvider);
routerHelperProvider.$inject = ['$locationProvider', '$stateProvider', '$urlRouterProvider'];
/* @ngInject */
function routerHelperProvider($locationProvider, $stateProvider, $urlRouterProvider) {
/* jshint validthis:true */
this.$get = RouterHelper;
$locationProvider.html5Mode(true);
RouterHelper.$inject = ['$state'];
/* @ngInject */
function RouterHelper($state) {
var hasOtherwise = false;
var service = {
configureStates: configureStates,
getStates: getStates
};
return service;
///////////////
function configureStates(states, otherwisePath) {
states.forEach(function(state) {
$stateProvider.state(state.state, state.config);
});
if (otherwisePath && !hasOtherwise) {
hasOtherwise = true;
$urlRouterProvider.otherwise(otherwisePath);
}
}
function getStates() { return $state.get(); }
}
}
kemudian saya coba ubah, sesuai dengan kebutuhan saya menjadi seperti berikut
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>TES</title>
<!-- index.html -->
<script type="text/javascript" src="_lib/angular.min.js"></script>
<script type="text/javascript" src="_lib/angular-ui-router.min.js"></script>
<script type="text/javascript" src="dashboard/app.dashboard.js"></script>
<script type="text/javascript" src="app.js"></script>
<style>.active { color: red; font-weight: bold; }</style>
</head>
<body>
TESSSSS
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<ui-view></ui-view>
</body>
</html>
(function() {
'use strict';
//app.js
angular
.module('app', ['app.dashboard', 'ui.router']);
})();
(function() {
'use strict';
//app.dashboard
angular
.module('app.dashboard', ['ui.router']);
})();
(function() {
'use strict';
//route.dashboard.js
angular
.module('app.dashboard')
.run(appRun);
/* @ngInject */
function appRun(routerHelper) {
routerHelper.configureStates(getStates());
}
function getStates() {
return [{
state: 'hallo',
config: {
abstract: true,
template: '<h3>HOLLA</h3>',
url: '/hallo'
}
}];
}
})();
(function() {
'use strict';
//route.helper
angular
.module('app.dashboard')
.provider('routerHelper', routerHelperProvider);
routerHelperProvider.$inject = ['$locationProvider', '$stateProvider', '$urlRouterProvider'];
/* @ngInject */
function routerHelperProvider($locationProvider, $stateProvider, $urlRouterProvider) {
/* jshint validthis:true */
this.$get = RouterHelper;
$locationProvider.html5Mode(true);
RouterHelper.$inject = ['$state'];
/* @ngInject */
function RouterHelper($state) {
var hasOtherwise = false;
var service = {
configureStates: configureStates,
getStates: getStates
};
return service;
///////////////
function configureStates(states, otherwisePath) {
states.forEach(function(state) {
$stateProvider.state(state.state, state.config);
});
if (otherwisePath && !hasOtherwise) {
hasOtherwise = true;
$urlRouterProvider.otherwise(otherwisePath);
}
}
function getStates() {
return $state.get();
}
}
}
})();
tapi malah error, katanya errornya gini:
Error: Could not resolve 'hello' from state ''
w/z.transitionTo@http://localhost:443/belajar-angularJSLagi/mastering/app/_lib/angular-ui-router.min.js:7:17378
w/z.go@http://localhost:443/belajar-angularJSLagi/mastering/app/_lib/angular-ui-router.min.js:7:16936
G/</i<@http://localhost:443/belajar-angularJSLagi/mastering/app/_lib/angular-ui-router.min.js:7:25826
e/q<@http://localhost:443/belajar-angularJSLagi/mastering/app/_lib/angular.min.js:160:431
f@http://localhost:443/belajar-angularJSLagi/mastering/app/_lib/angular.min.js:47:146
kg/k.defer/c<@http://localhost:443/belajar-angularJSLagi/mastering/app/_lib/angular.min.js:50:68
Mohon Bantuannya temen-temen yang tahu solusinya Terimakasih
1 Jawaban:
Jawaban Terpilih
hmm, saya belum pernah sih pake routeHelperProvider, tapi selama ini untuk masalah route saya make $stateProvider dan $urlRouterProvider dari "angular-ui-router". yang menurut saya secara fungsional sama sama aja, langsung aja berikut cara routing yang biasa saya pake:
\* supaya lebih gampang saya asumsikan bikin app baru yah, dan saya asumsikan kamu udah pernah bikin apps angular.
- buat file main.js
var app = angular.module('RoutingAngular', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
});
keterangan :
- state : ini nama state untuk route tersebut
- url : ini lokasi url di browser
- templateUrl : ini mengacu ke lokasi file yang nampilin view nya
- controller : ini nama controller dari view tersebut (bukan nama file)
- buat file home.html
<h1>{{title}}</h1>
- buat file home-ctrl.js
app.controller('HomeCtrl', ['$scope', '$state', function($scope, $state){
$scope.title = "routing di angular";
}
]);
ketrangan : - app.controller('HomeCtrl', ..) : HomeCtrl itu nama controller yang di panggil di state config tadi
- buat file index.js
<body ng-app="RoutingAngular">
<div ui-view></div>
<!-- masukin reference script yang di butuhin, angular, angular rout dll -->
</body>
keterangan : -<div ui-view></div> : ini tag untuk nampilin view nya.
nah seharusnya, configurasi routenya udah beres, kalo mau nambah route lagi tinggal nambahin ".state" di main.js, cara manggilnya buat pindah2 state, bisa pake : - ui-sref : dari view.
- $scope.go("Home") : dari controller.
kalo bingung coba tanya bagian mana yang bingungnya hehe, semoga membantu
