My SPA uses the new angular router. Everything is working well, but now I would like to pass a parameter to one of the components. There are multiple viewports in every routing, and in this case I can't grab the parameter passed to the router.
The routing
AppController.$routeConfig = [
{
path: '/',
redirectTo: '/home'
},
{
path: '/home',
components: {
'main': 'home',
'footer': 'footer'
},
as: 'home'
},
{
path: '/request',
components: {
'main': 'request',
'footer': 'footer'
},
as: 'request'
},
{
path: '/request/:id',
components: {
'main': 'request',
'footer': 'footer'
},
as: 'requestid'
},
{
path: '/allItems',
components: {
'main': 'allItems',
'footer': 'footer'
}, as: 'allItems'
}
];
The calling of the route
<a class="btn btn-warning" aria-haspopup="true" aria-expanded="false" ng-link="requestid({id: 1})">
the result url seems legit
https://<sitename>/index.aspx#/request/1
The controller cannot get the $routeParams.id.
angular.module('app.request')
.controller('requestController', ['$routeParams', '$scope', function ($routeParams, $scope) {
$scope.id = $routeParams.id;
}]);
What I've missed? Thanks in advance.
Related
I have this configuration
angular.module('BlurAdmin.pages.form', ['ui.select', 'ngSanitize', 'textAngular'])
.config(routeConfig);
/** #ngInject */
function routeConfig($provide, $stateProvider) {
$provide.decorator('taOptions', ['taRegisterTool', '$delegate', function(taRegisterTool, taOptions) { // $delegate is the taOptions we are decorating
taOptions.toolbar = [
['pre', 'quote','bold', 'italics', 'underline', 'strikeThrough', 'ul', 'ol', 'redo', 'undo', 'clear','justifyLeft', 'justifyCenter', 'justifyRight', 'indent', 'outdent', 'insertImage','insertLink', 'insertVideo'],
[]
];
return taOptions;
}]);
$stateProvider
.state('form', {
url: '/form',
template : '<ui-view autoscroll="true" autoscroll-body-top></ui-view>',
abstract: true,
title: 'Form Elements',
sidebarMeta: {
icon: 'ion-compose',
order: 250,
},
})
.state('form.campaigns', {
url: '/campaigns',
templateUrl: 'app/pages/form/campaigns/campaigns.html',
title: 'Campaigns',
controller: 'CampaignsCtrl',
sidebarMeta: {
order: 0,
},
})
.state('form.campaigns.detail', {
url: '/:label',
// templateUrl: 'app/pages/form/campaigns/campaigns-details.html',
templateUrl: 'app/pages/components/mail/detail/mailDetail.html',
title: 'Campaign and Questions1',
controller: "MailListCtrl",
controllerAs: "listCtrl"
})
no in file campaigns.html i have a link like <p class="bold grey" ui-sref="form.campaigns.detail({id: '123', label: 'aaa'})">CLICK</p>.
Now when i am clicking 'CLICK' just the title of page is changing to Campaign and Questions1 but the template url is still the same i.e campaign.html instead of mailDetail.html
try this below ng-view because ui-view use in ui-router and ng-view use angularjs default router, (if are you using ui-view then you have to install ui-router
template : '<ng-view autoscroll="true" autoscroll-body-top></ng-view>',
I have a modular app who have multiple vendor plugins and I need to load only necessary in every view.
This is my routes:
(function() {
'use strict';
angular.module('app.empresas').config(config);
function config($stateProvider, $ocLazyLoadProvider) {
$stateProvider
.state('app.empresas', {
url: '/empresas?Filter',
views: {
'main#': {
template: require('./empresas/empresas.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresas',
bodyClass: '',
requiredLogin: true
}
})
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main#': {
template: require('./empresas.view/empresas.view.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
}
})
}
})();
I know how to include oclazyload resources without webpack, but now I need to include specific resources for every view. ¿How can do this?
I solved it using this snippet:
This is a sample of a state
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main#': {
templateUrl: '/app/main/apps/empresas/empresas.view/empresas.view.html',
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
},
resolve: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
var deferred = $q.defer();
var mod = importAll(require.context('./empresas.view/', true, /\.*$/));
$ocLazyLoad.load({
name: 'app.empresas.view'
});
deferred.resolve(mod);
return deferred.promise;
}]
})
I use this function with require to load entire folder with oclazyload and compile with webpack in a bundle separate file:
function importAll (r) {r.keys().forEach(r);}
I can load css, html, js files in one view without require files one by one
Here is component structure of my application. Any advice will be valuable. Root component is app.
Which has two components as child : login & home.
home has two child components : dummy-component & dummy-component1.
Is it good practice? Will I face any issue if I switch component router to ui-router. I am also planning to switch from angular 1.6.0 to 2.0
App.component('app', {
templateUrl: 'core/app',
$routeConfig: [{
path: '/core/teamnest/login-component/',
name: 'LoginComponent',
component: 'loginComponent',
useAsDefault: true
},
{
path: '/core/teamnest/home-component/...',
name: 'HomeComponent',
component: 'homeComponent'
},
],
controller: appController
});
App.component('homeComponent', {
templateUrl: 'core/dashboard',
$routeConfig: [{
path: '/dummy-component',
name: 'DummyComponent',
component: 'dummyComponent',
useAsDefault: true
},
{
path: '/dummy-component1',
name: 'DummyComponent1',
component: 'dummyComponent1'
}
],
bindings: {
$router: '<'
},
controller: homeController
});
App.component('dummyComponent', {
templateUrl: 'core/dummy',
controller: dummyController
});
App.component('dummyComponent1', {
templateUrl: 'core/diff'
});
I'm having a problem I can't seem to figure out. When using ui-sref to change to a new state, the correct controller "does" load, but the current controller ALSO reloads. Twice in fact. (I set a break-point in the JavaScript and it hits that break-point twice).
Here is the relevant UI-router code:
.state('index',
{
abstract: true,
url: "/index",
templateUrl: "app/shared/content.html"
})
.state('index.cardholder',
{
url: '/cardholder',
views: {
'content': {
templateUrl: 'app/views/cardholder/cardholder.html',
controller: 'cardholderController'
}
},
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
name: 'app',
files: ['app/views/cardholder/cardholderController.js']
}
]);
}
},
params: {
loadParams: false
}
})
.state('index.cardholderedit',
{
url: '/cardholder/edit',
views: {
'content': {
templateUrl: 'app/views/cardholder/edit/editCardholder.html',
controller: 'editCardholderController'
}
},
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
name: 'app',
files: ['app/views/cardholder/edit/editCardholderController.js']
}
]);
}
},
params: {
id: null,
template: null
}
})
And here is the sref that calls the new state:
<a ui-sref="index.cardholderedit({ id:cardholder.empPersonDTO.personId, template:selectedTemplate})">
I did a search on cardholderController just to make sure I didn't have a naming issue somewhere - it all looks kosher.
Why is cardholderController reloading? How do I stop it?
I thought the new direction that Angular was going in was Controller free views. How come the New Router (seemingly) asks for a Controller? Is it possible to route without one?
Yes it is possible. In 1.5 You can use component() or 1.3+ directive().
Here is the latest example working with angular 1.5, components() and child routes:
http://plnkr.co/edit/N3YP3dKMuljpZ6mWsVBT?p=preview
app.js
angular.module('app', ['ngComponentRouter', 'dialog', 'heroes', 'crisis-center'])
.config(function($locationProvider) {
$locationProvider.html5Mode(true);
})
.run(function($router) {
$router.config([
{ path: '/...', name: 'App', component: 'app', useAsDefault: true }
]);
$router.navigate(['App']);
})
.component('app', {
template:
'<nav>\n' +
' <a ng-link="[\'CrisisCenter\']">Crisis Center</a>\n' +
' <a ng-link="[\'Heroes\']">Heroes</a>\n' +
'</nav>\n' +
'<ng-outlet></ng-outlet>\n',
$routeConfig: [
{path: '/crisis-center/...', name: 'CrisisCenter', component: 'crisisCenter', useAsDefault: true},
{path: '/heroes/...', name: 'Heroes', component: 'heroes'},
{path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter', 'CrisisDetail', {id:3}]}
]
});