How to change template url in angularjs dynamically from controller? - javascript

From below angularJS code I want to get parameter namee in templateUrl please help me to generate dynamic templateurl.
sampleApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/AddNewOrder/:namee', {
controller: 'AddOrderController',
templateUrl:'templates/'+namee +'.html';
}).
when('/ShowOrders/:name', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder/add_orders'
});
}]);

You can pass a function as a value to templateUrl. The function return value will be the value for templateUrl. Function have access to the url attributes.
Note that the wildcard url name will be the value that you want to access. In your case its namee. console.log(attrs), if you want to see details of the attrs.
$routeProvider.
when('/AddNewOrder/:namee', {
controller: 'AddOrderController',
templateUrl: function(attrs) {
return 'templates/'+ attrs.namee +'.html';
}
})

Related

AngularJS change Location and set Controller

I have to change page and set a new controller.
Actually I'm using this code to routing:
bbApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/meetings', {
templateUrl: CONTEXT_PATH+'/get/meeting/list.html',
controller: 'MeetingListController'
}).
when('/meetings/:meetingId', {
templateUrl: CONTEXT_PATH+'/get/meeting/listItems.html',
controller: 'FolderListController',
params: {meetingList: meetingsArray}
}).
when('/items/:meetingId/:itemId/:itemsTitle/:lan/', {
templateUrl: CONTEXT_PATH+'/get/meeting/view.html',
controller: 'DocumentViewController'
}).
otherwise({
redirectTo: '/meetings'
});
}]);
Now I have to change page from controller and set new Controller tomanage new page.
I'm using this:
$location.path(CONTEXT_PATH+'/get/meeting/listItems.html');
How can set controller?
Thanks.

Angular Set Controller and routeParams

I'm using routeProvider to set the controller and a route param when my application is configured. Here's the code that I'm using:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/person/:uuid/report', { controller: 'CandidateCtrl' }).
when('/person/:uuid/confirm', { controller: 'ConfirmCtrl', }).
when('/person/add', { controller: 'AddCtrl' })
}]);
However, the controller is not being set correctly. Additionally, when I set the controller with ng-controller in the page itself, the routeParams object is empty. What am I doing wrong?
Edit:
I've also tried this, which also isn't associating the controller with the page nor setting the route-params.
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/person/:uuid/report', { controller: 'CandidateCtrl', template: 'templates/report.html' }).
when('/person/:uuid/confirm', { controller: 'ConfirmCtrl', template: 'templates/confirm.html' }).
when('/person/add', { controller: 'AddCtrl', template: 'templates/add.html' })
}]);
Here's the controller that I'm testing this out with:
appController.controller('CandidateCtrl', ['$routeParams',
function($routeParams) {
console.log($routeParams);
}]);
Try to add templateUrl
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/person/:uuid/report', {
templateUrl: 'partials/CandidateCtrl.html', //TODO : replace with the good template
controller: 'CandidateCtrl'
}).
when('/person/:uuid/confirm', {
templateUrl: 'partials/ConfirmCtrl.html', //TODO : replace with the good template
controller: 'ConfirmCtrl'
}).
when('/person/add', {
templateUrl: 'partials/AddCtrl.html', //TODO : replace with the good template
controller: 'AddCtrl'
}).
otherwise({
redirectTo: 'Something' //TODO : replace with the good url
});
}]);
I was serving the views by via my web-mvc. I've since changed it to serve a layout and have the partial pages be kept in the resource folder.

pass a variable into $routeProvider in angular between views? - angularjs

Wondering if there's an 'angular specific' way to try and achieve this.
I have a page with some views. When a user clicks an anchor, the views change, simple enough. What I'm curious is, if when the user clicks, is it possible to store a variable (say the span) then pass it to the $routeProvider to load the content a bit more dynamically?
so for anchor tag #name1, when that view is displayed, I can pass "name1" into nameHolder as a variable to load some files with same name.
HTML
<span>name1</span>
JS
var nameHolder = [];
var sampleApp = angular.module('sampleApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/' + nameHolder, {
templateUrl: 'templates/individkcd.html',
controller: 'individ',
nameofuser: nameHolder
}).
when('/', {
templateUrl: 'templates/home.html'
});
}]);
sampleApp.controller('individ', function($scope, $route) {
$scope.img = $route.current.nameHolder;
});
Thanks for any info.
UPDATED:
Solution at new thread.
angular js - passing a variable into $routeProvider
You need to add the parameter to your $routeProvider template:
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/' + nameHolder, {
templateUrl: 'templates/individkcd/:nameHolder',
controller: 'individ'
}).
when('/', {
templateUrl: 'templates/home.html'
});
}]);
Then in your target controller use $routeParams:
sampleApp.controller('individ', function($scope, $routeParams) {
$scope.img = $routeParams.nameHolder;
});
From the $routeProvider docs linked above:
path can contain named groups starting with a colon: e.g. :name. All
characters up to the next slash are matched and stored in $routeParams
under the given name when the route matches

$routeParams Empty on $locationChangeSuccess

I configure my app in the following run block. Basically I want to preform an action that requires me to know the $routeParams every $locationChangeSuccess.
However $routeParams is empty at this point! Are there any work rounds? What's going on?
app.run(['$routeParams', function ($routeParams) {
$rootScope.$on("$locationChangeSuccess", function () {
console.log($routeParams);
});
}]);
UPDATE
function configureApp(app, user) {
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/rentroll', {
templateUrl: 'rent-roll/rent-roll.html',
controller: 'pwRentRollCtrl'
}).
when('/bill', {
templateUrl: 'bill/bill/bill.html',
controller: 'pwBillCtrl'
}).
when('/fileroom', {
templateUrl: 'file-room/file-room/file-room.html',
controller: 'pwFileRoomCtrl'
}).
when('/estate-creator', {
templateUrl: 'estate/creator.html'
}).
when('/estate-manager', {
templateUrl: 'estate/manager.html',
controller: 'pwEstateManagerCtrl'
}).
when('/welcomepage', {
templateURL: 'welcome-page/welcome-page.html',
controller: 'welcomePageCtrl'
}).
otherwise({
redirectTo: '/welcomepage'
});
}]);
app.run(['$rootScope', '$routeParams', 'pwCurrentEstate','pwToolbar', function ($rootScope, $routeParams, pwCurrentEstate, pwToolbar) {
$rootScope.user = user;
$rootScope.$on("$locationChangeSuccess", function () {
pwToolbar.reset();
console.log($routeParams);
});
}]);
}
Accessing URL:
http://localhost:8080/landlord/#/rentroll?landlord-account-id=ahlwcm9wZXJ0eS1tYW5hZ2VtZW50LXN1aXRlchwLEg9MYW5kbG9yZEFjY291bnQYgICAgICAgAoM&billing-month=2014-06
this worked for me, inside your run callback:
.run(function($rootScope, $routeParams, $location) {
$rootScope.$on("$locationChangeSuccess", function() {
var params = $location.search();
console.log(params);
console.log('landlord-account-id:', params['landlord-account-id']);
console.log('billing-month', params['billing-month']);
});
})
By accessing /rentroll you will get empty $routeParams because your $routeProvider
configuration for that path is not expecting any variable on URL.
$routeParams is used for getting variable value of your URL. For example :
$routeProvider
.when('/rentroll/:variable', {...});
and access it on /rentroll/something will give you $routeParams as below :
$routeParams.variable == 'something';
https://docs.angularjs.org/api/ngRoute/service/$routeParams
Explains a bit about when the $routeParams are available and why.
To solution here might be to use $route.current.params

Routes fetched from controller

is it possible to load url from controllers in routeProvider?
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/LALA', {
controller: 'LalaController',
templateUrl: '/mlala.html'
})
.when('/HOHO', {
controller: 'HohoController',
templateUrl: '/hoho.html'
})
.otherwise({redirectTo: '/'});
and I would like something like this:
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/MO', {
controller: 'MOController',
templateUrl: $scope.url
})
.when('/MOCache', {
controller: 'MOCacheController',
templateUrl: $scope.url
})
.otherwise({redirectTo: '/'});
Route URLs would be defined in Controllers.
Well, no.
But you can use named groups, assign a function to templateUrl and get the route parameters passed in:
.when('/MO/:page', { // <-- ':page' is a named group in the pattern
controller: 'MOController',
templateUrl: function (params) {
// use the route parameters to return a custom route
return 'views/partials/mo/' + params.page + '.html';
}
})
Than you can just inject whatever custom parameter you like in your views, e.g.:
<!-- 'paws' and 'whiskers' will be passed to the route params -->
paws page!
whiskers page!
Look, mommy, no controllers!
Reference
$routeProvider on the AngularJS docs.

Categories