I would like the route.resolve method(s) to fire before the actual route code is run. Unfortunately in the code below, prime() gets called but it is called asynchronously and the route code gets called before the prime completes. I thought the resolve methods of a route was suppose to complete before the route is loaded?
(function () {
'use strict';
var app = angular.module('app');
// Collect the routes
app.constant('routes', getRoutes());
// Configure the routes and route resolvers
app.config(['$routeProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider, routes) {
routes.forEach(function (r) {
setRoute(r.url, r.config)
});
$routeProvider.otherwise({ redirectTo: '/' });
function setRoute(url, definition) {
//set resolvers for all of the routes
//by extending any existing resolvers (or creating a new one)
definition.resolve = angular.extend(definition.resolve || {}, {
prime: prime
});
$routeProvider.when(url, definition);
return $routeProvider;
}
}
prime.$inject = ['datacontext'];
function prime(dc) {
dc.prime();
}
// Define the routes
function getRoutes() {
return [
{
url: '/',
config: {
templateUrl: 'app/dashboard/dashboard.html',
title: 'dashboard',
settings: {
nav: 1,
content: '<i class="icon-dashboard"></i> Dashboard'
}
}
},
{
url: '/sessions',
config: {
title: 'admin',
templateUrl: 'app/sessions/sessions.html',
settings: {
nav: 2,
content: '<i class="icon-calendar"></i> Sessions'
}
}
},
{
url: '/speakers',
config: {
title: 'speakers',
templateUrl: 'app/speakers/speakers.html',
settings: {
nav: 3,
content: '<i class="icon-user"></i> Speakers'
}
}
},
{
url: '/attendees',
config: {
title: 'attendees',
templateUrl: 'app/attendees/attendees.html',
settings: {
nav: 4,
content: '<i class="icon-group"></i> Attendees'
}
}
}
];
}
})();
Try changing prime to the following:
function prime(dc) {
return dc.prime();
}
I suggest you re-position the prime function to the global controller defining it as:
$scope.prime = function (dc) {
dc.prime();
};
Move prime inside scope of routeConfigurator
(function () {
'use strict';
var app = angular.module('app');
// Collect the routes
app.constant('routes', getRoutes());
// Configure the routes and route resolvers
app.config(['$routeProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider, routes) {
routes.forEach(function (r) {
setRoute(r.url, r.config);
});
$routeProvider.otherwise({ redirectTo: '/' });
function setRoute(url, definition) {
definition.resolve = angular.extend(definition.resolve || {}, { prime: prime });
$routeProvider.when(url, definition);
return $routeProvider;
}
prime.$inject = ['datacontext'];
function prime(datacontext) {
return datacontext.prime();
}
}
// Define the routes
function getRoutes() {
return [
{
url: '/',
config: {
templateUrl: 'app/dashboard/dashboard.html',
title: 'dashboard',
settings: {
nav: 1,
content: '<i class="fa fa-dashboard"></i> Dashboard'
}
}
},
{
url: '/sessions',
config: {
title: 'sessions',
templateUrl: 'app/sessions/sessions.html',
settings: {
nav: 2,
content: '<i class="fa fa-calendar"></i> Sessions'
}
}
},
{
url: '/speakers',
config: {
title: 'speakers',
templateUrl: 'app/speakers/speakers.html',
settings: {
nav: 3,
content: '<i class="fa fa-user"></i> Speakers'
}
}
},
{
url: '/attendees',
config: {
title: 'attendees',
templateUrl: 'app/attendees/attendees.html',
settings: {
nav: 4,
content: '<i class="fa fa-group"></i> Attendees'
}
}
}
];
}
})();
Related
I'm using angular hottowel template for develop my web application. route config code file shown bellow.
(function(){
'use strict';
var app = angular.module('app');
// Collect the routes
app.constant('routes', getRoutes());
// Configure the routes and route resolvers
app.config(['$routeProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider, routes)
{
routes.forEach(function(r)
{
setRoute(r.url, r.config);
});
$routeProvider.otherwise({ redirectTo: '/' });
function setRoute(url, definition)
{
definition.resolve = angular.extend(definition.resolve || {}, {
prime: prime
});
$routeProvider.when(url, definition);
}
}
prime.$inject = ['datacontext'];
function prime(dc) { return dc.prime(); }
// Define the routes
function getRoutes()
{
return [
{
url: '/',
config: {
templateUrl: 'app/dashboard/dashboard.html',
title: 'dashboard',
settings: {
nav: 1,
content: '<i class="fa fa-dashboard"></i> Dashboard'
}
}
}, {
url: '/customers',
config: {
title: 'customers',
templateUrl: 'app/customer/customers.html',
settings: {
nav: 2,
content: '<i class="fa fa-calendar"></i> customers'
}
}
},
{
url: '/customer/:id',
config: {
title: 'customer',
templateUrl: 'app/customer/customerdetail.html',
settings: {}
}
}
];
}})();
I need to add external link to my menu as example www.google.com. how can i add another link to this route config like bellow.
{
url: 'www.google.com',
config: {
title: 'MyExternalLink',
settings: {}
}
}
This question looks similar to this post have a look
Using $routeProvider to redirect to routes outside of Angular
Im using Angular 1.5.6 and am using AngularUI Router (https://github.com/angular-ui/ui-router). I have different routes e.g. customer and users. In each of these there are different 'sub-roots' e.g. one for list and one for edt. Im setting up the customer route here:
import customerListModule from './list/customer.list';
import customerServiceModule from './services/customer.service';
...
...
function customerModule($stateProvider, $urlRouterProvider) {
'ngInject';
$urlRouterProvider
.when('/customer', ['$state', function($state) {
$state.go('customer.list.tracked');
}]);
$stateProvider
.state('customer', {
parent: 'root',
url: '/customer',
abstract: true,
views: {
'root#app': {
template: '<div class="customer" ui-view=""></div>'
}
},
onEnter: () => {
// in here I want to change my customer servce
},
})
.state('customer.list', {
url: '',
views: {
'#customer': {
template: '<customer></customer>'
}
},
breadcrumbs: {
name: 'customer.breadcrumbs.list'
},
params: {
saving: false
}
})
.state('customer.edit', {
parent: 'customer.list',
url: '/:id/edit',
views: {
'#customer': {
template: editTemplate(),
controller: manageCustomerCtrl,
controllerAs: 'manageCustomerVM'
}
},
breadcrumbs: {
name: 'customer.breadcrumbs.edit'
},
resolve: {
isAuthorized: 'readWriteAccess'
},
bodyClass: 'product-form'
});
}
export default angular.module('customerAdminUI.customer', [
'ui.bootstrap',
'ui.router',
customerListModule.name,
customerServiceModule.name,
...
...
])
.config(customerModule);
I have a customer service which I want to access in the onEnter callback of the customer state. I tried to inject it into the customerModule method so that I can use it in the onEnter() callback:
function customerModule($stateProvider, $urlRouterProvider, CustomerService) {
...
...
$stateProvider
.state('customer', {
parent: 'root',
url: '/customer',
abstract: true,
views: {
'root#app': {
template: '<div class="customer" ui-view=""></div>'
}
},
onEnter: () => {
CustomerService.clearSearch();
},
})
However I get the error:
Unknown provider: CustomerService
How can I use a service in the onEnter callback?
We can ask for a service as a param
// not ready for minification
onEnter: function(CustomerService) {
CustomerService.dowhatneeded...
},
// preferred way
onEnter: ['CustomerService', function(service) {
service.dowhatneeded...
}],
I have the following routes file in components/app/app-routes.js:
export default
function AppRoutes($stateProvider, $urlRouterProvider, $transitionsProvider) {
'ngInject';
// reference: https://ui-router.github.io/guide/ng1/migrate-to-1_0#lazy-resolves
const defaultResolvePolicy = {
when: 'EAGER'
};
const STATES = [{
name: 'logout',
url: '/logout?applicationName&desktopName&sn',
}, {
name: 'base',
url: '',
abstract: true,
template: '<ui-view></ui-view>'
}, {
name: 'app',
parent: 'base',
abstract: true,
component: 'wireApp',
data: {
authRequired: true
},
resolvePolicy: defaultResolvePolicy,
resolve: {
labels(LabelService) {
'ngInject';
return LabelService.fetch();
},
settings(SettingsService) {
'ngInject';
return SettingsService.fetch();
},
}
}, {
name: '404',
url: '/404',
parent: 'base',
template: '<w-404></w-404>',
resolvePolicy: defaultResolvePolicy,
resolve: {
module($q, $ocLazyLoad) {
'ngInject';
return $q((resolve) => {
require.ensure([], (require) => {
let mod = require('pages/404');
$ocLazyLoad.load({
name: mod.name
});
resolve(mod.name);
}, '404');
});
},
}
}, {
name: 'dashboard',
parent: 'app',
url: '/dashboard',
data: {
authRequired: true
},
views: {
'content#app': {
template: '<w-dashboard priority-tasks="$resolve.priorityTasks"></w-dashboard>'
},
},
resolvePolicy: {
module: defaultResolvePolicy,
priorityTasks: {
when: 'LAZY'
},
},
resolve: {
priorityTasks($http, $q, CacheFactory, CustomerService, RuntimeConfig, PermissionService) {
'ngInject';
if (!CacheFactory.get('priorityTasks')) {
CacheFactory.createCache('priorityTasks', {
storageMode: 'sessionStorage',
storagePrefix: 'w'
});
}
const priorityTasksCache = CacheFactory.get('priorityTasks');
if (PermissionService.check('PRIORITY_TASKS', 'view')) {
return $http.get(`${RuntimeConfig.DEV_API_URL}/customer/${CustomerService.model.currentCustomer.id}/priority-tasks`, {
cache: priorityTasksCache
}).then(({
data
}) => data, () => $q.resolve([]));
}
return [];
},
module($q, $ocLazyLoad) {
'ngInject';
return $q((resolve) => {
require.ensure([], (require) => {
let mod = require('pages/dashboard');
$ocLazyLoad.load({
name: mod.name
});
resolve(mod.name);
}, 'dashboard');
});
}
}
}, {
name: 'loans',
parent: 'app',
url: '/loans',
data: {
authRequired: true
},
views: {
'content#app': {
template: '<w-loans></w-loans>',
},
},
resolvePolicy: defaultResolvePolicy,
resolve: {
security($q, $state) {
'ngInject';
//irl get this from a service.
console.log($transitionsProvider, "TRANSISIONS PROVIDER FROM ROUTE");
// let permissions = false;
// if (!permissions) {
// return $q.reject("No permissions");
// }
},
module($q, $ocLazyLoad) {
'ngInject';
return $q((resolve) => {
require.ensure([], (require) => {
let mod = require('pages/loans');
$ocLazyLoad.load({
name: mod.name
});
resolve(mod.name);
}, 'loans');
});
}
}
}];
$urlRouterProvider
.when('', '/dashboard')
.when('/', '/dashboard')
.when('/login', '/dashboard')
.otherwise('/404');
//this will redirect all rejected promises in routes to a 404.
$transitionsProvider.onError({
to: '*',
from: '*'
}, (transition) => {
let $state = transition.router.stateService;
$state.go('404');
});
STATES.forEach((state) => {
$stateProvider.state(state);
});
}
in my loans controller (associated state above, 'loans'), however, I am unable to access the new uiCanExit callback.:
.component('wLoans', {
template: require('./loans.html'),
controller: LoansController,
bindings: {
settings: '<',
labels: '<'
}
});
function LoansController($window, $timeout, $http, $compile, $log, $filter, LoansService, ConfigService, ngDialog, SettingsService, CustomerService, ColumnRenderService, $transitions) {
'ngInject';
this.uiCanExit = function () {
console.log("WHY AM I NOT GETTING HERE");
}
}
nothing appears in the console when I switch between states, and I'm trying to figure out what to do to get the uiCanExit lifecycle hook to be run when I switch in between states (particularly dashboard and loans)
I'm not sure about this, but could the problem be caused by not referencing the component directly? Probably this only works when you reference your loans component via the component key instead of placing them in a template which renders the component. I assume that in your case the router tries to find the callback in the (not declared and thus dummy) controller instead of using the component's controller.
Please have a look at the docs: https://ui-router.github.io/docs/latest/interfaces/ng1.ng1controller.html#uicanexit
You can validate this assumption by putting a controller implementation with the uiCanExit() method in your loans state.
I'm trying to lazy configure custom types of angular-formly with ocLazyLoad but I cannot. When the state is executing I'm trying to call the setType function but the page does not load anything after that. When I remove the setType function everything works fine. Is there any way to lazy configure the formly types?
formlyConfig.setType({
name: 'input',
template: '<input ng-model="model[options.key]" />'
});
Roughly, this is the example:
//ocLazyLoad Configurations
$ocLazyLoadProvider.config({
events: true,
debug: true,
modules: [
{
name: "formly",
files: [ "Scripts/formly/angular-formly.js" ]
},
{
name: "formlyBootstrap",
files: [ "Scripts/formly/angular-formly-templates-bootstrap.js" ]
}
]
});
//Ui-Router Configs
$stateProvider
.state("admin", {
abstract: true,
url: "/admin",
templateUrl: "App/admin/templates/content.html",
resolve: {
loadApiCheck: ["$ocLazyLoad", function ($ocLazyLoad) {
return $ocLazyLoad.load("Scripts/formly/api-check.js");
}],
loadFormly: ["loadApiCheck", "$ocLazyLoad", function (loadApiCheck, $ocLazyLoad) {
return $ocLazyLoad.load("formly");
}],
loadFormlyBootstrap: ["loadFormly", "formlyConfig", "$ocLazyLoad", function (loadFormly, formlyConfig, $ocLazyLoad) {
//* * *
//After formlyConfig.setType() nothing gets executed
//* * *
debugger;
formlyConfig.setType({
name: 'input',
template: '<input ng-model="model[options.key]" />'
});
return $ocLazyLoad.load("formlyBootstrap");
}]
}
})
.state("admin.contact", {
url: "/contact",
controller: "contactCtrl",
controllerAs: "vm",
templateUrl: "App/admin/templates/contact.html",
resolve: {
loadFunctionalityFiles: ["$ocLazyLoad", function ($ocLazyLoad) {
return $ocLazyLoad.load({
serie: true,
files: [
"App/admin/factories/userFactory.js",
"App/admin/controllers/contactController.js"
]
});
}]
}
});
Finally, here is the documentation, just in case: Angular-Formly extending types
And here i've made a plnkr test case
#kentcdodds i managed to solve this particular problem i think but i'm not 100% sure, however in this example it is working. The solution to my problem is to call setType function after formlyBootstrap is loaded.
The code to achieve that is the following:
$stateProvider
.state("admin", {
abstract: true,
url: "/admin",
templateUrl: "content.html",
resolve: {
loadApiCheck: ["$ocLazyLoad", function($ocLazyLoad) {
return $ocLazyLoad.load("//npmcdn.com/api-check#latest/dist/api-check.js");
}],
loadFormly: ["loadApiCheck", "$ocLazyLoad", function(loadApiCheck, $ocLazyLoad) {
return $ocLazyLoad.load("formly");
}],
loadFormlyBootstrap: ["loadFormly", "$ocLazyLoad", "formlyConfig", function(loadFormly, $ocLazyLoad, formlyConfig) {
return $ocLazyLoad
.load("formlyBootstrap")
.then(function() {
console.log("reached critical point...");
formlyConfigurations(formlyConfig);
console.log("passed critical point!");
});
}]
},
onEnter: ["$log", "$state", function($log, $state) {
$log.info("state admin entered");
}]
});
here is the plnkr
Here is my config page for my states:
//
// THESE ARE THE GUEST ACCESS LEVEL AND ROUTES
//
var guest = [];
guest.push({
state: 'guest',
abstract: true,
url: '^',
templateUrl: 'app/views/layouts/guest.html',
data: {
access: accessLevels.guest
}
});
guest.push({
state: 'guest.index',
url: '',
template: 'Nothing to see here',
});
guest.push({
state: 'guest.login',
url: '/login/',
template: '<login-panel/>',
dependencies: [
'app/components/login/app'
]
});
guest.push({
state: 'guest.indexHash',
url: '/',
template: 'Nothing to see here',
});
guest.push({
state: 'guest.logout',
url: '/logout/',
controller: function($state, $http) {
console.log('delete');
$http.delete('/api/sessions')
.success(function() {
$state.go('guest.index');
});
}
});
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
//
// THESE ARE THE USER ACCESS LEVEL AND ROUTES
//
var user = [];
user.push({
state: 'user',
abstract: true,
templateUrl: 'app/views/layouts/user.html',
data: {
access: accessLevels.user
}
});
user.push({
state: 'user.home',
url: '^/home/'
});
var schedule = [];
schedule.push({
state: 'user.schedule',
abstract: true,
url: '^/schedules/',
views: {
'leftView': {
template: '<div ui-view="leftView"/>'
},
'mainView': {
template: '<div ui-view="mainView"/>'
},
'rightView': {
template: '<div ui-view="rightView"/>'
}
},
dependencies: [
'app/components/schedule/app'
]
});
schedule.push({
state: 'user.schedule.blank',
url: '',
controller: function($state) {
console.log('Transit');
}
});
schedule.push({
state: 'user.schedule.view',
url: ':day/:month/:year/',
views: {
'mainView': {
template: '<schedule/>'
}
}
});
schedule.push({
state: 'user.schedule.edit',
url: ':day/:month/:year/edit/',
views: {
'mainView': {
template: '<schedule/>'
}
}
});
user = user.concat(schedule);
var routes = guest.concat(user);
return {
defaultRoutePath: '/',
routes: routes
};
In my app.js run() function, I'd like to add some authentication code, and what I have so far is:
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
if (!Auth.authorize(toState.data.access)) {
console.warn('no authorize');
$state.go('guest.login');
}
});
When I run the code above, the warning does show up, but the page doesn't change; the content is still the same, and the URL is also still the same as before.
I register the routes in my app.config as such:
// Link the routes and resolve the dependencies
if (config.routes !== undefined) {
_.each(config.routes, function(route) {
$stateProvider.state(route.state, {
url: route.url,
templateUrl: route.templateUrl,
template: route.template,
views: route.views,
data: route.data,
abstract: route.abstract,
controller: route.controller,
resolve: dependencyResolver(route.dependencies)
});
});
}