I am using AngularJS for building a simple app with a map. As the main ctrl had too many logic I build a second controller for the navbar. Until here everything worked fine. Now I outsourced the map.on('zoomend' ... ) function when refactoring the main controller.
The problem now is, that when the navbar controller file is minified (through grunt build uglify) I get the following error:
Cannot read on of undefined
That means, map is undefined even though it is declared at the top of the file AND I do not have the problem on localhost (grunt serve).
Navbar Ctrl:
'use strict';
angular.module('angularMapApp').controller('navbarController', navbarController);
navbarController.$inject = ['$scope', '$mdSidenav', 'helper', 'RespondService', 'shipTypes'];
function navbarController($scope, $mdSidenav, helper, RespondService, shipTypes) {
var map = RespondService.getMap();
map.on('zoomend', function() {
timestamp = RespondService.getTimestamp();
selectedShipTypes = RespondService.getSelectedShipTypes();
selectedShipState = RespondService.getSelectedShipState();
showGrid = RespondService.getShowGrid();
helper.loadAndShowShipMarkers(timestamp, selectedShipTypes, selectedShipState, showGrid, map).then(function(results) {
$scope.numberOfShips = results;
RespondService.setNumberOfShips($scope.numberOfShips);
});
});
So this is a short version of my controller. The grunt file is still the same as created with yeoman. I too logged the map value at the top of the file, and there it has a value. However using 'map.on' might not work.
Maybe anyone can help me with that.
Your $inject seems to be correct, so minify should work fine for angular injection. It looks like var map is loading data from RespondService.getMap(). What do you expect to get from that function? You might want to put a break point and see if what you expecting is being returned.
I have an site I have put together based on a tutorial I found here
http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/
My app.js contains
angular.module('kolvir', ['ngRoute'])
.controller("kolvirController", function($http){
var vm = this;
vm.searchInput = '';
$http.jsonp (
'https://sfcons.azure-mobile.net/api/getcons/?
callback=JSON_CALLBACK')
.success(function (data){
vm.cons = data;
})
.error(function (data) {
console.log('ERROR');
});
});
I added a controller (gallery-controller.js )and routing appears to fail. After ripping things out I determined that adding the module call causes the failure, with:
angular.module('kolvir', ['ngRoute']);
Without it works just fine. I have a second site based on twitter bootstrap that uses the same pattern and it works just fine.
I am still new enough to angular I am not even certain what I should be searching for to find and answer, but so far I have not turned up anything similar to this.
EDIT The code is all correct, the problem was because of including 'ngTouch', see my own answer below.
I am probably making some stupid mistake here, but for the life of me I cannot find it.
I have this piece of markup, which is correctly wired up with a controller:
<input type="text" ng-change="doStuff()" ng-model="stuff"/>
<button ng-click="doStuff()">doStuff</button>
The controller code:
console.log('Hi from controller');
$scope.stuff = "something";
$scope.doStuff = function() {
alert('doing stuff');
}
The problem is nothing happens when I click the button. If I change the input field, I get the alert, so ng-change works, but ng-click does not.
Let me know if this is not enough information, but I would not know what else to provide, and the general setup seems to be working fine...
The rest of the HTML does not contain any Angular directives, and it is loaded like this in myModule.config:
$stateProvider
.state('stuff', {
templateUrl: 'pages/stuff.html',
url: '/stuff',
controller: 'StuffCtrl'
})
and the controller is defined like this:
angular.module('myModule')
.controller('StuffCtrl', function ($scope) {
// above code
});
It turned out that the problem was with another dependency 'ngTouch'. I did not use it, but still it was loaded. My module did not even depend on it. (I am using that admin site template from here: http://startangular.com/product/sb-admin-angular-theme/). After removing loading of the ngTouch it worked as expected. I will file this as a bug to both projects as well... Thanks for your help!
I'd like to read the values of URL query parameters using AngularJS. I'm accessing the HTML with the following URL:
http://127.0.0.1:8080/test.html?target=bob
As expected, location.search is "?target=bob".
For accessing the value of target, I've found various examples listed on the web, but none of them work in AngularJS 1.0.0rc10. In particular, the following are all undefined:
$location.search.target
$location.search['target']
$location.search()['target']
Anyone know what will work? (I'm using $location as a parameter to my controller)
Update:
I've posted a solution below, but I'm not entirely satisfied with it.
The documentation at Developer Guide: Angular Services: Using $location states the following about $location:
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.
For my scenario, my page will be opened from an external webpage with a query parameter, so I'm not "reacting to a change in the current URL" per se. So maybe $location isn't the right tool for the job (for the ugly details, see my answer below). I've therefore changed the title of this question from "How to read query parameters in AngularJS using $location?" to "What's the most concise way to read query parameters in AngularJS?". Obviously I could just use javascript and regular expression to parse location.search, but going that low-level for something so basic really offends my programmer sensibilities.
So: is there a better way to use $location than I do in my answer, or is there a concise alternate?
You can inject $routeParams (requires ngRoute) into your controller. Here's an example from the docs:
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}
EDIT: You can also get and set query parameters with the $location service (available in ng), particularly its search method: $location.search().
$routeParams are less useful after the controller's initial load; $location.search() can be called anytime.
Good that you've managed to get it working with the html5 mode but it is also possible to make it work in the hashbang mode.
You could simply use:
$location.search().target
to get access to the 'target' search param.
For the reference, here is the working jsFiddle: http://web.archive.org/web/20130317065234/http://jsfiddle.net/PHnLb/7/
var myApp = angular.module('myApp', []);
function MyCtrl($scope, $location) {
$scope.location = $location;
$scope.$watch('location.search()', function() {
$scope.target = ($location.search()).target;
}, true);
$scope.changeTarget = function(name) {
$location.search('target', name);
}
}
<div ng-controller="MyCtrl">
Bob
Paul
<hr/>
URL 'target' param getter: {{target}}<br>
Full url: {{location.absUrl()}}
<hr/>
<button ng-click="changeTarget('Pawel')">target=Pawel</button>
</div>
To give a partial answer my own question, here is a working sample for HTML5 browsers:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<script>
angular.module('myApp', [], function($locationProvider) {
$locationProvider.html5Mode(true);
});
function QueryCntl($scope, $location) {
$scope.target = $location.search()['target'];
}
</script>
</head>
<body ng-controller="QueryCntl">
Target: {{target}}<br/>
</body>
</html>
The key was to call $locationProvider.html5Mode(true); as done above. It now works when opening http://127.0.0.1:8080/test.html?target=bob. I'm not happy about the fact that it won't work in older browsers, but I might use this approach anyway.
An alternative that would work with older browsers would be to drop the html5mode(true) call and use the following address with hash+slash instead:
http://127.0.0.1:8080/test.html#/?target=bob
The relevant documentation is at Developer Guide: Angular Services: Using $location (strange that my google search didn't find this...).
It can be done by two ways:
Using $routeParams
Best and recommended solution is to use $routeParams into your controller.
It Requires the ngRoute module to be installed.
function MyController($scope, $routeParams) {
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
// $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
var search = $routeParams.search;
}
Using $location.search().
There is a caveat here. It will work only with HTML5 mode. By default, it does not work for the URL which does not have hash(#) in it http://localhost/test?param1=abc¶m2=def
You can make it work by adding #/ in the URL. http://localhost/test#/?param1=abc¶m2=def
$location.search() to return an object like:
{
param1: 'abc',
param2: 'def'
}
$location.search() will work only with HTML5 mode turned on and only on supporting browser.
This will work always:
$window.location.search
Just to summerize .
If your app is being loaded from external links then angular wont detect this as a URL change so $loaction.search() would give you an empty object . To solve this you need to set following in your app config(app.js)
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider)
{
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
Just a precision to Ellis Whitehead's answer. $locationProvider.html5Mode(true); won't work with new version of angularjs without specifying the base URL for the application with a <base href=""> tag or setting the parameter requireBase to false
From the doc :
If you configure $location to use html5Mode (history.pushState), you need to specify the base URL for the application with a tag or configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode():
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
you could also use $location.$$search.yourparameter
I found that for an SPA HTML5Mode causes lots of 404 error problems, and it is not necessary to make $location.search work in this case. In my case I want to capture a URL query string parameter when a user comes to my site, regardless of which "page" they initially link to, AND be able to send them to that page once they log in. So I just capture all that stuff in app.run
$rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
if (fromState.name === "") {
e.preventDefault();
$rootScope.initialPage = toState.name;
$rootScope.initialParams = toParams;
return;
}
if ($location.search().hasOwnProperty('role')) {
$rootScope.roleParameter = $location.search()['role'];
}
...
}
then later after login I can say
$state.go($rootScope.initialPage, $rootScope.initialParams)
It's a bit late, but I think your problem was your URL. If instead of
http://127.0.0.1:8080/test.html?target=bob
you had
http://127.0.0.1:8080/test.html#/?target=bob
I'm pretty sure it would have worked. Angular is really picky about its #/
I have an annoying issue I'm not sure there's a solution to;
We run html5mode in production, but not in development. The reason is that this is difficult to setup on spring-boot's embedded tomcat. We are coding our html anchors like this:
Route
which of course breaks when not in html5mode where angular will expect the href to be "#/route" instead - which is a real pain. The only way we've found to avoid this problem, is to code links like this:
Route
and have a global function in i.e. $rootScope:
$scope.goto = function (route) {
$location.path(route);
}
But this just seems wrong. I had hoped that using ng-href insted of href on the anchor would sort this out (perhaps detecting if we are in html5mode or not, and auto-add the hash to the url so that we do not need to refactor the entire app if we switch modes), but it doesn't.
Is there no way of using anchors WITHOUT explicitly stating hash urls?
Ok, I still believe this to be a design flaw in angular, and that this particular fix should exist within angular itself.
This directive is matched directly on the 'href' attribute. I've not done any testing on how this affects performance, but it does perform rewrites on internal url's only.
angular.module(_DIRECTIVES_).directive('href', ['$location', function ($location) {
'use strict';
return {
restrict: 'A',
scope: {
href: '#'
},
link: function (scope, element, attrs) {
// Check if we need to rewrite the href
var currentBase = $location.$$protocol + '://' + $location.$$host;
var newBase = element[0].href;
if (element[0].nodeName == 'A' && newBase.indexOf(currentBase) == 0 && !$location.$$html5) {
// Perform the href AFTER angular has done it's thing. Otherwise angular will rewrite back to the original
scope.$watch('href', function () {
// This function may be run several times. Make sure the rewrite only happens once.
if (scope.href.indexOf('#!') !== 0) {
scope.href = '#!' + scope.href;
element.attr('href', scope.href);
}
});
}
}
};
}]);
I hope this will help anybody else in the same predicament as me. Also hope that angular will fix this in the future.