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.
Related
I'm totally new to the Restangular and trying to learn it by implementing a simple application by calling a webapi. I'm able to call this service with simple $http service and getting the correct response.
The code I have written is as below.
I have googled the issue to find the solution but no like.
var myApp = angular.module('myApp', ['restangular']);
myApp.config(function (RestangularProvider) {
var newBaseUrl = "";
newBaseUrl = 'http://localhost:37103/api/'
RestangularProvider.setBaseUrl(newBaseUrl);
})
myApp.controller("myCtrl", function ($scope, Restangular) {
$scope.data = "Default Value"
$scope.data = Restangular.one("employee").get();
})
The error which I'm getting on chromes console is as below
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…0Bc%20(http%3A%2F%2Flocalhost%3A37103%2FSource%2Fangular.min.js%3A21%3A179)
The above error is clickable and it says may be the file is mot included. But I have included the restangular.js file and I could see it getting loaded in the network tab.
Thanks!
For this issue I found something was wrong in the restangular.js file which I downloaded. I replaced it with the cdn tag cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.js and it worked. Its very strange.
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);
}]);
Stuck in a situation, my app is configured in a way, that I have an app controller, which is using ng-route to route between different views and partials, Now from the login controller, I am making a request to get some data, now I want that data to be accessed globally in the application. Now when I create a service, I am injecting it in the app controller module, but I am getting an error service is not defined,
My app.js:
var myApp = angular.module('app', ['loginMod', 'dashboardMod', 'newRequestMod', 'ngAnimate', 'ui.bootstrap', 'ngRoute', 'userDetailService']);
myApp .config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: 'resources/pages/login.html',
controller:'loginController'
})
...
Now in my logincontroller i am using the service :
userDetailShareService.sendData(loginModel);
console.log("Checking the service if it works " + userDetailShareService.getData);
userDetailShareService.js:
var app = angular.module('userDetailService',[]);
app.factory('userDetailShareService', function($timeout,$rootScope) {
var service = {};
var dataArray = [];
service.data = [];
service.sendData = function(data){
//dataArray.push(data);
dataArray=this.data;
};
service.getData = function(){
return dataArray;
};
return service;
});
No I am not sure what is throwing that error, the app.js is the first page that is hit, and the data mentioned in login controller is some response data, that I am getting in login controller and then I want to share across my entire application, every controller the data that I get, I do not want to use $rootScope as it will burden the same.
Could anybody please reply, I am in a great need. Thanks in advance.
I am building a small mobile app blog with ionic and angular but when i try to make a resource query with manually injected params i have a bad url string. meaning angular is not passing my syntax correctly or i am making a bad mistake.
Here is my code
angular.module('starter.posts', ['ionic','ngResource'])
.factory('Post', function ($resource) {
return $resource('http://example.org/wp-json/:params');
});
app.controller('HomeCtrl', function ($scope, $state, $ionicSideMenuDelegate, Post) {
"use strict";
/* Items for left side menu. */
$scope.posts = Post.query({params: "posts?filter[posts_per_page]=3"})
})
and the error log show the bellow error
http://example.org/wp-json/posts%3Ffilter%5Bposts_per_page%5D=3 Failed to load resource: the server responded with a status of 404 (Not Found)
which simply means that it did not translate the url correctly. How can i fix this so the url can be in the bellow format
http://example.org/wp-json/posts?filter[posts_per_page]=3
I am new to angular trying to simulate an entire wordpress blog with angular.
I usually do something like this, passing a js object in:
usersFactory.get = function (request) {
var operation= $http({url: urlBase, method:'get', params:request });
perhaps you should add posts to your resource url
$resource('http://example.org/wp-json/posts:params');
and pass an object like this
var filter={};
filer.posts_per_page=3
in as your params
I was able to figure the right syntax by using the code below,
Post.query({'filter[posts_per_page]': 20, 'page' : $scope.pageNum}, function (data, responseHeaders)
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.