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'
})
}])

how to remove exclamation from routing of state url Mean full stack

I want to remove exclamation marks from url state routing like my url is now http://localhost:3000/#!/auth/register
i just want to remove this "!" marks from url after "#"
Is it possible to do? with mean.io
here is my app.js/system.js
'use strict';
//Setting up route
angular.module('mean').config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For unmatched routes:
//$urlRouterProvider.otherwise('/');
var checkLoggedin = function($q, $timeout, $http, $location) {
// Initialize a new promise
var deferred = $q.defer();
// Make an AJAX call to check if the user is logged in
$http.get('/loggedin').success(function(user) {
// Authenticated
if (user !== '0') $timeout(deferred.resolve);
// Not Authenticated
else {
$timeout(deferred.reject);
$location.url('/auth/login');
}
});
return deferred.promise;
};
// console.log($stateProvider);
// states for my app
$stateProvider
.state('tasks', {
url: '/kanban/:projectId/:projectSlug',
templateUrl: 'system/views/index.html',
controller: 'IndexController',
resolve: {
loggedin: checkLoggedin,
onEnter: function($stateParams,$state, $uibModal) {
if ( $stateParams.projectId != "" ) {
updateTopMenu('Kanban','task','#!/kanban/'+$stateParams.projectId+'/'+$stateParams.projectSlug);
updateTopMenu('Schedule','schedule','#!/schedule');
}
}
}
}).state('home',{
url:'/',
templateUrl: 'projects/views/index.html',
controller: 'ProjectController',
resolve:{
loggedin: checkLoggedin
}
}).state('taskEdit',{
url:'/kanban/:projectId/:projectSlug/:taskSlug',
templateUrl: 'system/views/index.html',
controller: 'IndexController',
resolve:{
loggedin: checkLoggedin
}
}).state('taskAdd',{
url: "/task/taskAdd",
onEnter: function($stateParams, $state, $uibModal) {
$uibModal.open({
templateUrl: "system/views/include/model.html",
resolve: {},
controller: function($scope, $state, itemService) {
/*
$scope.state = $state.current;
$scope.params = $stateParams;
$scope.item = itemService.get($stateParams.id);
*/
$scope.ok = function () {
$scope.$close('clicked ok');
};
$scope.dismiss = function () {
$scope.$dismiss('clicked cancel');
};
}
}).result.then(function (result) {
// $scope.$close
alert('result ->' + result);
}, function (result) {
// $scope.$dismiss
return $state.transitionTo("home");
alert('dismiss ->' + result);
}).finally(function () {
// handle finally
return $state.transitionTo("tasks");
});
}
});
}
]).config(['$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('!');
}
]);

you have configured it here
function($locationProvider) {
$locationProvider.hashPrefix('!');
}
remove this line to get ! removed from url
or enable html5mode using below code to remove # from url
$locationProvider.html5Mode(true);
but please read more about how url routes are handled in angular, and server side routing vs client side routing etc, before enabling html5mode

Change $locationProvider.hashPrefix('!'); to $locationProvider.hashPrefix('');
System.js
.config(['$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('');
}
]);

Unexpected identifier while adding controller to ngRoute

I've faced with such problem, when I add controller to my route code it fails to unexpected identifier. Have no idea why it's happening
This is my routeProvider:
app.config(function($routeProvider) {
$routeProvider
.when("/login", {
title: 'Login',
templateUrl: 'assets/login.html'
controller: authCtrl
})
});
And this is my controller:
app.controller('authCtrl', function ($scope, $rootScope, $routeParams, $location, $http, Data) {
//initially set those objects to null to avoid undefined error
$scope.login = {};
$scope.signup = {};
$scope.doLogin = function (customer) {
Data.post('login', {
customer: customer
}).then(function (results) {
Data.toast(results);
if (results.status == "success") {
$location.path('dashboard');
}
});
};
$scope.signup = {email:'',password:'',name:'',phone:'',address:''};
$scope.signUp = function (customer) {
Data.post('signUp', {
customer: customer
}).then(function (results) {
Data.toast(results);
if (results.status == "success") {
$location.path('dashboard');
}
});
};
$scope.logout = function () {
Data.get('logout').then(function (results) {
Data.toast(results);
$location.path('login');
});
}
});
I've included such paths in my html:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"/>
<script src="app/angular-route.min.js"></script>
<script src="app/angular-animate.min.js" ></script>
<script src="app/toaster.js"></script>
<script src="app/app.js"></script>

There is some typos in your code :
app.config(function($routeProvider) {
$routeProvider
.when("/login", {
title: 'Login',
templateUrl: 'assets/login.html', // <---- missing ','
controller: 'authCtrl' // <----- should be format to string
})
});
Not sure if it will solve your problem

try it.
app.config(function($routeProvider) {
$routeProvider
.when("/login", {
title: 'Login',
templateUrl: 'assets/login.html',
controller: 'authCtrl' // <-- string
})
});

the controller name must pass as a string..try this
app.config(function($routeProvider) {
$routeProvider
.when("/login", {
title: 'Login',
templateUrl: 'assets/login.html',
controller: 'authCtrl'
})
});

How to manage factory single request data in a state with some ui views

Being pretty new at AngularJS, I'm trying to understand how to manage a single JSON that is comming from a single $http.get request which is gonna be used by 2 different controllers in 2 diferent ui-view.
The idea is to show the data of the user in the first ui-view and the data of the story in the second one.
Right now my factory do 2 $http requests, due to it's called twice by the two controllers.
Right now what I have is what it follows:
homeFactory.js
var homeFactory = angular.module('home.factory', []);
homeFactory.factory('homeData', [ '$http', '$q', function ($http, $q) {
var endpoints = null;
return {
getStories: function(url) {
return endpoints ?
$q(function(resolve, reject) { resolve(endpoints); }) :
$http.get(url + '/main/get', {
transformRequest : angular.identity,
headers : {'Content-Type' : undefined}
}).then(function(data) { endpoints = data; return data; });
}
};
}]);
home.js
var home = angular.module('home', ['home.factory']);
home.controller('topbarCtrl', [ 'CONFIG', 'homeData', function(CONFIG, homeData) {
var data = this;
data.stories = {};
homeData.getStories(CONFIG.API_URL).then(function(response) {
data.stories = response.data.stories;
}, function(error) {
console.log("Failed to load end-points list");
});
}]);
home.controller('contentCtrl', [ 'CONFIG', 'homeData', function(CONFIG, homeData) {
var data = this;
data.stories = {};
homeData.getStories(CONFIG.API_URL).then(function(response) {
data.stories = response.data.stories;
}, function(error) {
console.log("Failed to load end-points list");
});
}]);
app.js
(function () {
var app = angular.module('init', [
'home', 'ui.router'
]);
app.run([
'$rootScope',
'$state',
'$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]);
app.constant('CONFIG', {
'API_URL': 'https://xxxxxxxxx/',
'S3_PATH': 'http://resources.xxxxxxxxx.com',
'CLOUDFRONT': 'http://resources.xxxxxxxxx.com'
});
app.config([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
'$sceDelegateProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider, $sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'http://resources.xxxxxxxxx.com/**'
]);
$urlRouterProvider
.when('/logout', '/')
.otherwise('login');
$stateProvider
.state('home', {
url: "/home",
views: {
'header': { templateUrl: "app/Home/_topbar.html" },
'content': { templateUrl: "app/Home/_home.html" },
'footer': { templateUrl: "app/Home/_navbar.html" }
}
});
}
]);
}());
index.html
<!DOCTYPE html>
<html lang="en" ng-app='init'>
<head>
<meta charset="utf-8">
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<script src="app/Home/home.js"></script>
<script src="app/Home/HomeFactory.js"></script>
<div ui-view="main">
<div ui-view="header"></div>
<div class="wrapper" ui-view="content"></div>
<nav ui-view="footer"></nav>
</div>
<script src="js/sha512.js"></script>
</body>
</html>
How could I achieve what I need?
Thanks in advice.
UPDATE
The solution I applied is on the main controller is to request the data via resolve directive and asign a controller to each view as it follows:
$stateProvider
.state('home', {
url: "/home",
resolve: {
response: [ 'CONFIG', '$http', function(CONFIG, $http) {
return $http.get(CONFIG.API_URL + '/home').then(function(response) {
return response.data;
});
}]
},
views: {
'header': { templateUrl: "app/Home/_topbar.html", controller: 'headerCtrl', controllerAs: 'my' },
'content': { templateUrl: "app/Home/_home.html", controller: 'contentCtrl', controllerAs: 'my' },
'footer': { templateUrl: "app/Home/_navbar.html", controller: 'footerCtrl', controllerAs: 'my' }
}
});
Then you don't need to declare ng-controller to the html view.

You can use ui-router's resolve to make the api call and inject the resolved data into the controller.
app.js
$stateProvider
.state('home', {
url: "/home",
resolve: {
response: ['homeData', '$q', 'CONFIG', function(homeData, $q, CONFIG) {
var deferredData = $q.defer();
homeData.getStories(CONFIG.API_URL).then(function(response) {
return deferredData.resolve({
data: response.data
});
})
return deferredData.promise;
}]
}
views: {
'header': { templateUrl: "app/Home/_topbar.html" },
'content': { templateUrl: "app/Home/_home.html" },
'footer': { templateUrl: "app/Home/_navbar.html" }
}
});
Controller:
home.controller('topbarCtrl', ['response', function(response) {
console.log(response.data) //this will contain the response data
}]);
home.controller('contentCtrl', ['response', function(response) {
console.log(response.data) //this will contain the response data
}]);

Passing parameters to a resolve function

I'm having trouble figuring out how I could pass a parameter to a function that is a part of resolve of ngRoute.
In my case I'm doing stuff with tokens. These tokens are typed, so you cannot use the same token for confirming and email and reseting a password. Here's how my routes are defined:
.when("/confirm/:token", {
controller: "confirmEmailController",
templateUrl: "/app/views/confirmEmail.html",
resolve: {
tokenStatus: getTokenStatus
}
})
.when("/reset/:token", {
controller: "resetPasswordController",
templateUrl: "/app/views/resetPasswordEmail.html",
resolve: {
tokenStatus: getTokenStatus
}
})
Here's the getTokenStatus function that's being called for both of them:
var getTokenStatus = ["$q", "$route", "tokenService", function($q, $route, tokenService)
{
var deferred = $q.defer();
var tokenType = ???? //<-- how do I pass this?
tokenService
.getTokenStatus($route.current.params.token, tokenType)
.success(function(response)
{
deferred.resolve(true);
})
.error(function()
{
deferred.resolve(false);
});
return deferred.promise;
}];
The problem is that in order to avoid code duplication I need to somehow pass the value of the token type, as marked in the code. How could I do that?
I've been messing about with this for the last 2 hours, but can't seem to figure it out.

1. You can try to include token type into route
.when("/:tokenType/:token", {
controller: "confirmEmailController",
templateUrl: "/app/views/confirmEmail.html",
resolve: {
tokenStatus: getTokenStatus
}
})
.when("/:tokenType/:token", {
controller: "resetPasswordController",
templateUrl: "/app/views/resetPasswordEmail.html",
resolve: {
tokenStatus: getTokenStatus
}
})
And then just get it from $route.current.params.tokenType. But it's not clean solution - you should check your URL for validity.
2. You can use function wrapping
$routeProvider.when("/confirm/:token", {
controller: "confirmEmailController",
templateUrl: "/app/views/confirmEmail.html",
resolve: {
tokenStatus: getTokenStatus("confirm")
}
})
.when("/reset/:token", {
controller: "resetPasswordController",
templateUrl: "/app/views/resetPasswordEmail.html",
resolve: {
tokenStatus: getTokenStatus("reset")
}
});
var getTokenStatus = function(tokenType) {
return ["$q", "$route", "tokenService", function($q, $route, tokenService) {
var deferred = $q.defer();
tokenService
.getTokenStatus($route.current.params.token, tokenType)
.success(function(response)
{
deferred.resolve(true);
})
.error(function()
{
deferred.resolve(false);
});
return deferred.promise;
}];
};
3. You can move get-token-status logic into separate servise
$routeProvider.when("/confirm/:token", {
controller: "confirmEmailController",
templateUrl: "/app/views/confirmEmail.html",
resolve: {
tokenStatus: ['tokenStatusGetterService', function(tokenStatusGetterService){
return tokenStatusGetterService("confirm");
}]
}
})
.when("/reset/:token", {
controller: "resetPasswordController",
templateUrl: "/app/views/resetPasswordEmail.html",
resolve: {
tokenStatus: ['tokenStatusGetterService', function(tokenStatusGetterService){
return tokenStatusGetterService("reset");
}]
}
});
//...
.service('tokenStatusGetterService', ["$q", "$route", "tokenService", function($q, $route, tokenService) {
return function(tokenType) {
var deferred = $q.defer();
tokenService
.getTokenStatus($route.current.params.token, tokenType)
.success(function(response)
{
deferred.resolve(true);
})
.error(function()
{
deferred.resolve(false);
});
return deferred.promise;
};
}]);

one way to do it is to put a function on your getTokenStatus service.
this is a simplified example, yet it shows how to pass an argument to your resolve function.
app.factory('getTokenStatus',['$q', '$timeout', '$route', function($q, $timeout, $route){
this.action = function(tokenType) {
var defer = $q.defer();
$timeout(function(){
var res = {
path: $route.current.params.token,
tokenType: tokenType
}
defer.resolve(res);
},1000);
return defer.promise;
}
return this;
}]);
and call it from your resolve object:
app.config(function($routeProvider){
$routeProvider
.when("/123/:token", {
template: "<h1>hello</h1>",
controller: 'testCtrl',
resolve: {
tokenStatus: function(getTokenStatus) {
return getTokenStatus.action('firstToken').then(function(res){
console.log(res);
});
}
}
})
here's a plnkr