I'm wondering if there is a way to resolve a library dependency on the resolve function of UI-router.
Something like this:
$stateProvider.state('app.cart', {
title : "CART.TITLE",
url : '/cart',
views : {
'content#app': {
templateUrl: 'app/main/cart/cart.html',
controller : 'CartController as vm'
},
},
bodyClass: 'cart',
resolve: {
//fetch a library, ex. moment js
var moment = $http.get('moment.js');
body.append(moment);
}
});
Not sure why you would do that but you can easily fetch a JS file within resolve. Demo
$stateProvider
.state('state1', {
url: 'state1',
templateUrl: 'state1.tpl.html'
})
.state('state2', {
url: 'state2',
templateUrl: 'state2.tpl.html',
resolve: {
external: ['$http', function($http) {
var someJs = 'https://gist.githubusercontent.com/jonaszuberbuehler/952c2f9a0c9e28557ed89c1e4d6fe8b7/raw/e6664811e1b34d9761500f4c46bfd2e1e2439d23/gistfile1.txt';
return $http.get(someJs).then(function(result) {
alert(result.data);
});
}]
}
});
Adding it to the DOM is another question.
Related
I have AngularJS(1.4.9) project that is build with usage of ui-router and have few states like this:
.state('overview', {
url: '/overview',
parent: 'dashboard',
templateUrl: 'views/dashboard/overview.html'
})
.state('settings', {
url: '/settings',
parent: 'dashboard',
templateUrl: 'settings/views/index.html',
controller: "SettingsCtrl"
})
Now I want to add want to integrate ng-admin(0.9.1) to it. I have tested it as standalone app with standalone html as described in docs and it works. But I couldn't find a way to add it to current project.
You will have to change your app parent state with ng-admin like below
// from
myApp.config(function ($stateProvider) {
$stateProvider.state('send-post', {
parent: 'main',
url: '/sendPost/:id',
params: { id: null },
controller: sendPostController,
controllerAs: 'controller',
template: sendPostControllerTemplate
});
});
// to
myApp.config(function ($stateProvider) {
$stateProvider.state('send-post', {
parent: 'ng-admin', // <= this has changed
url: '/sendPost/:id',
params: { id: null },
controller: sendPostController,
controllerAs: 'controller',
template: sendPostControllerTemplate
});
});
For reference please check updated document ng-admin
My 'just works' solution is to add to main project states external link of ng-admin:
.state('database', {
onEnter: function($window) {
$window.open('/ng-admin/ng-admin.html', '_self');
}
})
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);
},
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
I try to create an app with angular, and somehow the child state in not loading.
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url : "/",
templateUrl: "/admin/home/"
})
.state('users', {
url : "/users/",
templateUrl: "/admin/users",
controller : function ($stateParams) {
console.log($stateParams);
console.log("users");
}
})
.state('users.new', {
url : "^/users/user/",
templateUrl: "/admin/users/new",
controller : function () {
console.log("users.new");
}
})
.state('users.user', {
url : "^/users/user/:uuid",
templateUrl: function ($stateParams) {
console.log($stateParams);
return "/admin/users/" + $stateParams.uuid
},
controller : function () {
console.log("users.user");
}
});
When I visiting the page
/users/user/55d8b1c706387b11480d60c1
I see the request to load the page, but only the "users" controller got executed.
This problem appears only with child states, switching between parent state working without problems.
I Using the latest versions of angular and ui-routes.
any ideas?
Please read this DOC
You mistake is in hierarchy. Child states use parent template as root and try find nested <ui-view>
You may add abstract state user without url, with empty template <ui-view></ui-view>, for nested viws. Then rename user, to E.G. user.index, it works for me
1st (It may works)
$stateProvider
.state('home', {
url : "/",
templateUrl: "/admin/home/"
})
.state('users', {
template: "<ui-view></ui-view>",
})
.state('users.index', {
url : "/users/",
templateUrl: "/admin/users",
controller : function ($stateParams) {
console.log($stateParams);
console.log("users");
}
})
.state('users.new', {
url : "^/users/user/",
templateUrl: "/admin/users/new",
controller : function () {
console.log("users.new");
}
})
.state('users.user', {
url : "^/users/user/:uuid",
templateUrl: function ($stateParams) {
console.log($stateParams);
return "/admin/users/" + $stateParams.uuid
},
controller : function () {
console.log("users.user");
}
});
2nd way is USE absulutly named views E.G.
views: {
"": { templateUrl: 'pages/menu.html' }, // relative noName view
"header": { templateUrl: "pages/header.html"}, //relative named view
"content#": { // Absolute name
template: "<ui-view></ui-view>",
controller: 'AuthController'}
}
I'm running into the issue, that I have the same resolve function in parent & child states - and depending on the child state, i would like to have it return a different value.
Somehow, instead of overwriting the implementation for it, it simply just takes the behavior from the parent state.
.state('wines', {
url: '/wines',
templateUrl: 'partials/products/index',
controller: 'cwProductsController',
resolve: {
merchandiseView: function() {
return "featured";
}
}
}).state('wines.featured', {
url: "/featured",
templateUrl: 'partials/products/index',
controller: 'cwProductsController',
resolve: {
merchandiseView: function() {
return "featured";
}
}
}).state('wines.curatorsChoice', {
url: "/curators-choice",
templateUrl: 'partials/products/index',
controller: 'cwProductsController',
resolve: {
merchandiseView: function() {
return "curators-choice";
}
}
}).state('wines.stillAvailable', {
url: "/still-available",
templateUrl: 'partials/products/index',
controller: 'cwProductsController',
resolve: {
merchandiseView: function() {
return "still-available";
}
}
});
Here, it always keeps on returning "featured", even when visiting wines/still-available, where I expect merchandiseView to be "still-available".
This is my controller:
angular.module('clubwApp').controller('cwProductsController', [
'$scope', 'cwProduct', '$stateParams', 'merchandiseView', function($scope, cwProduct, $stateParams, merchandiseView) {
console.log(merchandiseView);
$scope.wines = cwProduct.available();
return $scope.merchandiseView = angular.copy(merchandiseView);
}
]);
Is there a way, how i can overwrite this?
Attach you specific data to the data state property instead of the resolve.
At controller initialization time read $state.current.data from the $state injectable.
This is apparently an issue (up until 0.2.15).
Here is a hacky solution to the problem:
http://plnkr.co/edit/j1wCThlv1uczlX7d5cdg?p=preview
the resolve: {test: {this.data.someObject}}