I am a newbie to AngularJS and I'm trying to read query string key value pairs using $location.search. The following code works on Chrome, IE10 and Firefox:
var app = angular.module('myApp', []);
app.config(function($locationProvider){
$locationProvider.html5Mode(true).hashPrefix('!');
});
app.controller('ParamController', function($scope, $location, $window) {
console.log($location.search()['term']);
});
On IE8/9 the page is immediately re-displayed with '#!' in url eg. from /demo/angularJS/index.html to /#!/demo/angularJS/index.html
Is there a way in AngularJS to read and parse querystring parms in IE8/9?
Related
This question may have been asked before. But here goes:
My website is http://thecheeknee.com.
The site basic structure is as follows:
`index.html
js|-app.js
js|ctrls|pageLoad.js -common controller for all pages
js|srvc|Datamap.js
templates/-about.html, etc`
The HTML basic view is as shown below:
<section ui-view></section>
The UI router angular code is as follows:
angular
.module('app',[
'ui.router',
'ngStorage'
])
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url:'/',
templateUrl:'templates/home.html',
controller:'pageLoad'
})
The controller is very basic.
angular
.module('app')
.controller('pageLoad',[ '$scope', 'Datamap', function($scope, Datamap){
$scope.title = "thecheeknee";
//$scope.$storage = $localStorage;
//$scope.$storage.counter = $scope.$storage.counter+1 || 0;
Datamap.getData().then(function(response){
$scope.datamap = response.data;
});
The Data map service is as follows:
angular.module('app')
.factory('Datamap', function($http) {
//debugger;
return{
getData: function(){
return $http.get('data/data.json',{ cache: true});
}
}
});
The site works perfectly on the desktop across multiple browsers. But Chrome App on Android seems to load a blank page.
(I had designed the site to be responsive and had tested the UI thoroughly using Chrome's browser tool)
On observing, I noticed that the browser adds a #!/ and loads the view into the page. On the mobile browser however, it seems to be stopping at the site name itself (#!/ is not being added). So I assume the UI router is unable to load the route into the page.
I am relatively new to Angular, so is there anything minor I am missing out here?
Full source code at: https://github.com/thecheeknee/sitebase.git
I don't understand why I can't get this to work.
I'll share the relevant code, let me know if you need to see more stuff.
Index.html
<div class="col-md-3">Liberals</div>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.
when("/liberals", {
templateUrl: "partials/liberals.html"
, controller: "LiberalsController"
});
});
app.controller('LiberalsController', function ($scope, $http) {
var url = "workingURL"; /// changed function to a simple string message to test
$scope.message = "Hello Liberals";
});
(partial view) liberals.html
<h1>Hello</h1>
{{message}}
PS: I'm not working on a political hate website for or against liberals!
As of AngularJS 1.6, the default value of the hashPrefix has been changed to !.
There's two ways to get your routing to work with AngularJS 1.6+:
Add the hashprefix (!) to your href's:
Liberals
Change (remove) the hashPrefix value using $locationProvider:
$locationProvider.hashPrefix('');
I've created a working plunkr in which I used the second approach:
https://plnkr.co/edit/oTB6OMNNe8kF5Drl75Wn?p=preview
The commit regarding this breaking change can be found here
Just started using firebase v3 (released roughly two weeks ago) with angularfire v2 (which according to this post fully supports firebase v3). But I am struggling to simply retrieve some data into an angular view.
Here is the controller that simply returns user array and bind it to the view. It breaks on the line using $firebaseArray and says: TypeError: Object expected
I am using AngularJs 1.5.6. Just to show the versions of firebase and angularfire I am using:
<script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
(function() {
var app = angular.module("FirebaseTest");
var mainCtrl = function($scope, $firebaseArray) {
var root = firebase.database().ref();
var users = root.child('users');
console.log(users); // this works fine so no problem with firebase connection
//NOTE: this doesn't work and throws exception
$scope.users = $firebaseArray(users);
}
app.controller("mainCtrl", ["$scope", mainCtrl]);
})();
try this
app.controller("mainCtrl", ["$scope", '$firebaseArray', mainCtrl]);
This should work
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.
I am working on a sample application using angular js. I am a newbie , so please bear with me
I have the following code in my controllers.js :
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', '$http', function ($scope, $http) {
$http.get('js/data.json').success(function (data) {
$scope.artists = data;
$scope.artistOrder = 'name';
});
}]);
Here , i am using http.get to load json data into application from a text file as shown above.
I am using IE 9 and was allowed to use only that , not any browser.
When i execute the above code, i am encountering an error as stated below :
CSS3117: #font-face failed cross-origin request. Resource access is restricted
I am not sure what is a cross-origin request . I am wondering why a simple http get requested is getting failed.
Here are my queries :
What is a cross origin request? An example would be great
How this holds w.r.t my example above ?
What is the remedy/solution/alternative for this ?
Try defining a var outside the controller:
this.artists = {};
And then, inside the controller:
this.artists = data;
So the page can access that var. Otherside you can only access it inside the controller.