This is my menu Transaksi > Sewa there is konfirmasi button which should load new page which contain form input and submit button on clicked.
My application in local language so to make it simple, it's rent car application, at sewa page there is list of rent car transaction, but not yet confirmed the payment. so the konfirmasi button take care of this.
If user click the konfirmasi button it will load some info based on transaction id (route params) and there is file input to upload payment proof from bank transfer and some submit button to upload to image to server and to update database status for current transaction.
I follow official documentation create to create Sewa page so My directory structure is something like app/pages/transaksi/transaksi.module.js, app/pages/transaksi/sewa/sewa.module.js
Here is transaksi.module.js code
(function () {
'use strict';
angular.module('BlurAdmin.pages.transaksi', [
'BlurAdmin.pages.transaksi.sewa'
])
.config(routeConfig)
function routeConfig($stateProvider){
$stateProvider
.state('transaksi', {
url: '/transaksi',
template: '<ui-view></ui-view>',
abstract: true,
//templateUrl: 'app/pages/transaksi/transaksi.html',
//controller: 'TransaksiCtrl',
title: 'Transaksi',
sidebarMeta: {
icon: 'ion-grid',
order: 100
}
});
}
})();
Here is sewa.module.js
(function () {
'use strict';
angular.module('BlurAdmin.pages.transaksi.sewa', [])
.config(routeConfig);
function routeConfig($stateProvider){
$stateProvider
.state('transaksi.sewa', {
url: '/sewa',
templateUrl: 'app/pages/transaksi/sewa/sewa.html',
controller: 'SewaCtrl', //listing work normally
title: 'Sewa',
sidebarMeta: {
order: 0
}
})
.state('transaksi.sewa.konfirmasi', {
url: '/konfirmasi/:nomor_order_sewa',
templateUrl: 'app/pages/transaksi/sewa/konfirmasi.html', //won't load
controller: 'KonfirmasiCtrl',
title: 'Konfirmasi Sewa', //but title is changed
sidebarMeta: {
order: 0
}
});
}
})();
The controller loaded in app/pages/transaksi/sewa/sewaCtrl.js something like this
(function (){
'use strict';
angular.module('BlurAdmin.pages.transaksi.sewa')
.controller('SewaCtrl', SewaCtrl)
.controller('ModalCtrl', ModalCtrl)
.controller('KonfirmasiCtrl', KonfirmasiCtrl);
function KonfirmasiCtrl($scope, $http, $routeParams){
$scope.nomor_order = $routeParams.nomor_order_sewa;
alert($scope.nomor_order);
}
...
...
There is no error in console, and my templateUrl konfirmasi.html is exist and contain something simple as
<h1>ini halaman konfirmasi untuk order {{ nomor_order }}</h1>
So why when I click konfirmasi button the pages change only the tittle but templateUrl not loaded.
Maybe I have been doing wrong in sewa.module.js at konfirmasi route definition? or somewhere?
If you need more detailed please just comment.
Jus't reading angular ui router nested views not working and read nested state abstrac usage exactly at this section
// Note: abstract still needs a ui-view for its children to populate.
// You can simply add it inline here.
and I'm start thinking maybe the page won't load because no container so with a little bit try and error.
I discover that I need to add <div ui-view></div> at sewa.html so now sewa.html looks like
<div ui-view>
...
sewa.html content here
...
</div>
Thanks stackoverflow.
Related
I am using the Angular UI Router as my router. I have a $state defined as such:
$stateProvider.state('mypage', {
url:'/',
views: {
'content': {
templateUrl: 'folder/mypage.template.html',
controller: 'MyPageController'
}
}
})
I can go to MyPageController and do the following:
$rootScope.test = "hello!";
And then go to folder/mypage.template.html and put the following:
<div id="example">
{{test}}
</div>
hello! will show up in the rendered web page. However, if I instead do the following in MyPageController:
$scope.test = "hello!";
Nothing will show up in the template. This is very confusing to me, as I know that MyPageController is made available to the state (as I can add something to $rootScope and display it), but the $scope is not available. Does anyone have an idea as to what might be going on? Thank you :)
EDIT1:
MyPageController is part of a module, let's say myModule, that is imported into a top-level module. For example, it looks something like this:
angular.module('topLevelModule', [
'myModule'
]).config( ... $stateProvider stuff ... ).run( ... setup stuff ... )
angular.module('myModule')
.controller('MyPageController', ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.test = "hello!";
}]);
EDIT2 (problem solved):
I had followed a tutorial that used the following pattern with multiple states in the UI-Router:
$stateProvider
.state('mainpage', {
url: '/',
views: {
'content': {
templateUrl: 'folder/mainpage.template.html',
controller: 'MainPageController' <-- POINT OF INTEREST 1
}
}
})
.state('mypage', {
url: 'my-page',
controller: 'MyPageController', <-- POINT OF INTEREST 2
views: {
'content#': {
templateUrl: 'folder/mypage.template.html',
<-- POINT OF INTEREST 3
}
}
})
}])
However, the problem lies in this formatting. This is just a heads up for anyone using the UI-Router who happened to follow the same tutorial as I did (I can't find the link), that POINT OF INTEREST 2 needs to be moved to POINT OF INTEREST 3 for the controller to properly be assigned upon state change -- syntax error. There were more complexities to why things were happening (due to my debugging approach) that were causing any inconsistencies you see above, but I won't include them here. Thanks everyone for their time. :)
var test = angular.module('test', []);
test.run(function() {
});
test.config(function() {
// your state for binding html with controller
});
test.controller('MyPageController ', function($scope) {
$scope.test = "hello!";
});
And then in HTML
<div id="example">
{{test}}
</div>
I have a map with markers on it. When you click a marker a child view opens with the marker details.
.state('map', {
url: '/map',
...
})
.state('map.detail', {
url: '/:markerId',
...
})
If you open a marker's details, navigate away from the map, then back to the map using ui-sref="map" the url will change to /map/<markerId> with the child view open.
I'd like to go straight to /map when clicking on ui-sref="map" but don't want to reload the 'map' just hide any child view.
Is there a simple way to do this? I've tried combinations of cache: false on the two states but that doesn't do what I want.
I am not fully sure, what is your issue. Because this
...I'd like to go straight to /map when clicking on ui-sref="map" but don't want to reload the map just hide any child view...
is the default behavior of UI-Router. There is a working plunker
These links, will not trigger RE-init of parent controller ('map' state)
<a ui-sref="map">
<a ui-sref="map.detail({markerId:1})">
<a ui-sref="map.detail({markerId:22})">
And states like this:
.state('map', {
url: "/map",
templateUrl: 'tpl.html',
controller: 'ParentCtrl',
})
.state('map.detail', {
url: "/:markerId",
templateUrl: 'child.html',
controller: 'ChildCtrl',
})
And both controllers:
.controller('ParentCtrl', ['$scope', function ($scope) {
$scope.timestamp = new Date().getTime();
}])
.controller('ChildCtrl', ['$scope', function ($scope) {
$scope.timestamp = new Date().getTime();
}])
And we can see, that 'map' state is still not changed
Check it here
I am trying to display my first view on screen .I used all concept of angular .But it not display or load my template .I didn't get any error .but it not load on html why here is my code
http://goo.gl/VbBnqg
(function() {
'use strict';
angular.module('app.auth').config(Routes);
Routes.$inject = ['$stateProvider', '$urlRouterProvider'];
function Routes($stateProvider, $urlRouterProvider) {
console.log("config call")
// Default
$urlRouterProvider.otherwise('signin');
// Application
$stateProvider
.state('signin', {
url: '/sign-in',
templateUrl: 'js/auth/template/login.html',
controller: 'authenticationCntrl'
})
}
})();
actually my login.html not load why ? why it is not loaded..
here is my project
https://dl.dropbox.com/s/x8s0xbllm270rq5/firstfroject.zip?dl=0
I'll explain the situation a bit more in answer.
According do docs (otherwise() section): https://github.com/angular-ui/ui-router/wiki/URL-Routing
You can pass string (url path) or function to otherwise(). If you would like to use state, you should pass a function that will invoke that state like this:
$urlRouterProvider.otherwise(function($injector, $location){
$injector.invoke(['$state', function($state) {
$state.go('stateName'); //in you case 'signup'
}]);
It will invoke state service and go to 'signup', which has route configured to '/sign-up'. Overall effect will be the same.
I'm new in AngularJS Community and I'm developping my first app with this Framework.
I created a new controller with this code :
.controller('AccountCtrl', function($scope, $location) {
alert('test');
})
And my route :
.state('app.account', {
url: "/account",
views: {
'menuContent': {
templateUrl: "templates/account.html",
controller: 'AccountCtrl'
}
}
})
The alert popup is shown the first time I access to the controller. But, if I change URL and I come back to AccountCtrl (with a classic html a), the alert popup is not shown again.
Could somebody explain to me why ?
Thanx for your help !
In Ionic Framework views and controllers will be cached by default. You ma add a listener to the views scope to receive a notification when the view is re-active again. For more information see: http://ionicframework.com/docs/api/directive/ionView/
and http://ionicframework.com/docs/api/directive/ionNavView/
You may also disable the cache on a view <ion-view cache-view="false">
.controller('AccountCtrl', function($scope, $location) {
$scope.$on('$ionicView.beforeEnter', function () {
// update campaigns everytime the view becomes active
// (on first time added to DOM and after the view becomes active after cached
alert('test');
});
})`
to reload Controller each time in ui router, use reload: true option on the .state
$stateProvider
.state('app.account', {
url: "/account",
reload: true //forcefully reload route and load controller again
})
I am trying out the nested views feature of ui-router plugin, but faced the issue I don't know how to solve.
The code that shows the problem can be found at http://jsfiddle.net/3c9h7/1/ :
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider) {
return $stateProvider.state('root', {
template: "<div class='top' ui-view='viewA'></div><div class='middle' ui-view='viewB'></div>"
}).state('root.step1', {
url: '',
views: {
'viewA': {
template: '<h1>View A</h1>'
}
}
}).state('root.step1.step2', {
url: '/step2',
views: {
'viewB': {
template: '<h1>View B</h1>'
}
}
});
});
app.controller('MainCtrl', [
'$scope', '$state', function($scope, $state) {
$state.transitionTo('root.step1.step2');
}
]);
<div ng-app='myApp' ui-view ng-controller='MainCtrl'>
</div>
So, the code activates "root.step1.step2" state by using $state.go method(https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options)
According to ui-router documentation:
When the application is in a particular state—when a state is
"active"—all of its ancestor states are implicitly active as well.
So, I expect that "root.step1" and "root" will be active and it works as expected, but "viewB" is not filled with the template as you can see in jsfiddle sample : the top viewA(root.step1) is OK, but the middle viewB(root.step1.step2) is empty.
What I am doing wrong?
The documentation says:
Child states will load their templates into their parent's ui-view.
So there should be a ui-view='viewB' inside the viewA template, since the parent state of root.step1.step2 is root.step1. Or the viewB should be one of the views of root.step1, and there should be no root.step1.step2.