Postingan lainnya
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
