We Keep Coding

Makes 2 states share a part of resolve

I have defined two states as follows:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('edit', {
url: '/edit/{id}',
templateUrl: '/htmls/h1.html',
controller: 'SameCtrl',
onEnter: ...sameOnEnter...
resolve: {
...commonResolve...
}
})
.state('addinEdit', {
url: '/addin/edit/{id}',
templateUrl: '/htmls/h2.html',
controller: 'SameCtrl',
onEnter: ...sameOnEnter...
resolve: {
special: [ ... ],
...commonResolve...
}
})
}])
So they share the same controller, the same onEnter, and they have a very long and common part for resolve (which is actually a chain of resolves: first: function (...){...}, second: function (...){...}, ...). Does anyone know how to rewrite them so that I don't have to write commonResolve twice?

Just create a function for the resolver:
app.config(['$stateProvider', function ($stateProvider) {
resolverFunction.$inject = ['resolverA', 'resolverB'];
function ResolverFunction(myService1, myService2) {
return 'something';
}
resolverAFunction.$inject = ['resolverC'];
function resolverAFunction(resolverC) {
return 'anything';
}
resolverBFunction.$inject = ['resolverC'];
function resolverBFunction(resolverC) {
return 'something else';
}
resolverCFunction.$inject = ['service'];
function resolverCFunction(service) {
return 'something else';
}
$stateProvider
.state('edit', {
url: '/edit/{id}',
templateUrl: '/htmls/h1.html',
controller: 'SameCtrl',
onEnter: ...sameOnEnter...
resolve: {
commonResolver: resolverFunction,
resolverA: resolverAFunction,
resolverB: resolverBFunction,
resolverC: resolverCFunction,
}
})
.state('addinEdit', {
url: '/addin/edit/{id}',
templateUrl: '/htmls/h2.html',
controller: 'SameCtrl',
onEnter: ...sameOnEnter...
resolve: {
special: [ ... ],
commonResolver: resolverFunction,
resolverA: resolverAFunction,
resolverB: resolverBFunction,
resolverC: resolverCFunction,
}
})
}])

I don't have experience angularjs but i found a solution,
you can specify the parent of a state via the parent property.
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('edit', {
url: '/edit/{id}',
templateUrl: '/htmls/h1.html',
controller: 'SameCtrl',
onEnter: ...sameOnEnter...
resolve: {
...commonResolve...
}
})
.state('addinEdit', {
url: '/addin/edit/{id}',
templateUrl: '/htmls/h2.html',
parent : 'edit'
})
}])

$state is params is empty for my angular js project

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.

angularjs - backspace is not working

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?

Possible to dynamically load controllers in Angular

When I go to a specific view in my Angular project, every controller code is being load.
I understand that it's possible to prevent this. But is it possible in the following situation?
App.js config:
app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
$httpProvider.interceptors.push('AuthInterceptor');
$stateProvider.state('home', {
url: "/home",
templateUrl: 'views/Home.html',
controller: "MainController",
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('challenge');
}
}]
}).state('login', {
url: '/login',
templateUrl: 'views/Login.html',
controller: 'UserCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
} else {
//console.log("Niet ingelogd")
}
}]
}).state('register', {
url: '/register',
templateUrl: 'views/Register.html',
controller: 'UserCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
}
}]
}).state('challenge', {
url: '/challenges',
templateUrl: 'views/Challenges.html',
controller: 'ChallengeCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (!auth.isLoggedIn()) {
$state.go('login');
}
}]
}).state('profile', {
url: '/profile',
templateUrl: 'views/Profile.html',
controller: "ProfileCtrl",
onEnter: ['$state', 'auth', function($state, auth) {
if (!auth.isLoggedIn()) {
$state.go('login');
}
}]
}).state('policy', {
url: '/policy',
templateUrl: 'views/Policy.html',
controller: 'AppCtrl'
}).state('cookie', {
url: '/cookie',
templateUrl: 'views/Cookie.html',
controller: 'AppCtrl'
}).state('challengesdone', {
url: '/challengesdone',
templateUrl: 'views/Challengesdone.html',
controller: 'ChallengesDoneCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (!auth.isLoggedIn()) {
$state.go('login');
}
}]
}).state('forgot', {
url: '/forgot',
templateUrl: 'views/Forgot.html',
controller: 'UserCtrl'
}).state('reset', {
url: '/reset?sptoken',
templateUrl: 'views/Reset.html',
controller: 'UserCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
Can this be accomplished without the use of external libraries and are there alot of adjustments needed?

You need to use $controllerProvider in your config.
app._controller = app.controller
app.controller = function (name, constructor){
$controllerProvider.register(name, constructor);
return (this);
};
And then resolve this method in your route.
.state('reset', {
url: '/reset?sptoken',
controller: 'UserCtrl',
resolve: {
deps : function ($q, $rootScope) {
var deferred = $q.defer();
require(["js/userCtrl"], function (tt) {
$rootScope.$apply(function () {
deferred.resolve();
});
deferred.resolve()
});
return deferred.promise;
}
},
templateUrl: 'views/Reset.html'
});
I have put together a CodePen for your.

Issue in passing url parameter

Here is my Controller
.when('/showprofile/:UserID', {
templateUrl: 'resources/views/layout/showprofdile.php',
controller: 'renameShowCtrl',
})
I have a url like this
http://192.168.1.58/myapp/#/showprofile/8
When I click the link it redirect me to
http://192.168.1.58/myapp/#/showprofile/:UserID
Here is my entire app.js
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: 'resources/views/layout/login.php',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: 'resources/views/layout/login.php',
controller: 'logoutCtrl'
})
.when('/signin', {
title: 'Signup',
templateUrl: 'resources/views/layout/signin.php',
controller: 'authCtrl'
})
.when('/registersuccess', {
title: 'Dashboard',
templateUrl: 'resources/views/layout/register-success.php',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'Dashboards',
templateUrl: 'resources/views/layout/dashboard.php',
controller: 'authCtrl'
})
.when('/profile', {
title: 'Profile',
templateUrl: 'resources/views/layout/profile.php',
controller: 'authCtrl'
})
.when('/contact', {
title: 'Contact',
templateUrl: 'resources/views/layout/contact.php',
controller: 'authCtrl'
})
.when('/travel', {
title: 'Travel',
templateUrl: 'resources/views/layout/travel.php',
controller: 'authCtrl'
})
.when('/subscription', {
title: 'Subscription',
templateUrl: 'resources/views/layout/subscription.php',
controller: 'authCtrl'
})
.when('/invite_friends', {
title: 'InviteFriends',
templateUrl: 'resources/views/layout/invite_friends.php',
controller: 'authCtrl'
})
.when('/liked_you', {
title: 'LikedYou',
templateUrl: 'resources/views/layout/liked_you.php',
controller: 'authCtrl'
})
.when('/favourites', {
title: 'Favourites',
templateUrl: 'resources/views/layout/favourites.php',
controller: 'authCtrl'
})
.when('/coins', {
title: 'Subscription',
templateUrl: 'resources/views/layout/coins.php',
controller: 'authCtrl'
})
.when('/forget', {
title: 'forget',
templateUrl: 'resources/views/layout/forget.php',
controller: 'authCtrl'
})
.when('/verify', {
title: 'verfiy',
templateUrl: 'resources/views/layout/verify.php',
controller: 'authCtrl'
})
.when('/verifyfb', {
title: 'verfiyfb',
templateUrl: 'resources/views/layout/verifyfb.php',
controller: 'authCtrl'
})
.when('/registration', {
title: 'verfiy',
templateUrl: 'resources/views/layout/registration.php',
controller: 'authCtrl'
})
.when('/showprofile/:UserID', {
templateUrl: 'resources/views/layout/showprofdile.php',
controller: 'renameShowCtrl',
})
.when('/', {
title: 'Login',
templateUrl: 'resources/views/layout/login.php',
controller: 'authCtrl',
role: '0'
})
.when('/invalidtoken', {
title: 'Login',
templateUrl: 'resources/views/layout/invalidtoken.php',
controller: 'authCtrl',
role: '0'
})
}])
.run(function ($rootScope, $location, Data, $http) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$http.post('CheckSession', {}).then(function (results)
{
console.log(results.data);
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signin' || nextUrl == '/login' || nextUrl == '/verify' || nextUrl == '/registration' || nextUrl == '/forget' || nextUrl == '/invalidtoken' || nextUrl == '/registersuccess')
{
console.log('outpages');
}
else
{
if (results.data == 1)
{
console.log('loggedin');
console.log(nextUrl);
;
console.log('to be redirect');
$location.path(nextUrl);
}
else {
console.log('not logged in');
$location.path('login');
}
}
});
});
});
app.controller('ShowOrderController', function($scope, $routeParams) {
$scope.UserIDs = $routeParams.UserIDs;
});
$scope.customNavigate=function(msg){
$location.path("/view2"+msg)
}
How can I display the parameter 8 in my view ?
Here is my authCtrl.js
Help pls
I am helping my friend question..

You can use $routeParams to get route paramaters.
In your case, your code in controller might look like:
function ctrl($scope, $routeParams) {
$scope.userId = $routeParams.UserID
}
In your view use binding expression {{userId}}

the right way is to pass the id parameter in url is
/showprofile/{UserID}