I'm new to Angular, and while following along to a tutorial I made a slight change out of habit when writing the module states:
.state('sports.medals', {
url: '/:sportName',
templateUrl: 'sports/sports-medals.html',
resolve: {
sportService: function($http, $stateParams){
return $http.get('/sports/${ $stateParams.sportName }');
}
},
This compiles perfectly fine within the rest of the project, no errors. However, when the call is made to this function, it reads the get contents as one whole string instead of parsing the contents as it should.
The correct way to call this is apparently:
.state('sports.medals', {
url: '/:sportName',
templateUrl: 'sports/sports-medals.html',
resolve: {
sportService: function($http, $stateParams){
return $http.get(`/sports/${ $stateParams.sportName }`);
}
},
using the ` apostrophe/backtick instead of the single quote '
As a programmer I've almost always exclusively used the single quote when working with javascript and/or double-quotes within parameters, so this surprised me and wasn't immediately apparent. Is there a reason for this behavior that is documented somewhere? Should I get in the habit of using backticks over single quotes? I would like to avoid other such surprises.
解决方案
The backticks are necessary for the string interpolation to work. This is an ES6 feature called template interpolation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals.
Sometimes it will be available to you, but it is still far from widespread in terms of browser support https://caniuse.com/#feat=template-literals. Get familiar with it and use it when you can!