I am new in angular.So i am using $state for changing the view state.My state code is
angular.module('myApp.controller', []).controller('firstController', ['$scope', '$state', function($scope, $state) {
$scope.loadView2 = function() {
$state.go('secondView', {
firstname: $scope.firstname,
lastname: $scope.lastname
});
};
}]);
angular.module('myApp.controller').controller('secondController',
function($scope, $stateParams, $state) {
console.log($state.params); // empty object
$scope.firstname = $stateParams.firstname; // empty
$scope.lastname = $stateParams.lastname; //empty
});
And my route is following
angular.module('myApp', ['myApp.controller', 'ui.router']).config(['$stateProvider', function($stateProvider) {
$stateProvider.state('firstView', {
url: '/fisrt-view',
templateUrl: './partials/view1.html',
controller: 'firstController'
});
$stateProvider.state('secondView', {
url: '/second-view',
templateUrl: './partials/view2.html',
controller: 'secondController'
});
But i always get blank object in view2.
to pass data between views you have to define params in your second view, like this:
$stateProvider.state('secondView', {
url: '/second-view',
templateUrl: './partials/view2.html',
controller: 'secondController',
params: {
mynewparam: null
}
});
then when you switch view:
$state.go('secondView', {mynewparam: 'newParam'});
and you retrive the data inside the view controller like this:
$scope.mynewparam = $stateParams.mynewparam;
notice also that you can chain states without repeating $stateProvider, example here:
$stateProvider
.state('firstView', {
url: '/fisrt-view',
templateUrl: './partials/view1.html',
controller: 'firstController'
})
.state('secondView', {
url: '/second-view',
templateUrl: './partials/view2.html',
controller: 'secondController',
params: {
mynewparam: null
}
});
Your secondView state should be:
$stateProvider.state('secondView', {
url: '/second-view',
params: {
firstname: null,
lastname: null
},
templateUrl: './partials/view2.html',
controller: 'secondController'
});
That should fix it.
You have to define parameters as follows:
$stateProvider.state('secondView', {
url: '/second-view?firstname&lastname',
templateUrl: './partials/view2.html',
controller: 'secondController'
});
or:
$stateProvider.state('secondView', {
url: '/:firstname/:lastname/second-view',
templateUrl: './partials/view2.html',
controller: 'secondController'
});
or:
$stateProvider.state('secondView', {
url: '/second-view',
templateUrl: './partials/view2.html',
controller: 'secondController',
params: {
firstname: null,
lastname: null,
}
});
Here's the related section from ui-router repo.
Related
I'm getting error when I try to inject $uibModal to my new state.
In other states it works properly. What can be the cause of the error?
Error log
Error: [$injector:unpr] http://errors.angularjs.org/1.5.7/$injector/unpr?p0=49d19463-4701-4df9-ba96-5053f03a665bProvider%20%3C-%2049d19463-4701-4df9-ba96-5053f03a665b
at angular.min.js:6
at angular.min.js:43
at Object.d [as get] (angular.min.js:40)
at angular.min.js:43
at Object.d [as get] (angular.min.js:40)
at ui-bootstrap-tpls.js:3656
at Object.r [as forEach] (angular.min.js:8)
at Object.resolve (ui-bootstrap-tpls.js:3652)
at Object.$modal.open (ui-bootstrap-tpls.js:4256)
at b.$scope.showNotification (NotificationsController.js:19)
My controller
angular.module('EProc.Notifications')
.controller('notificationsCtrl', ['$scope', '$http', '$uibModal',
function($scope, $http, $uibModal){
$http.get('/api/notification/lastmsg').then(function(result) {
console.log('last 10 notifications--------------------');
console.log(result);
$scope.lastNotifications = result.data.content;
$scope.newMessages = result.data.newMessages;
});
$http.get('/api/notification/messages').then(function(result) {
console.log('all notifications--------------------');
console.log(result);
$scope.allNotifications = result.data.content;
});
$scope.showNotification = function(id) {
$uibModal.open({
animation: true,
size: 'md',
templateUrl: 'client/components/notifications/tmpl/notificationModal.html',
controller: 'notificationModalCtrl',
resolve: {
id: id
}
});
}
}
])
.controller('notificationModalCtrl', ['$scope', 'id', '$uibModalInstance',
function($scope, id, $uibModalInstance){
$http.get('/api/notification/message/' + id).then(function(result) {
$scope.notification = result.data;
})
}]);
mainApp.js
var eProcApp = angular.module('EProc',
[
'ui.router',
'ui.bootstrap',
'smart-table',
'ngTagsInput',
'EProc.Common',
'EProc.Profile',
'EProc.Purchasers',
'EProc.Supply',
'EProc.Tenders',
'EProc.Notifications'
]);
eProcApp.config(['$stateProvider', '$httpProvider', '$urlRouterProvider',
function ($stateProvider, $httpProvider, $urlRouterProvider) {
$stateProvider
.state('myprofile', {
url: '/myprofile',
templateUrl: 'client/components/profile/tmpl/profileShortDetails.html',
controller: 'profileDetailsCtrl'
})
.state('main', {
url: '/main',
views: {
'': {
templateUrl: 'client/components/purchase/tmpl/annualPlans.html'
},
'itemstable#main': {
templateUrl: 'client/components/purchase/tmpl/procurementPlan.html',
controller: 'annualProcPlanCtrl'
}
}
})
.state('purchasers', {
url: '/purchasers/:purchaserId',
views: {
'': {
templateUrl: 'client/components/purchase/tmpl/purchasers.html',
controller: 'purchasersListCtrl'
}
}
})
.state('purchasers.procplan', {
url: "/procplan",
templateUrl: 'client/components/purchase/tmpl/procurementPlan.html',
controller: 'procurementPlanCtrl'
})
.state('purchasers.children', {
url: "/children",
templateUrl: 'client/components/purchase/tmpl/childrenPartiesList.html',
controller: 'childrenPurchasersCtrl'
})
.state('procplan', {
url: '/procplan/:purchaserId',
views: {
'': {
templateUrl: 'client/components/purchase/tmpl/procurementPlan.html',
controller: 'procurementPlanCtrl'
}
}
})
.state('procitem', {
url: '/procitem/:itemId',
templateUrl: 'client/components/purchase/tmpl/procurementItem.html',
controller: 'procurementItemCtrl'
})
.state('search', {
url: '/procitem/search/:page?searchText',
params: {'filter': {}},
views: {
'': {
templateUrl: 'client/components/purchase/tmpl/searchProcItems.html',
controller: 'searchProcItemsCtrl'
},
'search-results#search': {
templateUrl: 'client/components/purchase/tmpl/search/resultsSectionsView.html',
controller: 'procItemSearchResultsCtrl'
}
}
})
.state('favgroups', {
url: '/favgroups',
templateUrl: 'client/components/supply/tmpl/favoriteGroups.html',
controller: 'favoriteGroupsCtrl'
})
.state('favorites', {
url: '/favorites/:gswId',
templateUrl: 'client/components/supply/tmpl/favoritesList.html',
controller: 'favoritesListCtrl'
})
.state('proposals', {
url: '/proposals',
templateUrl: 'client/components/supply/tmpl/commProposalsList.html',
controller: 'commProposalListCtrl'
})
.state('proposal', {
url: '/proposal/:procItemId',
templateUrl: 'client/components/supply/tmpl/commProposal.html',
controller: 'commProposalCtrl'
})
.state('tenders', {
url: '/tenders/',
templateUrl: 'client/components/tenders/tmpl/tendersList.html',
controller: 'tendersListCtrl'
})
.state('announcement', {
url: '/announcement/:announcementId',
templateUrl: 'client/components/tenders/tmpl/singleAnnouncementView.html',
controller: 'viewAnnouncementCtrl'
})
.state('watchlist', {
url: '/watchlist/',
templateUrl: 'client/components/supply/tmpl/keywordMatchWatchList.html',
controller: 'kwMatchWatchListCtrl'
})
.state('notifications', {
url: '/notifications',
templateUrl: 'client/components/notifications/tmpl/notifications.html',
controller: 'notificationsCtrl'
});
$httpProvider.interceptors.push('loginInterceptor');
}]);
The resolve property values must be functions, ie
resolve: {
id: function() { return id }
}
I'm trying to load a navbar according to the user.
To do this, I need to set a dynamic template, but I can't see my $rootScope
$stateProvider
/*Login*/
.state('login', {
url: '/',
data: {pageTitle: 'Inicio de sesión.'},
resolve: {},
views: {
'navbar': {
templateUrl: null,
controller: null
},
'body': {
templateUrl: "views/login.html",
controller: 'LoginController'
}
}
})
.state('home', {
url: '/home',
data: {pageTitle: 'Home.'},
views: {
'navbar': {
templateUrl: "views/navbar.html", //here dynamic template
controller: null
},
'body': {
templateUrl: "views/inicio.html",
controller: null
}
}
})
.state('perfil', {
url: '/perfil',
data: {pageTitle: 'Perfil de usuario.'},
views: {
'navbar': {
templateUrl: function (sessionProvider) {
var sessionFactory = sessionProvider.path();
return sessionFactory;
}, // this return a tring, but don't load anything
controller: null
},
'body': {
templateUrl: "views/usuario/perfil.html",
controller: 'UsuarioController'
}
}
});
i've tried use a service to load the data, but it didnt work, also tried to load it from the localStorageService, but don't display anything.
is there a single way to load it ?
There are features for this, like templateUrl and templateProvider. See all details here:
Trying to Dynamically set a templateUrl in controller based on constant
E.g. this could be an example of templateProvider used isntead of the 'templateUrl' static path
templateProvider: function(CONFIG, $templateRequest) {
console.log('in templateUrl ' + CONFIG.codeCampType);
var templateName = 'index5templateB.html';
if (CONFIG.codeCampType === "svcc") {
templateName = 'index5templateA.html';
}
return $templateRequest(templateName);
},
Hi i got a problem with parent state not active when child is call.
I'm using ui-router with ui-sref-active function.
Here is my router code:
.state('customers', {
abstract: true,
parent: 'app',
url: '/customers',
templateUrl: 'app/customer/parent.html',
})
.state('customers.list', {
parent: 'customers',
url: '',
controller: 'customerCtrl as customer',
templateUrl: 'app/customer/index.html'
})
.state('customers.birthday', {
parent: 'customers',
url: '/birthday',
templateUrl: 'app/customer/birthday.html',
})
Here is my html:
<ul id="menu-sidebar">
<li class="has_sub">
<a ui-sref="customers.list" class="waves-effect" ui-sref-active="subdrop">
<i class="fa fa-users"></i> <span> Customers</span>
</a>
</li>
</ul>
I'm using ng-repeat because there are plenty of menu.
The problem is when I call /customers the ui-sref-active is working properly. But when /customers/birthday call, ui-sref-active is gone.
Here below screenshot:
Any advice how to make it working?
Thanks in advance!
Might be because of how your nesting routes. Try something like this:
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider
.state('exampleState', {
url: '/example',
abstract: true,
templateUrl: 'templates/example/root-view.html',
controller: 'ParentCtrl'
})
.state('exampleState.games', {
url: '/games',
views: {
'stats-games':{
templateUrl: 'templates/example/firstpage.html',
controller: 'PageOneCtrl'
}
}
})
.state('exampleState.sesaons', {
url: '/seasons',
views: {
'stats-games':{
templateUrl: 'templates/example/secondpage.html',
controller: 'PageTwoCtrl'
}
})
});
.state('home', {
url: '/home',
abstract: true,
templateUrl: 'templates/home.html'
})
.state('home.main', {
url: '',
templateUrl: 'templates/main.html'
})
.state('home.owner', {
url: '/owner',
templateUrl: 'templates/owner.html'
})
I finally solve it.
At my
app.run(['$rootScope', '$state', function($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(evt, to, params) {
if (to.redirectToChild) {
evt.preventDefault();
$state.go(to.redirectToChild.state, params)
}
});
}]);
app.config([ '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/404");
.state('customers', {
url: '/customers',
templateUrl: 'app/customer/parent.html',
redirectToChild: {
state: 'customers.list'
},
})
.state('customers.list', {
parent: 'customers',
url: '',
controller: 'customerCtrl as customer',
templateUrl: 'app/customer/index.html'
})
.state('customers.birthday', {
parent: 'customers',
url: '/birthday',
templateUrl: 'app/customer/birthday.html',
})
}]);
I have a problem when i click on backspace
it doesn't go to the last page
i don't know how to fix it sometime it does go the last page only when i go from app.home page to app.newJob.Step1 and press backspace it goes back to home but not always
here is my router
'use strict';
angular.module('ijob').
config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'Views/login.html',
data: {
requireLogin: false
}
})
.state('app', {
abstract: true,
template: '<ui-view/>',
data: {
requireLogin: true
}
})
.state('app.home', {
url: '/home',
templateUrl: '/Views/home.html'
})
.state('app.editJob', {
url: '/editJob',
templateUrl: 'Views/editJob.html'
})
.state('app.purchasePackages', {
url: '/purchasePackages',
templateUrl: 'Views/purchasePackages.html'
})
.state('app.accountDetails', {
url: '/accountDetails',
templateUrl: 'Views/accountDetails.html'
})
.state('app.jobOrder2', {
url: '/jobOrder2',
templateUrl: 'Views/jobOrder2.html'
})
.state('app.newJob', {
abstract: true,
templateUrl: 'Views/newJob/newJob.html',
url: '/newJob'
})
.state('app.newJob.Step1', {
url: '/newJob/step1',
templateUrl: 'Views/newJob/step1.html'
})
.state('app.newJob.Step2', {
url: '/newJob/step2',
templateUrl: 'Views/newJob/step2.html'
})
.state('app.newJob.Step3', {
url: '/newJob/step3',
templateUrl: 'Views/newJob/step3.html'
})
.state('app.newJob.Step4', {
url: '/newJob/step4',
templateUrl: 'Views/newJob/step4.html'
})
.state('app.newJob.Step5', {
url: '/newJob/step5',
templateUrl: 'Views/newJob/step5.html'
});
$urlRouterProvider.otherwise('/home');
// $locationProvider.html5Mode(true);
})
.config(function config() {
});
and my app
'use strict';
// Declare app level module which depends on views, and components
angular.module('ijob', [
'ui.router', 'ngRoute', 'btorfs.multiselect', 'ngCookies', 'ngResource'
]);
var app = angular.module('ijob');
app.run(['$state', '$cookieStore', '$rootScope', 'Auth', 'UserService',
function ($state, $cookieStore, $rootScope, auth, userService) {
$rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
var requireLogin = toState.data.requireLogin;
if (requireLogin && !($cookieStore.get('authdata'))) {
event.preventDefault();
$state.go('login');
}
else if ($cookieStore.get('authdata') && $state.current.name !== toState.name) {
userService.token = auth.getCredentials($cookieStore.get('authdata'));
console.log(userService);
$state.current.name = toState.name;
$state.go(toState.name);
}
});
}]);
sometimes i get that error
Error: No such state 'app.newJob.Step1'
or
Error: No such state 'login'
and the states do exist.
its something about the ui router?
or there is anyway to override that?
I want to be able to reload just the nested view of my application and attached a route parameter on so that I can have URL routing in my application. I cannot figure out how to do this, I initially had it working with a query like this:
$location.search('userId', user._id);
//http://localhost:9000/#/user/?userId=123456789
My desired URL is below, with the userId = 123456789
http://localhost:9000/#/user/123456789
My app.js file
$stateProvider
.state('index', {
url: '/',
views: {
'#' : {
templateUrl: 'views/layout.html'
},
'top#index' : {
templateUrl: 'views/top.html',
controller: function($scope, $state) {
$scope.userLogOut = function() {
$state.go('login');
};
}
},
'left#index' : { templateUrl: 'views/left.html' },
'main#index' : { templateUrl: 'views/main.html' }
}
})
.state('index.user', {
url: 'user:userId',
templateUrl: 'views/user/user.html',
controller: 'UserCtrl'
})
.state('index.user.detail', {
url: '/',
views: {
'detail#index' : {
templateUrl: 'views/user/details.html',
controller: 'DetailCtrl'
}
}
})
In my controller:
$state.reload('index.user.detail', {userId: $scope.user._id});
As you are using ui-router you can use $state.go('index.user', { userId: {{yourid}} });
To allow the query string parameter to work using ui-router write your state like this,
.state('index.user', {
url: 'user/?userId=:param',
templateUrl: 'views/user/user.html',
controller: 'UserCtrl'
})
That would allow this to work,
//http://localhost:9000/#/user/?userId=123456789
Without the query string parameter (your desired URL) would be this,
.state('index.user', {
url: 'user/:userId',
templateUrl: 'views/user/user.html',
controller: 'UserCtrl'
})
http://localhost:9000/#/user/123456789