So basically I'm developing a monitoring system. When I click on a specific application I want to navigate to a statistics page and load that apps stats dynamically.
So on the monitoring pages (example.com/app/#/monitorscreen) script I have the following line of code:
window.location = "#/applicationstats?application=" + app;
Which then navigates me to:
example.com/app/#/applicationstats?application=test123
My question is, how do I access the data held in the parameter 'application' above? In other words, how can I print to the screen 'test123'
Consider switching to ng-route or better yet ui-router.
it has all the functionality you are looking for including stateParmas (accessing parameters from url)
https://angular-ui.github.io/ui-router/site/#/api/ui.router
you should use RouteProvider and RouteParams
check this answer:
How to get the url parameters using angular js
In the routing file, include $routeProvider for ng-route and $stateProvider for ui-route
$routeProvider.when('/view1/:param1/:param2', {
templateUrl: 'partials/partial1.html',
controller: 'MyCtrl1'
});
$stateProvider.state('partials', {
url: '/partials/:param1/:param2',
controller: 'MyCtrl1',
templateUrl: 'partials/partial1.html'
});
Then in your controller inject $routeParams for ng-route and $stateParams for ui-route:
.controller('MyCtrl1', ['$scope','$routeParams', function($scope, $routeParams) {
var param1 = $routeParams.param1;
var param2 = $routeParams.param2; //change here from param1 to param2
...
}]);
.controller('MyCtrl1', ['$scope','$stateParams', function($scope, $stateParams) {
var param1 = $stateParams.param1;
var param2 = $stateParams.param2; //change here from param1 to param2
...
}]);
Related
In an Angular 1.6 application that has multiple states and utilizes UI-router, I would like to add parameters to the end of all state urls.
For example
$stateProvider
.state('something')
url: '/'
.state('something')
url: '/something'
.state('something')
url: '/somethingElse
I would like to add three values at the end of all urls so the urls would look like: www.website.com/something/param1¶m2¶m3
You can define your parameters in routing using : before the parameter name
$stateProvider
.state('something/:param1/:param2/:param3')
url: '/'
.state('something/:param1/:param2/:param3')
url: '/something'
.state('something/:param1/:param2/:param3')
url: '/somethingElse
You can assign values to these parameters in URL as below: URL: http://server.com/index.html#/something/1/2/3
And you can retrieve them inside your controller using $routeParams as below
app.controller("somethingController", function ($scope, $routeParams) {
$scope.param1 = $routeParams.param1;
$scope.param2 = $routeParams.param2;
$scope.param3 = $routeParams.param3;
});
You can also pass parameters directly without changing the routing, for example,
URL: http://server.com/index.html#/something?param1=AA¶m2=BB¶m3=CC&
And retrieve them inside controller using $route.current.params
app.controller("somethingController", function ($scope, $routeParams) {
$scope.param1 = $route.current.params.param1;
$scope.param2 = $route.current.params.param2;
$scope.param3 = $route.current.params.param3;
});
I am trying to redirect to another page in my ionic app but stuck at this point. I see in console that my current path is what I want but I am not really on that page here is may code
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(0);
$stateProvider.state('homepage', {
url: '/homepage',
templateUrl: 'templates/homepage.html',
controller: 'MapController'
})
.state('hotel', {
url: '/hotel',
templateUrl: 'templates/hotel.html',
controller: 'HotelController'
})
})
Controller
.controller('MapController', function($scope, $location, customservice) {
$scope.fa = function(a) {
customservice.hotel_name = {hotelName: a.innerHTML}
console.log($location.path()) // prints /homepage
$location.path('/hotel');
console.log($location.path()) // print /hotel but still on same page
}
});
The $location service allows you to change only the URL; some time it dones not reload/redirect page. Can you try $window.location.href or $state.go(), instead of $location.path(). May be it will work.
I dont know how and why but wrapping it under $timeout did the job for me
It's very confusing thing. $location only changes url without reload.
You should write like this if you want to redirect.
$window.location.href = "http://www.google.com"
Please refer Angulardoc
When should I use $location?
Any time your application needs to react to a change in the current URL or if you want to change the current URL in the browser.
What does it not do?
It does not cause a full page reload when the browser URL is changed. To reload the page after changing the URL, use the lower-level API, $window.location.href
Try below:
angular.module('windowExample', [])
.controller('ExampleController', ['$scope', '$window', function($scope, $window) {
$window.location.href = '/hotel.html';
};
}]);
The problem I'm having here is not being able to find the right question to ask.
I'd like to use a single partial and populate it with different data based on a url. The url would look something like this
localhost:8080/#/users/USER_ID
Where users directs to a user profile partial, and corresponding controller, and USER_ID would be sent in to an HTTP request to retrieve user data that would then populate the user profile partial.
Any direction in solving this is greatly appreciated.
If you are using ui-router which I highly recommend:
$stateProvider
.state('users', {
url:'/users/:userId',
templateUrl: 'user.html',
controller:'UserCtrl'
})
You can then access the userId in your controller:
App.controller('UserCtrl', ['$scope', '$stateParams', '$state', 'User', function($scope, $stateParams, $state, User) {
'use strict';
/* controller code */
var req = User.$find($stateParams.userId);
}]);
I am also using angular-rest-mod to make HTTP calls to an api when I do User.$find(id)
I found a solution that was a lot more straight forward than I had anticipated
app.js
$routeProvider.
when('/user/:id', {
templateUrl: 'user.html',
controller: 'userController'
});
Then in the implementation of userController, $routeParams can be used to retrieve the value of id from the url.
Okay so I would probably go like this. First I would recommend Ui-Router instead of ngRoute this allows you to create your states for example
$stateProvider
// setup an abstract state for the tabs directive
.state('A', {
params: [A,B,C,D,E],
url: "/A",
templateUrl: "templates/YourView.html",
controller: "YourController"
})
.state('B', {
params: [F,G,H,I,J],
url: "/B",
templateUrl: "templates/YourView.html",
controller: "YourController"
})
Basically this says when your Url is "/A" the "YourController" is used and the YourView.html is used so If I understood correct you have 1 view where you want to show different data depending on the Url.By Injecting 'ui.router'into your module and $state into your Controller you can access $state.current.params
Example Controller
.controller('ExampleController', ['$rootScope', '$scope', '$state', function ($rootScope, $scope, $state){
//Here you get your params
//This will return you either [A,B,C,D,E] or [F,G,H,I,J] depending if Url is /A or /B
$scope.showList = $state.current.params;
//Another Possibility with this is to listen for a StateChange
$scope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
//Here you can access all Params from the state you just left to the state you are going
});
}]);
Now you can just show this in the YourView.html like this
<div ng-repeat="item in showList">
<p>{{item}}</p>
</div>
So If your at /A the list shows A,B,C,D,E and if you are on /B it shows F,G,H,I,J
I hope this was helpful
I want send parameter to templateUrl i want append some numbers after /folder/stockInventoryController.do?param=loadGroupStyles_Controller&fabId=(here I need to add)
myApp.config(function($routeProvider){
//setup Router for widgets page
$routeProvider
.when('/relatedStyle',{
controller:'groupStylesLoad',
templateUrl:'/folder/stockInventoryController.do?param=loadGroupStyles_Controller&fabId='+needParameterHere
})
});
templateUrl can be used as a function if you need to work some magic on the url. It accepts 1 parameter which takes in the current url.
Looking at your example, there aren't any parameters in /relatedStyle; but if there were you'd access and modify them like so:
.when('/relatedStyle/:arbitraryParam',{
controller:'groupStylesLoad',
templateUrl: function(url) {
var modifiedParam = url.arbitraryParam++;
return '/folder/stockInventoryController.do?param=loadGroupStyles_Controller&fabId=' + modifiedParam;
}
})
http://stackoverflow.com/questions/11534710/angularjs-how-to-use-routeparams-in-generating-the-templateurl
see above link ,it may be helpful for u
Here are two ways. One is routing
myApp.config(function($routeProvider){
//setup Router for widgets page
$routeProvider
.when('/relatedStyle/:fabid',{
controller:'groupStylesLoad',
templateUrl:'template/template.html'
})
});
myApp.controller("groupStylesLoad", ['$scope', '$routeParams',
function($scope, $routeParams)
{var fabId = $routeParams.fabid;}
]);
However, if you need to use the query sting.
myApp.controller("groupStylesLoad", ['$scope', '$location',
function($scope, $location)
{var fabId = $location.search().fabid;
// $location.search() returns object like {key1: value1, key2: value2, ...}
]);
https://docs.angularjs.org/guide/$location
Hope this helps.
Using Angular I have a dozen or so routes setup similar to the following example code.
Is there a way to override which template and controller is loaded based on some other criteria while keeping the URL in tact? My goal is to display a login page when... lets say $scope.isLoggedIn = false. I don't want to change the URL to /login.
SomeApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/place', {
templateUrl: 'routes/place.html',
controller: 'PlaceCtrl'
})
.when('/test', {
templateUrl: 'routes/test.html',
controller: 'TestCtrl'
});
}]);
ngRoute is a very simple library that can basically only maps urls to controller/views. If you want more flexibility, try ui-router which has the ability to route based on state.
This isn't really doable with ngRoute, but with ui-router you can dynamically provide different templates based on just about anything you want.
$stateProvider.state('root',
url: '/'
controller: 'HomePageController'
templateProvider: [
'$rootScope'
'$templateCache'
'$http'
($rootScope, $templateCache, $http) ->
templateId = if $rootScope.isLoggedIn then "home-page-logged-in" else "home-page-not-logged-in"
templateId = "/templates/#{templateId}.html"
return $http.get(templateId, cache: $templateCache)
]
)
The catch is, as far as I know, you can't change the controller, only the template. Which kinda stinks.