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'}
Related
I have a little experience with Sails and I really like the way it automatically injects all the models and services inside controllers so we save ourself from requiring all those at the beginning of the script, but the framework is very bulky.
So, I am making a project using express framework and want to implement this feature where I do not need to require Services and Models in each and every Controller script.
Thanks.
you can create a index file for exporting all services and models. Then just include it into your controllers
in service.js
exports = {
auth : require('./auth'),
user : require('./user'),
and many more
}
in controller
var service = require('service')
use services as service.auth, service.user
Thanks
I have been new to angular js.
My structure of Angular JS in MVC5 is in the picture below
I need to create a simple application that has CRUD for a single entity.
So far, I have created only single controller in Angular folder.
I have put all the directives, filters and functions in the Website.js file.
I need to create different pages like add/edit/details.
The CRUD operations are not only simple, but i have to put some extra logics in them. I need some process where either deletion, addition or updating in model
do changes everywhere on the page.
Question
Should i place all the directives, functions to the same controller? Or i should create seperate files for each CRUD operation? Please guide me to the structure of this application.
You should create seperate files for directives, filters, services and controllers like this:
app(folder inside scripts)
----- controllers/(folder inside app)
---------- userController.js
---------- itemController.js
----- directives/(folder inside app)
---------- mainDirective.js
---------- otherDirective.js
----- services/(folder inside app where all the services will go)
---------- userService.js
---------- itemService.js
----- app.js(main file where you will declare angular module and other application configurations which are common)
Create module wise controllers and service like for user module i have created one service named userService and one controller userController now in this user controller i will implement all business logic related to user and all CRUD operations. It is good practice to specify all $http requests for CRUD in a service and call that service from controller.
I have created a new api using sails sails generate api tasks, using the default configuration of sails 0.12.
With Sails awesome blueprints, I can access localhost:1337/tasks and see the list of tasks or localhost:1337/tasks/create?text=yo to create a new one.
But what I want it to connect these endpoints to an .ejs view.
I tried creating a new folder tasks and placing show.ejs or index.ejs files in it but it's still returning the Json.
Is there a default way to render .ejs files through the default blueprint urls, without creating new routes and controller methods?
Well it took me a while to find the answer, so for anyone looking to use sails.js development speed, here is the way to do it:
After generating the api, create a folder inside your views folder (named after your controller). The files in it should be:
+ tasks (the folder with the same name as your controller)
- find.ejs (list of all items)
- findOne.ejs (view a specific item)
- create.ejs (after a successful creation)
- update.ejs (after a successful update)
- destroy.ejs (after a successful deletion)
These files are connected by default to the different api endpoints. So, when you access the url localhost:1337/tasks sails will automatically render tasks/find.ejs. Same for the other endpoints.
Another point is that each view will have a global variable named data that will include the result of the api request (i.e. the records that were fetched / modified).
You can see a small example here: https://github.com/web-development-course/Bootstrap (look at the 'things' api)
I hope it will help you guys
I'd like to develop a Rails app with a full admin suite, authentication, authorization etc. that is pure Rails, but I would like there to be one part of the app that is 'real-time' and where the view is bound to the data, and I'd like to use Ember for this.
For example, I have a Company model, which has_many Parties, and Party has_many Guests. I would like a User to be able to log in, navigate to a Company page that they are authorized to access, and click a link to Company/:id/Party/:id/live, which would be a page featuring an Ember.js app that offers details of all of the Guests in the party. It would query the database every X seconds, and the Ember.js app would automatically reflect the updated data (e.g. one section of the page only shows Guests where Guest.status == in_attendance or something like this).
So my question is: Is there any standardized or proven way of incorporating Ember into just a portion of a Rails app in this manner?
Thanks!
To embed Ember application, you should do two things:
Change root element from body to something else
Disable URL management
Code samples:
App = Ember.Application.create({
rootElement: '#app'
});
App.Router = Ember.Router.extend({
location: 'none'
});
I took this information from Ember Guides: Embedding Applications
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.