I have a Rails application which uses AngularJS on the front-end. I also have a route in the format "/api/:user_id/submissions/:id" to access specific submissions from a user. On the front-end I'd like to display each post from the Devise user that is currently logged in, and only their posts. I have created both an Angular factory:
var brainDB = angular.module('brainDB',['ngResource']).factory('userSubmission', function($resource){
var service = $resource('/api/:user_id/submissions/:id', {user_id: '#user'}, {id: '#id'} );
return service;
And have it scoped to my controller:
brainDB.controller('SubmissionsCtrl',['$scope', 'Submission', 'userSubmission',
function($scope, Submission, userSubmission){
$scope.submissions = Submission.query();
$scope.userSubmissions = userSubmission.query();
}]);
The only problem is that the factory at the top doesn't work. I can output every single submission in my database, but I don't know how to tell Angular what the user_id of the current_user is. I have a submissions.rb controller with an action which successfully pulls all of the posts for the specific user from my route, "/api/:user_id/submissions/" but like I said I don't know how to tell Angular what the current_user.id is because current_user can only be accessed from Rails.
I've been trying to solve this for a week now and haven't found much help through Google searches. Any advice is greatly appreciated.
My own app has another server endpoint call defaults & angular service Metadata that gets initialized in an angular .run() block. This block pulls a currentUser object back (with other metadata) to initialize $rootScope variables. From there, I can call other angular services with: userSubmission.query({user_id: $rootScope.currentUser.id}); etc. in my angular controllers.
Another option would be to generate metadata content in a javascript file with all your metadata (i.e. metadata.js.erb in which you let rails populate variables (using <%= =>) that are available to your whole angular app.
Hope that helps.
Related
I am new to frontend development,I am using rails and ember to built a sample app .
in rails , i have a function as below
def get_id
first_id = User.first.id
render json: { id: first_id , type: "master"}
end
I want to fire a GET request from ember side to call the get_id in ember side which will return the required response . thanks .
Assuming you have your User models defined in both your Rails and Ember apps, you have a Rails DB seeded with User objects, and you're using Ember Data within your Ember application, to actually make a GET http request you would theoretically need to make this call:
this.store.findRecord('User', id);
Where id is the id of the User you'd like to retrieve.
If you need more guidance on setting up your models, etc. this guide would be a great place to start: https://emberigniter.com/modern-bridge-ember-and-rails-5-with-json-api/
I am using super heroic Angularjs in my application. I have a couple of pages like home.html, project.html, map.html. Each pages has a controller associated with it e.g. HomeCtrl, ProjectCtrl, MapCtrl. In my home.html user can create a project or navigate to project.html. In project.html I have list of all projects. When user clicks on a project he is navigated to map.html where I have some information regarding to project. I am using ngRoute for routing between the views. I am facing some challenges to share data across the controllers. I have created a service called dataFactory which stores all the data retrieved from backend. In my project.html view, I load all the data from backend and store them in service. When user lands into a project I use data stored in the dataFactory. The concern is that when user refreshes the page when he is on the map.html, all the data which are stored in dataFactory are wiped out and not loaded back cause data loading happens in the project.html page. I don't know how can I deal with it. I can not make a call to backend in every controller to get the data. I am planning to load the common data in app.run() method. But in that case I have to broadcast/emit the events to notify controllers, which will also be messier and will eventually lead to errors cause I know my application is going to be a huge application.
There is a solution but it needs some additional configuration while making routes in your $routeProvider, You can resolve your route when you have your data fetch from the backend. By using this method if a user refreshes the page on one of your project it will receive the data first then display that particular page.
First you have to modify your dataFactory something like this
app.service('MyService', function($http) {
var myData = null;
var promise = promise || $http.get('data.json').success(function (data) {
myData = data;
});
return {
promise:promise,
doStuff: function () {
return myData
}
};
});
Then in your $routeProvider you could make route to resolve when your data is fetched (that is receives its promise) more over by using this method it wont make another data call if your data is stored.
app.config(function($routeProvider){
$routeProvider
.when('/',{controller:'MainCtrl',
template:'<div>From MyService:<pre>{{data | json}}</pre></div>',
resolve:{
'MyServiceData':function(MyService){
return MyService.promise;
}
}})
.when('/b',{controller:'MainCtrl2',
template:'<div>From MyServic2e:<pre>{{data | json}}</pre></div>',
resolve:{
'MyServiceData':function(MyService){
return MyService.promise;
}
}})
})
I've a made a working Plunker for demo. Fell free to ask any question regarding this.
Hope it helps.
when you refersh the page, the app module loads again wiping out all the stored vars. You can use sessionStorage or localStorage to maintain data.
When you store your data into service/ factory store it in to your browser's local storage too. So, when user refresh the page, you can check whether your local storage has the data or not. If there is data in your local storage just save these data into your service/ factory.
That's all !!!
If you are struggle to implement these things please update me, I can help you on the code also.
I am building an angular application, I need to build a login module and I found this article: angular-auth
It seems ok, but I can't figure out how to authorize users depending on url parameters. For exmaple I have this route:
$routeProvider.when('/client_details/:clientId', {
templateUrl: 'client_details/client_details.html',
controller: 'clientDetailsCtrl'
});
I need to check that you can see the client details only if the client belongs to your list of clients. Otherwise I can just try random ids to see random clients page.
How can I do that?
EDIT
The short version:
Say I have application data is many different services. How do I get around needing to inject all of those services into every controller that displays application state?
EDIT
I am building my first Angular application. The basic design is I have a home page that shows the value of about 5 different variables (which are each pretty complicated). While on this page the app is collecting and analyzing data from bluetooth. Occasionally, the these 5 variables and some bluetooth data are saved to a REST back end and also saved to the device. There are pages for each of these 5 variables to change their value.
I have done my best to follow best practices. I have very thin controllers. I use services for all my data. I really only use $scope for binding data between views and controllers.
My issue now is that I started with a global "State" service to keep track of those 5 variables. I inject into any controller that needs to display state, and bind the html to it. Any time I want to change any state, I call a method of that State service to do it. This worked well, but now that State service is getting huge.
I have tried to break functions out to other services, but I run into the issue of needing to read data from the State service, then writing back to other properties of the State service. If I inject the other service into State, I can't inject State into the other service too.
I have thought about how I could have many smaller services, but I keep coming back to when I save the data to the server. When I do that I need to gather up data from every corner of the application to send up. If all this information is stored in different services, I am left with injecting all of them into a single service once again.
As I write this, I am pretty sure I am missing a big concept with using $scope across an application.
Any pointers would be appreciated,
Thanks,
Scott
Could you divide things into sub-services, and then make the State service an aggregator for these sub-services, then instead of injecting State into the sub-services, you inject the specific sub-service that you need? E.g.:
var app = angular.module('services', []);
app.service('sub1', function(){
return {
// ...
}
});
app.service('sub2', function(sub1){
var data = sub1.getData();
data.prop = 'new_value';
sub1.setData(data);
return {
// ...
}
});
app.service('State', function(sub1, sub2){
var data = sub1.getData();
data.prop = 'new_value';
sub1.setData(data);
var data = sub2.getData();
data.prop = 'new_value';
sub2.setData(data);
return {
// ...
}
});
Looks like you need Redux to help you manage your application state
https://github.com/wbuchwalter/ng-redux
I'm writing an app with an angularjs front-end and a Rails backend. One feature of the app allows standard manipulations of a list of employees. Employees can be added and deleted, listed, and their names can be edited.
In a traditional Rails app, most of the code needed to implement these feature can be created using a generator, e.g. with rails generate scaffold employee name:string.
Assuming I've created a restful api using the Rails generator command above, is there an equivalent tool I can use to scaffold out a front end in Angular? I suppose I'd want it to generate views, a controller and a service that fetches employee data. I'm aware of the Yeoman angular generator. Can Yeoman do what I need? If so, how?
I'm comfortable with Rails but new with Angular. Does a tool exist to generate basic front end code for a restful resource?
Many thanks for your help.
Yeoman can do this mostly:
yo angular; //generate an angular app
yo angular:route employee; //generates a controller and a view for employee
yo angular:service employee; //generate an employee service
then you modify the service employee so it returns a resource (make sure you include angular-resource.js)
angular.module('myMod').service('employee', ['$resource', function ($resource) {
return $resource('/path/to/rest/endpoint/for/employee');
}]);
angular.controller('employee', ['$scope', 'employee', function($scope, employee) {
$scope.employee = employee.get({id: 1});
//employee is now whatever /path/to/rest/endpoint/for/employee?id=1 returns
}]);
Then you can do
employee.name = 'John Smith';
employee.$save();
//sends a post with {id:1, name:'John Smith'}