The Angular + Rails Application We're Going to Build
In this guide I demo the final application that we're going to build and showcase the key skills that you'll learn.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Hi and welcome to the angular on rails boot camp course before we go into the material I want to give you a preview of exactly what we're going to build in the course material. So here we have a freelancer dashboard and this is going to be the application that we're going to create and is going to be an application that gives some resources to freelancers.

large

It's going to include things like being able to have reference documents. Now this may not seem like a big deal except that these documents are actually coming in from a completely separate application. So in addition to creating this angular front end application we're going to create two other ones we're going to create this application this is going to be. And you can see it's being reported on port three thousand one. And this is going to be a Rails application that manages documents

large

Then we have this application on three thousand two

large

and it's going to manage freelance proposals and it also is going to have some Meilleur functionality and some different things like that.

So we're actually going to build three applications and the front end is going to be an angular two and it's going to have things like this where you can call all of your data elements dynamically

large

and a really neat thing about this is because it's angular two we're going to build in the functionality where this data is going to live in real time which means that if a new document gets added the document will get added to this page and a user will see it without even a page refresh.

So I'm going to walk through how we can do that how we can have items that get added dynamically to the page without the user even having to hit page refresh or page upload. These are the kind of features that you see in all kinds of modern applications such as Facebook or Twitter where something comes up on the screen without you even doing anything and with frameworks like angular it makes it really straightforward in how to build that functionality.

We're also going to build a proposal's component and the proposals are going to have a list of all of these freelancer proposals and you can click on them and see all of the items inside but, we can also create proposals. These are going to give us the ability to do things like be able to create items and if you pay attention here on the screen you can see we're taking advantage of two way binding here provided by angular.

large

So as I'm typing here things are going to be populated on the right hand side. So notice here I'm saying Ruby on Rails angular to postscripts all of those are being added in real time as we're typing and that's provided through the angular framework and we can even run calculations.

large

So notice here I'm adding estimated hours at an hourly rate of 120 and that automatically generates our entire freelance bit so we can run calculations all happening on a live basis finishing it off with weeks to complete and we can even email straight from here so I can add in an email and the angular app won't even have to worry about the email component because I'm going to click generate proposal and this is going to spin off a number of services inside of our proposal application that we created here. And this is taking advantage of the modern micro service kind of setup where we're creating multiple applications that all combine and all communicate with each other in order to build a full unified architecture.

So this is going to be a really fun course. It's one of my favorite courses I've ever built and I've been able to get feedback from students throughout the last few months as I've been putting the curriculum together and I can say this is one of the most requested courses I've ever had. I'm very excited to publish it and I absolutely hope that you get as much out of it as I did in creating it.