I'm trying to get ui-router to work and I'm getting pretty close. Well I got it working, but I can't combine it with my controller, then I'm getting errors.
I'm getting this error in the console
Error: [ng:areq] Argument 'searchCtrl' is not a function, got undefined
searchCtrl.js
var myApp = angular.module('myApp')
.controller('searchCtrl', [
'$scope', '$http', function($scope, $http) {
$scope.search = function() {
var base = 'http://api.themoviedb.org/3';
var service = '/search/movie';
var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
var search = $scope.searchquery
var callback = 'JSON_CALLBACK'; // provided by angular.js
var url = base + service + '?api_key=' + apiKey + search + '&callback=' + callback;
$http.jsonp(url,{ cache: true}).
success(function (data, status, headers, config) {
if (status == 200) {
$scope.movieList = data.results;
console.log($scope.movieList)
} else {
console.error('Error happened while getting the movie list.')
}
}).
error(function (data, status, headers, config) {
console.error('Error happened while getting the movie list.')
});
}
}
]);
My searchModule.js
var app = angular.module('movieseat', ['ui.router']).config([
'$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/state1');
return $stateProvider.state('state1', {
url: '/state1',
templateUrl: 'assets/angular-app/templates/state1.html'
});
}
]);
And my app.js.coffee
#app = angular.module('movieseat', []);
#myApp = angular.module('myApp',[]);
# for compatibility with Rails CSRF protection
#app.config([
'$httpProvider', ($httpProvider)->
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
])
#app.run(->
console.log 'angular app running'
)
This might be the same question and I've tried adding another module to my app.js.coffee but it's not working.
Does anyone have a tip?
Change first two module declaration line of your app.js.coffee like below.
#myApp = angular.module('myApp',[]);
#app = angular.module('movieseat', ['myApp','ui.router']);
and then in searchModule.js
angular.module('movieseat').config([
'$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/state1');
return $stateProvider.state('state1', {
url: '/state1',
templateUrl: 'assets/angular-app/templates/state1.html'
});
}
]);
REASON : Here you are basically overriding the module you previously created insted you just need to use that already declared module.
If you are doing with single module then
#app = angular.module('movieseat', ['myApp','ui.router']);
# for compatibility with Rails CSRF protection
#app.config([
'$httpProvider', ($httpProvider)->
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
])
#app.run(->
console.log 'angular app running'
)
and
angular.module('movieseat').config([
'$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/state1');
return $stateProvider.state('state1', {
url: '/state1',
templateUrl: 'assets/angular-app/templates/state1.html'
});
}
]);
and your controller looks like
angular.module('movieseat')
.controller('searchCtrl', [
'$scope', '$http', function($scope, $http) {
$scope.search = function() {
var base = 'http://api.themoviedb.org/3';
var service = '/search/movie';
var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
var search = $scope.searchquery
var callback = 'JSON_CALLBACK'; // provided by angular.js
var url = base + service + '?api_key=' + apiKey + search + '&callback=' + callback;
$http.jsonp(url,{ cache: true}).
success(function (data, status, headers, config) {
if (status == 200) {
$scope.movieList = data.results;
console.log($scope.movieList)
} else {
console.error('Error happened while getting the movie list.')
}
}).
error(function (data, status, headers, config) {
console.error('Error happened while getting the movie list.')
});
}
}
]);
Related
I'm new to AngularJS and I'm trying to run this AngularJS that should modify the URL without reloading the page but the console says Uncaught Error: [$injector:modulerr]
Where is the problem?
var app = angular.module("SearchAPP", ['ng-route']);
app.run(['$route', '$rootScope', '$location',
function($route, $rootScope, $location) {
var original = $location.path;
$location.path = function(path, reload) {
if (reload === false) {
var lastRoute = $route.current;
var un = $rootScope.$on('$locationChangeSuccess', function() {
$route.current = lastRoute;
un();
});
}
return original.apply($location, [path]);
};
}
]);
app.controller('GetController', ['$http', '$scope', '$location',
function($http, $scope, $rootScope, $location) {
$scope.click = function() {
var response = $http({
url: 'http://localhost:4567/search',
method: "GET",
params: {
keyword: $scope.searchKeyword
}
});
response.success(function(data, status, headers, config) {
$scope.searchResults1 = data;
// $http.defaults.useXDomain = true;
$location.path('/' + $scope.searchKeyword, false);
});
response.error(function(data, status, headers, config) {
alert("Error.");
});
};
}
]);
Attach angualar-route.js and use ngRoute instead of ng-route
var app = angular.module("SearchAPP", ['ngRoute']);
I am trying make an ajax request to php from angular js. But I am not getting the data I have sent by php file.
an error Unknown function "getJalse" exist in factory
My source:
File app.js:
(function () {
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'contentsCtrl',
templateUrl: 'views/contents.php'
})
.when('/jalse/:jalseId', {
controller: 'recordsCtrl',
templateUrl: 'views/jalse.php'
})
.otherwise({redirectTo: '/'});
});
}());
File jalseFactory.js:
(function () {
'use strict';
var jasleFactory = function ($http, $q) {
var factory = {};
factory.getJalses = function () {
var deferred = $q.defer();
$http({method: 'GET', url: 'includes/records.php'}).
success(function (data, status, headers, config) {
deferred.resolve(data);
}).
error(function (data, status, headers, config) {
deferred.reject(data);
});
return deferred.promise;
};
return factory;
};
jasleFactory.$inject = ['$http', '$q'];
angular.module('myApp').factory('jasleFactory', jasleFactory);
}());
File recordsCtrl.js:
(function () {
'use strict';
var recordsCtrl = function ($scope, $routeParams , jasleFactory) {
var jalseId = $routeParams.jalseId;
$scope.records = jasleFactory.getJalse();
$scope.jalse = null;
function init() {
for (var i = 0, len = $scope.records.length; i < len; i++) {
if ($scope.records[i].contentID == parseInt(jalseId)) {
$scope.jalse = $scope.records[i];
break;
}
}
}
init();
};
recordsCtrl.$inject = ['$scope' , '$routeParams' , 'jasleFactory'];
angular.module('myApp').controller('recordsCtrl', recordsCtrl);
}());
Because your factory has getJalses and you are calling getJalse.
Change
factory.getJalses = function ()
To
factory.getJalse = function ()
I'm new on angular js and i'm trying to get parameters from the url i've read some documentation about routeparams but i'm getting it empty.
here is my code
var study = angular.module('study', ['ngRoute'], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
study.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('edit/:id', {
controller: 'EditController'
});
}]).controller('EditController',
function($scope, $http, $compile, $rootScope, $routeParams, $route ) {
$scope.item = null;
console.log($routeParams);
console.log($rootScope);
var id = $routeParams.$id;
$scope.onLoad = $http({
method: 'get',
url: 'item',
data: {id:id}
}).success(function(data, status, headers, config) {
$scope.item = data;
}).error(function(data, status, headers, config) {
alert(status);
});
});
I'm sure this problem has a simple answer, but, for once, I'm stumped. I want to have a URL like http://www.website.com/item/1234 display information about an item with id '1234'. I have an Angular controller set up to query for it and render its data. This works, provided the id is valid. However, I can't figure out how to pass the id, in the first place. I have tried lots of routing examples, but none of them work when I try to implement them, so I'm missing something.
Here is the server route in Express/Node:
router.get('/item/:id', function(req, res, next) {
res.render('item');
});
Here is the Angular route:
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/item/:id', {
controller: 'ShowItem'
});
$locationProvider.html5Mode(true);
}]);
The controller is trying to access 'id' here:
app.controller('ShowItem', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {
console.log($routeParams.id);
var itemID = $routeParams.id;
$http({
method: 'GET',
url: '/queries/get_item',
params: {
itemID: itemID
}
}).success(function(data, status, headers, config) {
if (data) {
$scope.itemValue = data;
$scope.type = $scope.itemValue['SaleType'];
$scope.setAllBidHistory(false);
if (Date.getStamp() >= $scope.itemValue['ExpirationTimeStamp']) {
$scope.expired = true;
} else {
$scope.expired = false;
}
}
}).error(function(data, status, headers, config) {
alert('There was an error fetching item: '+status);
});
...
}]);
The page renders, but $routeParams.id is undefined.
Am new to angular js....i wrote simple example using http post call..
but it throws an error like
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.3/$injector/modulerr?p0=MyApp&p1=Error%3A%2…tps%3A%2F%2Ftestvendor.planotest.com%2FScripts%2Fangular.min.js%3A17%3A315)
My js code is given below..
$(function () {
var ang = angular.module('MyApp', []);
MyApp.controller('tagReports', function ($scope) {
$scope.CustomerTagID = _TagID;
$scope.listOfTags = [];
$scope.tagList = [];
$scope.LoadCustomerDetails = function () {
$http({ method: " post", url: "/LeadManagement/Customer/GetCustomerDetailsListByTag/" + viewModel.CustomerTagID(), cache: $templateCache }).
success(function (data) {
}).
error(function (data, status) {
});
};
});
});
thank you
I guess you want to use IIFE for angualarjs with jQuery. So I have fixed the code as below
(function ($) {
var MyApp = angular.module('MyApp', []);
MyApp.controller('tagReports', function ($scope, $http, $templateCache) {
$scope.CustomerTagID = _TagID;
$scope.listOfTags = [];
$scope.tagList = [];
$scope.LoadCustomerDetails = function () {
$http({ method: " post", url: "/LeadManagement/Customer/GetCustomerDetailsListByTag/" + viewModel.CustomerTagID(), cache: $templateCache }).
success(function (data) {
}).
error(function (data, status) {
});
};
});
})(jQuery);
Hope it helps !
You need to inject $http as a dependency into your controller, like that:
MyApp.controller('tagReports', function ($scope, $http) {});