This is what my app.js looks like where I have defined the states, controller and urls for all the templates:
angular.module('starter', ['ionic', 'starter.controllers','starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
ionic.Platform.fullScreen()
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
// StatusBar.styleDefault();
StatusBar.hide();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/rubyonic/menu.html",
controller: 'AppCtrl',
reload: true
})
// .state('login', {
// url: "/login",
// templateUrl: "templates/rubyonic/login.html",
// controller: 'AppCtrl'
// })
.state('login', {
url: '/login',
templateUrl: "templates/rubyonic/login.html",
controller: 'LoginCtrl'
})
.state('app.alerts', {
url: "/alerts",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/alerts.html",
controller: 'AppCtrl'
}
}
})
.state('app.studies', {
url: "/studies",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/studies.html",
controller: 'AppCtrl',
reload: true
}
}
})
.state('app.study_collections', {
url: "/studies/:studynodeRef",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/overview.html",
controller: 'AppCtrl',
reload: true
}
}
})
.state('app.rank-charts', {
url: "/rank_charts",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/rank_charts.html",
controller: 'AppCtrl'
}
}
})
// .state('app.overview', {
// url: "/overview",
// views: {
// 'menuContent': {
// templateUrl: "templates/rubyonic/overview.html"
// }
// }
// })
.state('app.claim-details', {
url: "/claim-details",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/claim_details.html",
controller: 'AppCtrl'
}
}
})
.state('app.scorecards', {
url: "/scorecards",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/scorecards.html",
controller: 'AppCtrl'
}
}
})
.state('app.fnol', {
url: "/fnol",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/fnol.html",
controller: 'AppCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
})
Here is my Login Controller:
angular.module('starter.controllers', ['highcharts-ng'])
.controller('LoginCtrl', ['$scope','$stateProvider','UserService', function($scope,$stateProvider,UserService) {
$scope.credentials = {
username: localStorage.getItem('username') || '',
password: localStorage.getItem('password') || ''
};
$scope.login = function(credentails) {
UserService.login(credentails).then(function(user) {
$scope.loginMessage = false;
localStorage.setItem('username', $scope.credentials.username);
localStorage.setItem('password', $scope.credentials.password);
$state.go('app.studies') ;
}
,
function(data) {
$scope.loginMessage = 'Username/Password Invalid';
}
);
}
if($scope.credentials.username && $scope.credentials.password){
$scope.login($scope.credentials);
}
}])
and here is my UserService which is injected into the login controller:
angular.module('starter.services', [])
.factory('UserService', ['$rootScope', '$q', '$http', function($rootScope, $q, $http) {
return {
login: function(credentails) {
var deffered = $q.defer();
$http({
method: 'post',
url: 'http://localhost/platform/j_spring_security_check',
params: {
'j_username': credentails.username,
'j_password': credentails.password
}
}).success(function(user, status, headers, config) {
userLoggedIn = true;
// $location.path('#/app/studies');
localStorage.setItem('lastLoginTime', new Date().getTime());
$rootScope.$broadcast('USER_LOGIN_SUCCESS');
deffered.resolve(user);
}).error(function(data, status, headers, config){
$rootScope.$broadcast('USER_LOGIN_FAILED');
deffered.reject(data);
});
return deffered.promise;
},
isUserLoggedIn: function() {
return userLoggedIn;
}
};
}])
When I run my app I get the: Error: [$injector:unpr] Unknown provider: $stateProviderProvider <- $stateProvider <- LoginCtrl in my console. I know my controller and services are setup correctly because the other templates along with their controllers work. I would really appreciate if someone could help me fix this.
The reason behind you are getting error is, inside LoginCtrl you are trying to inject the Provider which is $stateProvider, Basically provider are not available inside the controller, They are accessible as service name,If would be $state instead of $stateProvider inside your controller
controller('LoginCtrl', ['$scope','$stateProvider','UserService',
Should be
controller('LoginCtrl', ['$scope','$state','UserService',
Related
I have a Loopback.io SPA with an Angular client. I followed the official Loopback Documentation https://loopback.io/doc/en/lb2/Create-AngularJS-client.html
The problem is that when I refresh the page in the browser, the client is logging out. It seems that the currentUser variable is not restored after the refresh. How could I solve this?
Here are the auth.js and app.js files:
js/services/auth.js
angular
.module('app')
.factory('AuthService', ['Reviewer', '$q', '$rootScope', function(User, $q,
$rootScope) {
function login(email, password) {
return User
.login({
email: email,
password: password
})
.$promise
.then(function(response) {
$rootScope.currentUser = {
id: response.user.id,
tokenId: response.id,
email: email
};
});
}
function logout() {
return User
.logout()
.$promise
.then(function() {
$rootScope.currentUser = null;
});
}
function register(email, password) {
return User
.create({
email: email,
password: password
})
.$promise;
}
return {
login: login,
logout: logout,
register: register
};
}]);
client/js/app.js
angular
.module('app', [
'ui.router',
'lbServices'
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state('add-review', {
url: '/add-review',
templateUrl: 'views/review-form.html',
controller: 'AddReviewController',
authenticate: true
})
.state('all-reviews', {
url: '/all-reviews',
templateUrl: 'views/all-reviews.html',
controller: 'AllReviewsController'
})
.state('edit-review', {
url: '/edit-review/:id',
templateUrl: 'views/review-form.html',
controller: 'EditReviewController',
authenticate: true
})
.state('delete-review', {
url: '/delete-review/:id',
controller: 'DeleteReviewController',
authenticate: true
})
.state('forbidden', {
url: '/forbidden',
templateUrl: 'views/forbidden.html',
})
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'AuthLoginController'
})
.state('logout', {
url: '/logout',
controller: 'AuthLogoutController'
})
.state('my-reviews', {
url: '/my-reviews',
templateUrl: 'views/my-reviews.html',
controller: 'MyReviewsController',
authenticate: true
})
.state('sign-up', {
url: '/sign-up',
templateUrl: 'views/sign-up-form.html',
controller: 'SignUpController',
})
.state('sign-up-success', {
url: '/sign-up/success',
templateUrl: 'views/sign-up-success.html'
});
$urlRouterProvider.otherwise('all-reviews');
}])
.run(['$rootScope', '$state', function($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(event, next) {
// redirect to login page if not logged in
if (next.authenticate && !$rootScope.currentUser) {
event.preventDefault(); //prevent current page from loading
$state.go('forbidden');
}
});
}]);
scope in angularjs after refresh page initial, and not save old value before refresh
you can save token in local storage browser (or cookie) and in load page set scope
When I navigating from home page to another, back button not displaying at the navigation bar. However, there are certain case where ionic display the back button. e.g navigate Settings page form profile page back button display properly and mobile bank button also working fine.
The Goal is user have to go to home page when press mobile hardware back button with display back button on navigation bar and on home page display confirmation when press hardware back button.
I have already searched lots of Q&A over stack but nothing found proper solutions for this.
Here is my code that try to -
.run(function($ionicPlatform, $rootScope, $ionicLoading, $ionicPopup, $ionicHistory, $localStorage, $timeout, $http, $state) {
$ionicPlatform.ready(function() {
$ionicPlatform.registerBackButtonAction(function(event) {
if ($state.current.name=="app.home") {
$ionicPopup.confirm({
title: 'System',
template: 'are you sure you want to exit?'
}).then(function(res) {
if (res) {
ionic.Platform.exitApp();
}
})
}
}, 101);
});
})
How can I force Ionic to display back button on certain page?
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}
}
})
.state('app.settings', {
cache:false,
url: '/settings',
views: {
'menuContent': {
templateUrl: 'templates/setting/settings.html',
controller: 'SettingsCtrl'
}
}
})
.state('app.wfhadd', {
cache:false,
url: '/wfh/wfhadd',
views: {
'menuContent': {
templateUrl: 'templates/wfh/addwfh.html',
controller: 'AddWfhCtrl'
}
}
})
.state('app.wfhlist', {
cache:false,
url: '/wfh/wfhlist',
views: {
'menuContent': {
templateUrl: 'templates/wfh/wfhlist.html',
controller: 'listWfhCtrl'
}
}
})
.state('app.login', {
cache: false,
url: '/login/:userid/:logpass',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl',
params: {'userid': null, 'logpass': null}
}
}
})
.state('app.profile', {
cache: false,
url: '/settings/profile',
views: {
'menuContent': {
templateUrl: 'templates/setting/profile.html',
controller: 'ProfileCtrl'
}
}
})
.state('app.activities', {
cache: false,
url: '/activities',
views: {
'menuContent': {
templateUrl: 'templates/activities.html',
controller: 'ProfileCtrl'
}
}
})
.state('app.leave', {
cache: false,
url: '/leave',
views: {
'menuContent': {
templateUrl: 'templates/leave/leave.html',
}
}
})
.state('app.leavelist', {
cache: false,
url: '/leave/allleaves/:id',
views: {
'menuContent': {
templateUrl: 'templates/leave/leavelist.html',
controller: 'LeaveCtrl',
params: {'leaveid': null}
}
}
})
.state('app.leavedtls', {
cache: false,
url: '/leave/details',
views: {
'menuContent': {
templateUrl: 'templates/leave/leavedtls.html',
controller: 'LeaveDtlsCtrl'
}
}
})
.state('app.leaveapply', {
cache: false,
url: '/leave/apply',
views: {
'menuContent': {
templateUrl: 'templates/leave/leaveapply.html',
controller: 'LeaveApplyCtrl'
}
}
})
.state('app.terms', {
url: '/settings/terms',
views: {
'menuContent': {
templateUrl: 'templates/policy.html'
}
}
})
.state('app.about', {
url: '/settings/about',
views: {
'menuContent': {
templateUrl: 'templates/about.html'
}
}
})
;
$urlRouterProvider.otherwise('/app/home');
})
EDIT 1
Now I have put following code on profile controller and back button show on Profile page but It's not working (not go back to home page).
.controller('ProfileCtrl', function($scope,$rootScope, $ionicHistory, $http,$localStorage, $ionicNavBarDelegate){
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
viewData.enableBack = true;
});
})
I use ui-router.
Here are my nested states:
$stateProvider
.state('books', {
abstract: true,
url: '/books',
controller: 'BooksCtrl',
templateUrl: 'contents/books.html'
})
.state('books.top', {
url: '/top',
templateUrl: 'contents/books-top.html'
})
.state('books.new', {
url: '/new',
templateUrl: 'contents/books-new.html'
});
How can I set books.new state to be default child of the books abstract state, so then when you hit /books ui-router redirects to /books/new?
There is a working example
We can use built in features. 1) default is such child state which has empty url:
$stateProvider
.state('books', {
abstract: true,
url: '/books/new',
controller: 'BooksCtrl',
..
})
.state('books.new', {
//url: '/new',
url: '',
...
})
.state('books.top', {
url: '^/books/top',
...
});
And 2) to keep /books in place, we can use redirection
$urlRouterProvider.when('/books', '/books/new');
And these links will work as expected:
// href
<a href="#/books">
<a href="#/books/new">
<a href="#/books/top">
//ui-sref
<a ui-sref="books.top">
<a ui-sref="books.new">
Check it here
Try this way:
$stateProvider
.state('books', {
abstract: true,
url: '/books',
controller: 'BooksCtrl',
templateUrl: 'contents/books.html'
})
.state('books.top', {
url: '/top',
templateUrl: 'contents/books-top.html'
})
.state('books.new', {
url: '',
templateUrl: 'contents/books-new.html'
});
EDIT: I know that's not very nice, but you can create additional state with same arguments except url:
var booksArgs = {
url: '',
templateUrl: 'contents/books-new.html'
};
$stateProvider.state('books.new', booksArgs);
$stateProvider.state('books.new_', angular.extend({}, booksArgs, {
url: '/new'
}));
Another solution from this post:
In states configuration:
$stateProvider
.state('books', {
url: '/books',
controller: 'BooksCtrl',
templateUrl: 'contents/books.html',
redirectTo: '.new'
})
.state('books.top', {
url: '/top',
templateUrl: 'contents/books-top.html'
})
.state('books.new', {
url: '/new',
templateUrl: 'contents/books-new.html'
});
On module run:
app.run(['$rootScope', '$state', function($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(evt, to, params) {
if (to.redirectTo) {
evt.preventDefault();
$state.go(to.redirectTo, params, { relative: to });
}
});
}]);
I am using ionic framework for my mobile application
what I need is when I click the side menu links I want the factory service to bring data from the server
what is happening now is only one http request sent to the server when the application run ,but when I click on any link in the side menu no requests sent
myapp.factory('Authy',function ($cookieStore,Auth,$http,$q) {
return {
can_go :function(){
var deffered = $q.defer();
$http.get(mainUrl+"/user_info.json")
.success(function(data){
deffered.resolve(data);
}).error(function(){
deffered.reject();
});
return deffered.promise;
}
}
});
in my controller
myapp.controller("PowerCtrl",function($scope,Authy ,$cookieStore,$http ){
$scope.view_loading = true;
Authy.can_go().then(function(data){
$scope.view_loading = false;
if (data.user){
var user = data.user;
if ((user.country !="") && (user.city != "")) {
$scope.coins = user.coins
$scope.id =user.id
$scope.current_vip =user.current_vip;
$scope.vip_time =user.vip_time;
}else{
window.location.href="#/step2";
}
}else{
window.location.href="#/login";
}
});
});
my routers
myapp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("main",{
url: "/",
templateUrl: "templates/main.html",
controller: "MainCtrl"
})
.state("login",{
url: "/login",
templateUrl: "templates/login.html",
controller: "LoginCtrl"
})
.state("register",{
url: "/register",
templateUrl: "templates/register.html",
controller: "RegisterCtrl"
})
.state("step2",{
url: "/step2",
templateUrl: "templates/step2.html",
controller: "StepCtrl"
})
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.home', {
url: "/home",
views: {
'menuContent': {
controller: "HomeCtrl",
templateUrl: "templates/home.html"
}
}
})
.state('app.power', {
url: "/power",
views: {
'menuContent': {
controller : "PowerCtrl",
templateUrl: "templates/power.html"
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/');
});
You have to disable caching on the view, its enabled by default , Ex:
<ion-view cache-view="false" view-title="My Title!">
...
</ion-view>
read more about caching here
i am having trouble with the following route for the albums. below is my controller and the routes file, i am using the angular ui module. i am trying to load the photos on the album on the /photos/:albumId route.
tripApp.controller('HotelPhotoAlbumController', function($scope, $timeout, Hotel, $stateParams, $http) {
$scope.hotelId = $stateParams.hotelId;
$scope.albumId = $stateParams.albumId;
$http({
method: 'GET', url: 'hotels/' + $scope.hotelId + '/albums/' + $scope.albumId + '.json'
}).success(function(data, status, headers, config){
$scope.photos = data;
}).error(function(data, status, headers, config){
$scope.status = status;
});
});
var tripApp = angular.module('tripApp', ['ui.state', 'ui.bootstrap', 'ui.calendar', 'ui.map', 'infinite-scroll', 'tripApp.directives', 'hotelServices', 'ngSanitize'])
tripApp
.value('$anchorScroll', angular.noop)
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/hotels")
$stateProvider
.state('hotels', {
url: "/hotels",
templateUrl: "templates/hotels.html",
controller: "HotelsController"
})
.state("hotels.search", {
url: "/search",
templateUrl: "templates/hotels.search.html",
controller: "HotelsController"
})
.state("hotel", {
url: "/:hotelId",
templateUrl: "templates/hotel.html",
controller: "HotelDetailController"
})
.state("hotel.index", {
url: "/",
templateUrl: "templates/hotel.home.html",
controller: "HotelDetailController"
})
.state("hotel.options", {
url: "/options",
templateUrl: "templates/hotel.options.html",
controller: "HotelRoomsController"
})
.state("hotel.reviews", {
url: "/reviews",
templateUrl: "templates/hotel.reviews.html",
controller: "HotelDetailController"
})
.state("hotel.photos", {
url: "/photos",
templateUrl: "templates/hotel.photos.html",
controller: "HotelDetailController"
})
.state("hotel.photos.details", {
url: "/photos/:albumId",
templateUrl: "templates/hotel.photos.details.html",
controller: "HotelPhotoAlbumController"
})
.state("hotel.calendar", {
url: "/calendar",
templateUrl: "templates/hotel.calendar.html",
controller: "HotelCalendarController"
})
.state("restaurants", {
url: "/restaurants",
templateUrl: "templates/restaurants.html",
controller: "RestaurantsController"
})
})
State url declaration is relative to the parent so instead of "/photos/:albumId" try "/:albumId".