I am trying to pass an ID via URL parameter to a page named "more.html". So the URL Parameter will like the following.
http://example.com/more.html?id=200
I used $location service in my controller on the more.html page to get the Parameter ID from the URL. Here is the controller code that I used.
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($location, $scope, $http) {
var sno = $location.search().id;
alert(sno);
});
The result I got from the above code was "Undefined".
Like what #daan.desmedt told. I changed the URL structure to the following and passed ID via it.
from:
http://example.com/more.html?id=200
to:
http://example.com/more.html#?id=200
I added # after more.html. It solved the problem.
Change you url structure as following (adding #)
from:
http://example.com/more.html?id=200
to:
http://example.com/more.html#?id=200
Adding the # more.html and before your url parameters will fix the problem.
Maybe for your next project you could make use of ui-router, which is a more structured way of using parameters.
https://github.com/angular-ui/ui-router
you are not defining the parameters you inject. It should look like below code:
var app = angular.module('myApp', []);
app.controller('customersCtrl', ['$location' , '$scope' , '$http' , function($location, $scope, $http) {
var sno = $location.search().id;
alert(sno);
}]);
Related
I'm trying to inject my factory into my controller and I'm getting this error from AngularJS:
Error: $injector:unpr Unknown Provider
I have looked through almost all of the questions on here and still cannot find a solution to my problem. I believe my controller and factory and declared correctly and the injection is correct but it looks like this isn't the case.
My factory code is as follows:
var app = angular.module('test', []);
app.factory('processingFactory', function () {
var factory = {};
factory.newTest = function() {
console.log("TEST");
}
return factory;
});
This is then injected into the controller which looks like this:
angular.module("test", ["angularModalService", "anguFixedHeaderTable",
'angular-loading-bar', "ngResource", "agGrid",
'ui.tree']).controller("dashboardController", [
"$scope",
"$timeout",
"$http",
"$window",
"$interval",
"$resource",
"ModalService",
"$filter",
'$q',
'processingFactory',
function($scope, $timeout, $http, $window, $interval, $resource,
ModalService, $filter, $q, processingFactory) {
//other code removed
$scope.newWorkorder = processingFactory.newWorkorder;
}
]);
This function is called through a button click on the web page. All of the files needed are in script tags on this html page. I am fairly new to angular so this could be a simple error or something I am not aware of.
Calling angular.module with an array as the second argument declares a module, which can only happen for any given module name. You are declaring the module twice (once in your controller code, and again in your factory code).
Try changing the first part of your factory code to:
var app = angular.module('test');
If you are doing the same thing elsewhere in the app you will need to remove the second argument there too, so that there is only one module declaration in the whole app.
if there are any dependencies for your module "test" why do not you have them declared in the first line itself like:
var app = angular.module("test", ["angularModalService", "anguFixedHeaderTable",
'angular-loading-bar', "ngResource", "agGrid",
'ui.tree']);
Then declare your controller like::
app.controler(...)
Things should work fine.
Following is my $routeProvider.when
.when("/products/:id",{
templateUrl:"app/views/product.html",
controller:"productController"
})
I want to access the value of :id in the product controller.
Based on which i will populate product details.
the url is /index.html#/products/3
You can use $routeParams.id in your controller.
You can access it in your controller with $routeParams
app.controller('productController', function ($scope, $routeParams) {
$scope.productId = $routeParams.id;
};
Read more here
$stateParams are for custom ui-router
Inject $routeParams to your controller factory function.
.controller('MainController', function($scope, $routeParams) {
$scope.id= $routeParams.id;
})
Use the $location service
To access any part of a path you need to use the $location service. It lets you use different parts of the url. For instance (From docs)
// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var url = $location.url();
// => "/some/path?foo=bar&baz=xoxo"
But what you want is this
// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var path = $location.path();
// => "/some/path"
This will return a string that is everything after the #
so then you can Use slice or some other JS function to get the part you need.
Best of luck
When user arrive to following URL
mainurl/exampleurl?token=23
i can extract the "exampleurl" using this $state.$current.name
How can i exctract the token=23 from this url
You can get parameters from $stateParams:
https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
var token = $stateParams.token
Hope it helps
Option-1: You can use $location service.
var t = $location.search().token
Option-2 If you are using ui-router, you may access the querystring parameters from $stateParams service too
var t = $stateParams.token
Cheers!
Try passing $location to your controller and use it like this.
.controller('YourController', ['$scope', '$stateParams', '$location' , function ($scope, $stateParams, $location) {
// Get token from query string
var token = $location.search().token;
}
You can get parameters with $location.search() into your controller. See below
// Given URL
// mainurl/exampleurl?token=23
var searchObject = $location.search();
// => {token: 23}
I'm trying to use cookies ( set and retrieve), I have this code copies from a site and changed it, but I wouldn't work and all my angular parts stop working.
This is a sample of angular website
can you tell me where the problem is?
var app = angular.module('test', ['ui.bootstrap'], ['ngCookies']);
app.controller('ExampleController', ['$cookieStore', function ($scope, $cookieStore) {
// Put cookie
$cookieStore.put('myFavorite', 'oatmeal');
// Get cookie
$scope.itemValue = $cookieStore.get('myFavorite');
// Removing a cookie
//$cookieStore.remove('myFavorite');
}]);
and usage is :
<span ng-controller="ExampleController">{{itemValue}}</span>
it gives me this error
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.5/$injector/modulerr?......
You're declaring your module wrong, the second parameter should be an array of dependencies, but you're passing each dependency as it's own separate array. It should be:
var app = angular.module('test', ['ui.bootstrap', 'ngCookies']);
You're using a "minification safe" array for your controller, but you're only including $cookieStore, not $scope, it should be:
app.controller('ExampleController', ['$scope', '$cookieStore', function ($scope, $cookieStore) {
...
}]);
Your syntax is incorrect, go through the docs to find the correct syntax for angular.
What is correct way of passing variables from web page when initializing $scope?
I currently know 2 possibilities:
ng-init, which looks awful and not recommended (?)
using AJAX request for resource, which requires additional request to server which I do not want.
Is there any other way?
If those variables are able to be injected through ng-init, I'm assuming you have them declared in Javascript.
So you should create a service (constant) to share these variables:
var variablesFromWebPage = ...;
app.constant('initValues', variablesFromWebPage);
With this service, you don't need to add them to the scope in the app start, you can use it from any controller you have, just by injecting it (function MyCtrl(initValues) {}).
Althouhg, if you do require it to be in the scope, then this is one of the main reasons what controllers are meant for, as per the docs:
Use controllers to:
Set up the initial state of a scope object.
Add behavior to the scope object.
Just add this cotroller to your root node:
app.controller('InitCtrl', function($rootScope, initValues) {
$rootScope.variable1 = initValue.someVariable;
$rootScope.variable2 = initValue.anotherVariable;
});
#Cunha: Tnx.
Here some more details how I did it:
In the Webpage:
<script type="text/javascript">
var variablesFromWebPage = {};
variablesFromWebPage.phoneNumber = '#Model.PhoneNumber';
</script>
In the angular application file, registering the service:
var module= angular.module('mymodule', ['ngRoute', 'ngAnimate']);
module.factory('variablesFromWebPage', function () {
return variablesFromWebPage
});
And then the controller:
module.controller('IndexController',
function ($scope, $location, $http, $interval, variablesFromWebPage) {
$scope.phoneNumber = variablesFromWebPage.phoneNumber;
}
);