I'm working on a project where we decided to use Angular and Rails for front-end and back-end. I know Angular and the back-end guys know Rails, we don't want to mix this together. There are a lot of tutorials like this on how to set up this as a single page app, I don't want this.
Is it possible to create an API with rails that I can just call with Angular? If so, is there any tutorials on how to do this?
Wha'ts the benefits of creating a single page app and mixing Angular with Rails? From my front-end perspective this just seems confusing.
Actually I'm currently working on a project that uses both angular and rails. The following things are what I did and may help you.
Separate the front end and the back end into 2 projects
For the back end I use of course Rails.
For the front end, I use Middleman since I am a ruby guy :P
Another reason for choosing middleman is that it has environments just like rails.
But you or your team can also choose bower or browserify or whatever that generates STATIC assests.
P.S. I tried RequireJS but decided not to use it because of its complicated boilerplate code.
Use Active Model Serializers for JSON responses.
Both the back end and the front end speak JSON (except for file uploading and downloading), so this is an obvious choice.
Note that Rails application should not send redirects, nor should it render HTML.
For the front end, ngResource is, well, not bad for consuming JSON responses, but sometimes you need to wrap it in your own services (I made my own resources factory based on $resource)
Use Devise Token Auth to provide OAuth2 authentication (Optional)
Of course you can use traditional cookie based authentication.
If you decides providing OAuth2, then ng-token-auth is a default consumer for Devise token auth. Note that ng-token-auth does not work so well with angular-file-upload.
Use Rack CORS for CORS (Optional)
Since the front end and the back end are 2 separated projects, they can also be deployed to different domains. In this case, implementing cross-origin resource sharing (CORS) is a must. Rack CORS can help you with CORS, but you can also implement it on the reverse proxy / load balancer layer and choose not to use Rack CORS.
I recommend to take a look at grape - https://github.com/ruby-grape/grape. It's a good way to create RESTfull APIs. It is really powerful, can generate swagger dynamic docs. Has a lot of useful addons - http://www.ruby-grape.org/projects/
I think the main benefit of hosting angular app in RoR is asset pipeline. It compiles/concatenates your assets automatically out of the box and you dont need to think about builds and gulp/grunt tasks. I developed a few apps that way.
Things that probably could help you with frontend part:
Bower for rails - https://github.com/rharriso/bower-rails
Here you can find a lot of libs as rails gems - https://rails-assets.org/
This gem generates rails routes as js helpers - https://github.com/railsware/js-routes
Extriemly usefull gem that allows you to access you rails variables from the frontend - https://github.com/gazay/gon
Related
Absolutely lost on this one. Our Backend uses c# with .NET, our Front end uses Angular with DevExtreme. Node.JS is not being used for the Angular side as far as I'm aware, our project lead wants me to figure out how to integrate Docusign onto our Web app.
Do you use Visual Studio? already have a project for your back-end?
If you do, just go to add a new nuget package and search "DocuSign"
I assume you wanted the eSignature functionality, that would DocuSign.eSign.dll
Once you add it though, you'll get access to the functionality, but you still need a few things.
To set up your OAuth quickly/easily, highly recommend you use the Quickstart, it will generate a separate C# project for you, but then you can just copy/paste the relevant code+configuration to your existing project.
I'm currently learning Angular2 and went through the quickstart and heroes tutorial. I'm always starting these apps with "npm start".
I've created a backend application in ruby on rails, and also have a frontend angular2 app. I do not know how I can integrate the angular2 app within the rails app. Theoretically, I can just put it into the public/ directory to make the JS accessible, but I probably need to convert it somehow so that the links are setup right.
Can anyone tell me how this is done normally?
Thanks a lot
You can do this in two ways as I can see
1 - Add your angular project folder to app/assets/javascripts or in the root in you app and set rails asset pipeline to use it. read more here (for angular1) https://thinkster.io/angular-rails
2 - Running as a separate project and use rails as only as an API. (this is my preferred method) due to following reasons.
this will give a separation between your rails app and angular app. Basically you are forced to implement things in standard api way, like authentication etc. hence overtime you will have a more solid rails api and angular fronted
once you have the separation, you can run these two in different app servers if you wish to. gives better load balancing etc..
You can always replace both frontend and backend with different technologies later, like amber and node since they communicate only via an http api.
So this option will need more time and effort, but, if possible its defiantly worth it :)
I'm thinking about making something with the MEAN stack. I need a way to edit the content of the site, like e.g. Wordpress offers (basically a CMS).
The confusing bit is how the CMS and Angular would work together. I've looked at a CMS named Keystone, and there you have to set up some routing etc. in Node. Won't this crash with the routing you set up in Angluar?
In other CMSs I've used, the creation of the views happens on the server side. In Angular, as far as I understand, you crate a HTML template, which you can populate with data in an angular controller. This also seems like something that could crash between CMSs and Angular. Is this the case?
Is there any other quirks or similar about Angular and content managment systems I should know about, or is it usually not much problems integrating the two?
meanjs.org has a pretty good approach to this. Install meanjs. It comes with a sigin/signup and even allows you to create articles from the vanilla install.
Put simply, when you are creating a web app with the MEAN stack, think of AngularJS as "THE" app, and node.js as the api.
If you approach building your web app as a javascript application (AngularJS), that happens to get its data from an server api (node.js), then you will begin to understand how to properly use the MEAN stack.
First: Angular will have the routes defined in the $routeProvider. Build the routing urls in AngularJS first. They are "THE" routes for your web app. A good way to look at it is to build the AngularJS portion with the ability to change your api server, even to another language (PHP, python, go, etc) if necessary.
Second: Build your AngularJS to communicate to the api with $resource. Essentially a $resource is an easy way to call out to an api using restful routing. This "restful routing" is now the routing that needs to be "mimicked/copied" into the routing for the node.js routes.
Often the AngularJS routes (the url) will match the $resource routing that matches the node.js routing.
Again, take a look at meanjs.org and you will have a better understanding on how to properly organize what "seems like" (and actually are) two separate apps.
Basically, you need three sets of routes (or two if you are doing it on the cheap).
Start out with a set of routes on the server that return regular webpages. Forget about JavaScript. Do not involve Angular at this stage.
Second, add another set of routes on the server which return data in a rawer form (such as JSON). This would typically be a RESTful API.
Third, add Angular to the client. When the view needs to be updated, update the URL in the browser and use Ajax to hit the RESTful API to get the data needed to populate it. (You want the URL you set the address bar to to match the URL of the page from the first set of routes that you are duplicating with JS and the data from the RESTful route).
If you are doing it on the cheap, like Gawker did, then you would skip the first set of routes and go direct to the JS+REST approach.
I think you need CMS on MEAN stack development environment.
there are some cms on mean stack you can try.
PancilBlue
Calipso
try this.
I was trying something similar, I found this link very useful AngularJsCMS It has told about free respond cms which is based on angularjs and have the ability to create pages like wordpress and manage contents.
We have been working on a project using angular and keystonejs. Simply serve the default template layout found in keystone and inject the data-ng-view tag within the body tag. Serve this template for all requests to '/'.
Then write your angular app normally to consume endpoints. These endpoints can be done in keystone using the api middleware. In the routes/index.js file add a key/value pair in the routes object with the name of your custom endpoint then import the folder containing your endpoint function definitions.
var routes = {
views: importRoutes('./views'),
api: importRoutes('./api')
};
exports = module.exports = function(app) {
app.get('/api/posts', keystone.middleware.api, routes.api.post.index);}
I recently migrated my blog over to MEANie - a lightweight custom MEAN Stack CMS that I developed.
I made it open source for anyone to use and posted details and setup instructions on my blog at http://jasonwatmore.com/meanie.
I've come across a lot of posts on Stack Overflow about Express.js being used with Angular.js and how there are two MVC components to both the client and back-end sides of the web application, but I've just become confused now. What are the components of a web application, and what does each of these two serve? What are the MVC parts for each of the client and back-end sides exactly?
Thanks in advance for any response!
In most cases, it's pretty straight forward. In my applications, it generally works like this:
Express.js provides the backend REST API
Express.js serves up the static HTML, JavaScript, CSS and image assets.
The frontend HTML/Javascript bits are written using Angular.js.
I tend not to use any of Express.js' view capabilities (the stuff that provides functionality similar to ruby on rails or Django, with templating and all that), but instead serve up a single index.html and then let Angular.js do the rest. It's very possible/typical to make an Angular.js app which has only one main HTML file and therefore the "view" pieces of express are unneeded.
Angular.js itself is structured in an MVC fashion. You have view templates and controllers which provide data to them and handle events from user interaction. The data the controllers act on from comes from the model. The model is simply a layer providing access to the API provided by the Express.js backend. This is typically done using Angular.js resources.
RESTify is another alternative to express for apps stuctured in the way I describe.
As others have recommended, just go through the tutorials on each component's website. I also found a tutorial about integrating Anguar.js and Express.js here: http://technokayiti.blogspot.no/2013/06/lesson-5-angularjs-tutorial-backend.html
I recently installed a web app which use Symfony2 framework and Apache Thrift.
Now I would like to make backbone usable in Symfony2 framework.
My question is about Backbone.sync.
How can I override/use Backbone.sync in order to get data from the server in a web app using Symfony2 framework and/or Apache Thrift ?
Are there some tutorials on the web for do it? I just found this one Symfony + Backbone.js for highly dynamic apps, but it doesn't say nothing about how to get data from the server.
By default, Backbone.js and its sync method can work with REST APIs without any modification. So if you can create a web service with Symfony2 that can handle GET/POST/PUT/DELETE and return JSON, you should be good to go.
I'm not terribly familiar with Symfony, but for a basic REST API, you'll need to define your URL routes (e.g. "www.yourdomain.com/api/items"), and then create methods to perform actions based on those routes (e.g. return records in JSON encoded format).
Here's a quick tutorial on creating a REST API with Symfony2: Symfony2 REST
Also, check out Wine Cellar tutorial on the Backbone tutorial page. It uses PHP Slim framework, but the backbone.js concepts will be exactly the same, because as long as you are using a basic REST API, backbone is back-end agnostic.
Check this bundle https://github.com/gigo6000/DevtimeRafflerBundle it's a small simple app that includes some basic REST actions. This was created with https://github.com/gigo6000/DevtimeBackboneBundle