So, i've searched for an answer to this problem and the solutions presented on the other questions won't work. To be honest i'm already on the testing every possibility.
I have a loopback app with angular and connected to mySQL database.
The explorer from loopback works and i can get and post data to the db.
The problem comes when i try to retrieve it with angularjs on a controller.
what i have is this:
app.js:
angular
.module('app', [
'ui.router',
'lbServices'
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state('weddings', {
url: '',
templateUrl: 'views/Weddings.html',
controller: 'WeddingsController',
})
.state('Calendar', {
url: '/Calendar',
templateUrl: 'views/Calendar.html',
controller: 'CalendarController',
});
$urlRouterProvider.otherwise('weddings');
}]);
Weddings.js:
angular.module('app').controller('WeddingsController', ['$scope', '$state',
'$http', 'weddings', function($scope, $state, $http, weddings) {
$scope.temp = [];
function getWeddings() {
weddings.find().$promise
.then(function(results) {
$scope.temp = results;
},
function(err) {
$scope.requestsError = err.statusText;
}
);
}
getWeddings();
}]);
That gives me : [$injector:unpr] Unknown provider: weddingsProvider <- weddings <- WeddingsController
if someone can spot something wrong please enlighten me.
Ps: the injections might be too much, im just putting them all out there to see if works :/
Related
I am trying to generate the template for the state in the dynamically with the controller as follows:
app.config( function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl:'homeView.html',
controller: 'homeController'
})
.state('review', {
url: '/pendingPaymentReview',
template: null,
templateProvider: function($stateParams){
return $stateParams.template;
},
controller: 'reviewController'
});
And then define the controllers as:
app.controller('reviewController', function ($scope, tempData, $stateParams) {
var template = tempData.getTemptlate();
$stateParams.template = template;
alert($stateParams.template);
tempData is a service that retrieves the page fragment from the server using $http.
My question is how do modify access and modify the template parameter of the review state? I have tried using $stateParams but got no display page. Any help will be more than appreciated.
I have a page add recommendation and same page for the edit recommendation when I click on the add recommendation the recommendation Id is null in the URL, but when I go the page by clicking the recommendation link it will show that respective Id for the recommendation, in URL it is showing but how to get that Id from the URL to use it.
My code is:
.state('Admin.AddRecommendation',{
url: "/AddRecommendation/:recoId",
templateUrl: "views/AddRecommendation.html",
params: {recoId:null},
})
controller.js:
$scope.addRecommendation = function(){
var id = $routeParams.recoId;
console.log(id);
So where I am doing it wrong.
Thanks
As you are defining recoId in the url, you don't need params: {recoId:null},
.state('Admin.AddRecommendation',{
url: "/AddRecommendation/:recoId",
templateUrl: "views/AddRecommendation.html"
})
You can access the params in the controller by injecting $stateParams
app.controller('MyController', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams) {
$scope.addRecommendation = function(){
var id = $stateParams.recoId;
console.log(id);
}
}]);
If you are using components, $stateParams is deprecated in favor of $transition$
However, it is not as straightforward to implement that: https://github.com/angular-ui/ui-router/issues/3110#issuecomment-271101827
Basically, you can use it as
.component('foo', {
bindings: { $transition$: '<' },
controller: MyController,
controllerAs: 'vm'
});
app.controller('MyController', ['$scope', '$state', function($scope, $state) {
var vm = this;
$scope.addRecommendation = function(){
var id = vm.$transition$.params().recoId;
console.log(id);
}
}]);
To get the query params from the URL when using ui-router, you can use
In your controller.js:
$state.params
This will give you all the params in the URL. To get specific param:
$state.params[<your-query-param>]
EDIT: In your question, instead of $routeParams, use $state
I'd like to filter the JSON being displayed by the route param provided. I have a list page which displays all of the json data and a detail page which I would like to just display the json matching the id in the routeparam.
This is my service:
app.factory("HC", ["$resource", function($resource) {
return {
API: $resource('/api/hc')
}
}]);
This is my controller which is working for displaying all of the results. How could I filter these by the requestParams?
app.controller('servicesDetail', ['$scope', 'HC', '$resource', '$routeParams', function ($scope, HC, $resource, $routeParams ) {
HC.API.query(function(results) {
$scope.services = results;
});
$scope.services = []
}]);
And here are my routes
.when('/services', {
templateUrl: 'templates/services.html',
controller: 'servicesController'
})
.when('/services/:serviceId', {
templateUrl: 'templates/servicedetail.html',
controller: 'servicesDetail'
})
Your json is not valid but in case it has format like that :
{ "_id" : "53bc36b8b7bbbf77208dec62", "name" : "this is from the client", "__v" : 0 }
you can use filterFilter service please see demo here http://jsbin.com/somob/1/edit?html,js,output
but the best option is send serviceId to server and get a single service from server instead array of services and filter them after
app.controller('servicesDetail', ['$scope', 'HC', '$resource', '$routeParams', 'filterFilter',
function ($scope, HC, $resource, $routeParams, filterFilter) {
$scope.services = [];
HC.API.query(function (results) {
$scope.services = results;
});
$scope.serviceId = $routeParams.serviceId;
$scope.serviceById = filterFilter($scope.services, {
_id: $routeParams.serviceId
});
}]);
html:
<!--just for testing -->
<p>ServiceId : {{serviceId }}</p>
<pre>{{serviceById |json}}</pre>
I am getting this error and I tried different methods, but still I have not found any solution.
This is my code:
app.js
angular.module('myApp', [ 'myApp.services','myApp.filters', 'myApp.directives',
'myApp.controllers']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/Receive', {templateUrl: 'partials/partial1.html', controller: 'ReceiveCtrl'});
$routeProvider.when('/Pending', {templateUrl: 'partials/partial2.html', controller: 'PendingCtrl'});
$routeProvider.when('/ResumePending', {templateUrl: 'partials/partial3.html', controller: 'PendingCtrl'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
services.js
angular.module('myApp.services',[])
.service('myservice',function($resource)
{
var pendings = $resource('myUrl2', {methode: 'GET', isArray:true});
var items;
var myPo='rawad al bo3bo3';
var quantity;
var barcode;
return{
getItems: function(){
items =$resource('myUrl', {methode: 'GET', isArray:true});
return items ;
},
setQty: function(qty){
quantity=qty;
},
deletePO : function(id){
},
suspend:function(id){
//URL needed
},
}).
value('version', '0.1');
And this is my controllers:
angular.module('myApp.controllers', []).controller('ReceiveCtrl', ['$scope','myservice', function ($scope,myservice) {
$scope.po='rawad';
alert ('WoW!! It is '+myservice.getPO);
$scope.quantity='';
$scope.barcode='';
$scope.addProduct= function(){
myservice.setQty($scope.quantity);
myservice.setBc($scope.barcode);
myservice.addToPliste;
};
}]);
In the controller I can't access the variable coming from my services... so the alert message won't work and I get this error
Error: Unknown provider: myservicesProvider <- myservices
Service declaration:
angular.module('myApp.services',[]).
service('myservice',function($resource)
Service injection in controller:
angular.module('myApp.controllers', []).
controller('ReceiveCtrl', ['$scope','myservices', ...
The service is named myservice, but you use myservices when injecting it.
In your service.js you have named your service as "service" and in your controller you are calling it as "services". That is the error. Change services in controller to service
Try this too;
In your app.js
angular.module('myApp', [ 'myApp.services','myApp.filters', 'myApp.directives',
'myApp.controllers', 'ngResource']).
And in your index.html include the angular-resource.js file. This might solve your issue.
I'm using a clone of https://github.com/angular/angular-seed to make a simple Angular.js app. I'm trying to put in some properties to the controllers in order to bind them in my HTML but keep getting errors messages that I can't seem to figure out.
My controllers.js file looks like this currently:
'use strict';
/* Controllers */
angular.module('myApp.controllers', []).
controller('MyCtrl1', [function($scope) {
$scope.names = 'bob'
}])
.controller('MyCtrl2', [function() {
}]);
Here is the app.js too if it helps:
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
I've used the default name for the app "myApp" and have also called the ng-view within my HTML. When MyCtrl1 is in use I continually get this error:
TypeError: Cannot set property 'names' of undefined
Is there something syntactically wrong here? I've tried to only modify controllers.js to avoid having issues so there shouldn't be problems elsewhere...
Controllers has a few overloads, you can either simplify your code to this:
angular.module('myApp.controllers', []).
controller('MyCtrl1', function($scope) {
$scope.names = 'bob'
})
.controller('MyCtrl2', function() {
});
Or let Angular know what $scope is like this:
angular.module('myApp.controllers', []).
controller('MyCtrl1', ['$scope', function($scope) {
$scope.names = 'bob'
}])
.controller('MyCtrl2', [function() {
}]);
Reference: http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller